渲染器

上一节已经完成了一个初始的demo。

Threejs 的渲染需要 用到HTML5的  canvas   ，那么我们在使用threejs的时候可以自己创建一个canvas，也可以使用threejs自己生成的canvas，不过为了提高代码的可读性，建议在html页面中插入 canvas（自己建议）

在 HTML 页面中插入canvas 元素

  #maincanvas{

      width;800px；

      hright:600px;

  }

<canvas id="maincanvas" ></canvas>

// 定义canvas 样式使用了ID选择器

现在我们在HTML 中定义了一个id 为maincavas的元素，下一步需要把这个元素与threejs绑定起来。

 var render = new THREE.WebGLRenderer({

  canvas:document.getElementById('mainCanvas')

})

那么想使用 threejs自己生成canvas元素时，我们就不需要在HTML中定义canvas了。只要在生成渲染器时换一种写法。

var renderer =new WebGLRenderer（）;//不需要添加canvas属性

renderer.setsize（800,600）;//     HTML页面中定义样式中宽高使用了ID选择器，这里直接使用参数定义

document.getelementbytagname('body')[0].appendchild(renderer.domelement);

其中renderer.domelement 便是threejs为我们生成的canvas

将生成的canvas添加到 body元素下。

当然  也可以添加在其他HTML元素下

首先我们先定义一个元素用来盛放canvas。

<div id="maindiv"></div>

ex：document.getelementbyid（‘maindiv’）.appendChild(rrenderer.domelement);

接下来我们为渲染器设定北京色

renderer.setCleraColor(0x000000);

到此一个完成一个渲染器。