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

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

渲染器

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

WebGL 渲染器 WebGLRenderer

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

设置 Canvas 画布尺寸.setSize()

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

渲染器渲染办法.render()

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

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

渲染器 Canvas 画布属性.domElement

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

document.body.appendChild(renderer.domElement);

Canvas 画布插入到任意 HTML 元素中

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

3D 建模学习工作室