Three.js教程：渲染器

ygtu2018

已于 2023-06-13 09:17:36 修改

阅读量1.8k

点赞数

分类专栏： three.js 文章标签： javascript 数码相机开发语言 three.js

于 2023-06-13 09:15:13 首次发布

本文链接：https://blog.csdn.net/ygtu2018/article/details/131181314

版权

7 篇文章 0 订阅

订阅专栏

文章介绍了在Three.js中如何利用WebGL渲染器创建和设置Canvas画布尺寸，执行渲染操作以展示三维场景。通过WebGLRenderer的.setSize()和.render()方法，以及将渲染结果插入到HTML元素中的过程，帮助读者理解3D建模的基本流程。

摘要由CSDN通过智能技术生成

推荐：将 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);