这是一个底层基于WebGL开发的3D渲染引擎（当然也有可能以后正式出基于WebGPU的版本）.与直接使用WebGL相比，比如着色器，大多数情况下不需要自己开发。然而，这并非总是如此。如果你的需求太特殊，我们还是可以用更原生的方式来绘制。是一个非常友好的设计。绘制过程一般最常见的绘制过程大致如下：大家可以提前看一下我们最终绘制的效果（一个旋转的立方体）：点击在线示例查看代码。场景所谓场景，即空间的属性，就是当前空间中有什么；例如：有什么物体（物体的材质、形状、大小），是否有光（点光源或环境光，或平行光）等。对于我们来说，很明显，正六面体在空间，似乎有光芒照耀在上面。所以，让我们先创建场景，然后在场景中添加内容：varscene=newTHREE.Scene();网格模型现在，让我们创建一个立方体：vargeometry=newTHREE.BoxGeometry(100,100,100);立方体是红色的，所以你需要创建一个材质对象：varmaterial=newTHREE.MeshLambertMaterial({color:"red"});然后，将立方体与材质对象关联起来，就可以得到完整立方体的表示信息的模型对象：varmesh=newTHREE.Mesh(geometry,material);最后，将立方体放入之前创建的空间中：scene.add(mesh);光一般有很多种，比如环境光，其实我们可以认为是漫反射。在原生代码中，我们需要自己设计光照叠加算法。这里只需要调用api设置参数：varambient=newTHREE.AmbientLight("green");同样，也需要添加到当前空间：scene.add(ambient);其他类型的灯类似，只是参数不同，这里不再赘述。摄像头其实就相当于你眼睛的可见区域。空间中的内容并不意味着您应该看到的内容。使用相机确定您观看的位置、方向和范围。还有一点需要特别说明一下，因为你看到的其实是一个平面，空间本身就是3D的，所以就有了投影算法。不同的投影算法最终会在你的空间里有不同的内容（我们这里选择正交投影），整体比较容易理解，直接看代码：varwidth=window.innerWidth;//窗口宽度varheight=window.innerHeight;//窗口高度vark=width/height;//窗口纵横比vars=100;//3D场景显示范围控制系数，系数越大显示范围越大varcamera=newTHREE.OrthographicCamera(-s*k,s*k,s,-s,1,1000);camera.position.set(200,300,200);//设置相机位置camera.lookAt(scene.position);//设置相机方向（指向场景对象）渲染器准备好了，空间准备好了，相机也准备好了，接下来就是渲染了。首先，创建一个渲染器：varrenderer=newTHREE.WebGLRenderer();然后，设置参数：renderer.setSize(width,height);//设置渲染区域大小renderer.setClearColor(0xb9d3ff,1);//设置背景色在哪里结束渲染内容？当前是一个页面，所以渲染器需要关联到页面：document.body.appendChild(renderer.domElement);万事俱备，只管渲染：renderer.render(scene,camera);对比最终效果，我们画的是静态的怎么办？您可以修改相机的位置、角度等，或者改变物体的位置。比如这里，我们改变物体的位置：mesh.rotateY(0.01);同样，修改完成后，再使用渲染器渲染即可。
