关于three.js:Threejs教程渲染器

举荐：将NSDT场景编辑器退出你的3D工具链。
其余系列工具：NSDT简石数字孪生

渲染器

生存中如果有了风物和相机，那么如果想取得一张照片，就须要你拿着相机，按一下，咔，实现拍照。对于threejs而言，如果实现“咔”这个拍照动作，就须要一个新的对象，也就是WebGL渲染器WebGLRenderer (opens new window)。

通过WebGL渲染器WebGLRenderer (opens new window)能够实例化一个WebGL渲染器对象。

// 定义threejs输入画布的尺寸(单位:像素px)const width = 800; //宽度const height = 500; //高度renderer.setSize(width, height); //设置three.js渲染区域的尺寸(像素px)

渲染器WebGLRenderer执行渲染办法.render()就能够生成一个Canvas画布(照片)，并把三维场景Scene出现在canvas画布下面,你能够把.render()了解为相机的拍照动作“咔”。

renderer.render(scene, camera); //执行渲染操作

渲染器WebGLRenderer通过属性.domElement能够取得渲染办法.render()生成的Canvas画布，.domElement实质上就是一个HTML元素：Canvas画布。

document.body.appendChild(renderer.domElement);

<div id="webgl" style="margin-top: 200px;margin-left: 100px;"></div>document.getElementById('webgl').appendChild(renderer.domElement);

3D建模学习工作室