three.js的学习（一）

以你之姓@ 2023-06-18 15:57 14阅读 0赞

1，three.js是什么？

Three.js 是一款运行在浏览器中的 3D 引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。你可以在它的主页上看到许多精彩的演示。不过，这款引擎还处在比较不成熟的开发阶段，其不够丰富的 API 以及匮乏的文档增加了初学者的学习难度（尤其是文档的匮乏）three.js的代码托管在github上面。

2，三大组件：

场景 scene  ; 相机 camera ; 渲染器 renderer ;有了这三样东西才能将物体渲染到网页中取；

创建这三要素的代码如下：

var scene = new THREE.Scene();  // 场景
    var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);// 透视相机
    var renderer = new THREE.WebGLRenderer();   // 渲染器
    renderer.setSize(window.innerWidth, window.innerHeight);    // 设置渲染器的大小为窗口的内宽度，也就是内容区的宽度
    document.body.appendChild(renderer.domElement);

3，场景介绍：在 Three.js中场景就只有一个，用 tHREE来表示，构建一个常见只需啊哟new一个对象就可以了，代码如下：

var scene = new THREE.Scene() ;  场景是所有物体的容器，想要显示一个物体，需要将物体放入场景中；

4，相机介绍：相机决定了场景中的哪个角度的物体会显示出来，场景只有一个，而相机却有很多个，three.js中的相机有多种，这里介绍一种透视相机，（参数的含义后面文章介绍）（Perspective ： 透视的）

var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);

5，渲染器介绍：渲染器决定了渲染的结果应该画在页面的什么元素上；并且以怎样的方式来绘制，这里使用了 WebGLRenderer

var renderer = new THREE.WebGLRenderer();
    
    renderer.setSize(window.innerWidth, window.innerHeight);
    
    document.body.appendChild(renderer.domElement);

渲染器renderer的domElement元素，表示渲染器中的画布，所有的渲染都是画在domElement上的，所以这里的appendChild表示将这个画布domElement挂载body下面；这样渲染的结果就能够在页面中显示了；

6，添加物体到场景中：

var geometry = new THREE.CubeGeometry(1,1,1); // 绘制一个几何体（长宽深各为1）
    var material = new THREE.MeshBasicMaterial({color: 0x00ff00});// 设置材质
    var cube = new THREE.Mesh(geometry, material); // Mesh是一个构造器，将几何体和材质结合
    scene.add(cube); // 场景中添加构造后的几何体

(  cube 立方体； Geometry 几何结构  ，Mesh：网丝，Material：材料)

CubeGeometry(width, height, depth, segmentsWidth, segmentsHeight, segmentsDepth, materials, sides)  ；这是全部参数；上面只用了前三个参数；宽度，高度；深度；

MeshBasicMaterial是一种非常简单的材质

7，渲染：

renderer.render(scene, camera);

渲染函数的原型如下：

render( scene, camera, renderTarget, forceClear )

各个参数的意义是：

scene：前面定义的场景

camera：前面定义的相机

renderTarget：渲染的目标，默认是渲染到前面定义的render变量中

forceClear：每次绘制之前都将画布的内容给清除，即使自动清除标志autoClear为false，也会清除。

8, 渲染循环：实时渲染和离线渲染；

循环渲染：

function render() {
        cube.rotation.x += 0.1;
        cube.rotation.y += 0.1;
        renderer.render(scene, camera);
        requestAnimationFrame(render);
     // requestAnimationFrame，这个函数就是让浏览器去执行一次参数中的函数
    }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpbmdlMDUwOA_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpbmdlMDUwOA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191203163943831.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpbmdlMDUwOA==,size_16,color_FFFFFF,t_70