Vue+threejs第一个3D案例—渲染器

前面两节课，给大家分别介绍了场景Scene、相机Camera，本节课给大家介绍一个新的threejs对象WebGL渲染器WebGLRenderer。

WebGL渲染器的功能字面意思就是渲染三维场景，再具体点就是控制相机Camera对3D场景Scene进行"拍照","拍照"结果呈现到Canvas画布上面。

WebGL渲染器WebGLRenderer

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

// 创建渲染器对象
const renderer = new THREE.WebGLRenderer();

回顾：前面课程定义的canvas画布

const canvas = document.createElement('canvas');
canvas.width=800;//画布宽度px
canvas.height=800;//画布高度px
canvas.style.background='black';
document.body.appendChild(canvas);

关联Canvas画布，这样就能把WebGL渲染器渲染的三维场景呈现到Canvas画布上

// 创建渲染器对象
const renderer = new THREE.WebGLRenderer({
    canvas:canvas//渲染结果输出画布：canvas
});

渲染器渲染方法.render()

渲染器WebGLRenderer执行渲染方法.render()就可以生成一个一张图像效果，也就是把三维场景Scene呈现在canvas画布上面,你可以把.render()理解为相机的拍照动作“咔”。

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

写到这一步，你现在可以刷新你vue项目网页，查看渲染效果，这时候，你可以在canvas画布上，看你场景Scene中的长方体网格模型Mesh。

方法2：不手动创建WebGL渲染器Canvas画布

手动创建WebGL渲染器Canvas画布

const canvas = document.createElement('canvas');
const renderer = new THREE.WebGLRenderer({
    canvas:canvas//渲染结果输出画布：canvas
});

不手动创建WebGL渲染器Canvas画布，threejs内部也能自动创建canvas画布，并输出，不过这时候需要你设置输出的canvas画布尺寸，获取渲染结果插入网页，下面给大家演示。

const renderer = new THREE.WebGLRenderer();

设置Canvas画布尺寸.setSize()

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

// 注意先执行.setSize设置好画布尺寸，再执行渲染`.render()`
const renderer = new THREE.WebGLRenderer()
renderer.setSize(width, height); 
renderer.render(scene, camera);

渲染器Canvas画布属性.domElement

渲染器WebGLRenderer通过属性.domElement可以获得渲染方法.render()生成的Canvas画布，.domElement本质上就是一个HTML元素：Canvas画布。

这意味着canvas画布如何布局就是普通前端知识了，比如下面代码就是直接插入到body元素中。

document.body.appendChild(renderer.domElement);

设置背景颜色.setClearColor()

你也可以设置WebGL渲染器渲染的Canvas画布背景颜色，如果不设置默认黑色。

renderer.setClearColor(0x999999);