什么是Three.js

官方文档
Three.js是基于原生WebGL封装运行的三维引擎，Three.js是一个3D JavaScript库

WebGL（Web Graphics Library:3D绘图协议）：

是一种在网页上渲染3D图形的API，允许把js和🤔openGL结合起来,webGL可以为html5的😉canvas提供硬件3D加速器，
1.webgl是一种应用于前端的绘图协议
2.webgl以html为框架，结合opengl + js开发
3.直接调用本机的gpu进行3d硬件加速

是用于渲染2D、3D矢量图形的跨语言、跨平台的应用程序编程接口（API）
Canvas API（画布）是在HTML5中新增的标签用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用JavaScript操作的位图（bitmap）

threejs三剑客

在threejs中，渲染一个3D世界的必要因素是场景(scene),相机(camera),渲染器(renderer)

场景是一个三维空间,所有的物品的容器，相当于世界,我们创建的所有光源等都必须添加到场景中生效
相机决定场景中哪个角度的景色会显示出来
渲染器决定了渲染的结果因该话在页面上的什么元素

Threejs组成部分

three.js 的一个简单思维导图(拍戏现场)🎬：
Scene：场景，用于放置和组织 3D 对象的场所(空间场地)🏡
Camera：相机，用于捕捉场景的图像(摄像机)📷
Mesh：网格，由几何体和材质组成，是可以放入场景的 3D 对象(演员)🕵️
Geometry：几何体，用于描述 3D 对象的形状(演员外貌)👤
Material：材质，用于描述 3D 对象的外观(演员服饰)👚
这些部分相互协作，在浏览器中创建和渲染 3D 图形。🛠️
Renderer：渲染器，用于将场景的图像渲染到浏览器的 Canvas 中(显示器)🖥️
在这里插入图片描述

threejs创建步骤

1.创建场景

//创建场景
var scene = new THREE.Scene()
//相机设置为世界坐标原点
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

2.创建几何对象

//创建几何体
var geometry = new THREE.BoxGeometry(1,1,1);//矩形几何体

3.创建材质对象

//创建材质
var material = new THREE.MeshBasicMaterial({color:0xffff00});

4.创建网格模型 (几何体,材质,传入网格模型实例对象中，网格模型add入场景中)

var cube = new THREE.Mesh(geometry,material);//网格模型
cube.position.set(0,0,10);//设置物体的位置,正前方10米
scene.add(cube);//添加物体

5.点光源设置

//点光源
var point = new THREE.PointLight(0xffffff);
//点光源位置
point.position.set(400,200,300);
//点光源添加到场景中
scene.add(point);

6.环境光源设置

//环境光源
var ambient = new THREE.AmbientLight(0x444444);
scene.add(ambient);

7.相机设置

var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 0);//设置相机三维坐标

8.创建渲染器

var renderer = new THREE.WebGLRenderer();//canvas渲染器

9.执行渲染，(将场景和相机)放入render.remder（x,y）

//将渲染好的canvas追加到dom
document.body.appendChild(renderer.domElement); 
renderer.render(scene, camera);//开始渲染

案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script>
    <script src="http://www.yanhuangxueyuan.com/threejs/examples/js/controls/OrbitControls.js"></script>
    <script src="http://www.yanhuangxueyuan.com/threejs/examples/js/loaders/GLTFLoader.js"></script>
    <title>Document</title>
</head>

<body>
    <div id="webgl"></div>
</body>

</html>
<script>
    var scene = new THREE.Scene();
    var axes = new THREE.AxesHelper(50);//添加辅助坐标系
    scene.add(axes);
    //================================地面================================================//
    var plane = new THREE.PlaneGeometry(150, 50);
    var materialPlane = new THREE.MeshLambertMaterial({
        color: 0xcccccc
    });
    var planeMesh = new THREE.Mesh(plane, materialPlane);
    planeMesh.rotation.x = -0.5 * Math.PI; //沿x轴翻转90°，即为展平效果
    planeMesh.position.set(0, 0, 0);

    scene.add(planeMesh);

    //=================================加载模型==================================================//
    initModel();
    async function initModel() {
        let glb = await loadGlb();
        glb.position.set(10, 4, 0);
        scene.add(glb);
    }
    function loadGlb() {
        return new Promise((resolve, reject) => {
            var loader = new THREE.GLTFLoader();
            loader.setCrossOrigin('Anonymous');//跨域问题
            loader.load('./train.glb', (glb) => {
                console.log('glb>>>', glb);
                resolve(glb.scene);
            }, undefined, (error) => {

                console.error(error);
                reject(error);

            });
        });
    }

    //=======================================光源===================================================//
    scene.add(new THREE.AmbientLight(0x444444));//环境光，可以看到所有物体
    var pointLight = new THREE.PointLight(0xffffff);//点光源
    pointLight.position.set(20, 30, 20);
    scene.add(pointLight);


    //=============================相机=============================================//
    var camera = new THREE.PerspectiveCamera(45, 2, 0.1, 2000);
    camera.position.set(50, 20, 0);
    camera.lookAt(scene.position);


    /**
     * 创建渲染器对象
     */
    var renderer = new THREE.WebGLRenderer({
        antialias: true //消除锯齿
    });

    renderer.setSize(1000, 500);
    renderer.setClearColor(0xb9d3ff, 1);

    renderer.render(scene, camera);
    var cont = document.getElementById('webgl');
    cont.appendChild(renderer.domElement);


    //增加鼠标拾取效果
    var controls = new THREE.OrbitControls(camera, renderer.domElement);
    controls.addEventListener('change', () => {
        renderer.render(scene, camera);
    });


</script>

欢迎留言探讨

# javascript # ecmascript # echarts
Logo
AtomGit开源社区

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念，把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起，为开发者提供从开发、训练到部署的一站式体验。

更多推荐

1.8B 体积、33 种语言互译｜腾讯混元 HY-MT1.5-1.8B 多语言机器翻译模型上线

在跨语言交流日益频繁的今天，阅读外语菜单、处理多语言邮件、与不同语言背景的人沟通，已经成为很多人日常工作与生活的一部分。过去，这类需求往往依赖联网翻译工具，而如今，—— 一部设备即可支持的相互翻译。当 AI 不再只是“逐字直译”，而是开始理解语境、风格与语言之间的细微差异，机器翻译就真正具备了今天为大家介绍一款高质量、多语言、支持端侧部署的机器翻译模型 ——，现已上线 AtomGit AI 社区，

avatar AtomGit开源社区
cover

AI 浪潮终章奏凯！GitCode & 文心大模型 & 智源研究院 AI 应用开发大赛圆满落幕

avatar AtomGit开源社区
cover

LET：面向真实场景与长时序任务的人形机器人数据集

avatar AtomGit开源社区