关于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 建模学习工作室

渲染器