利用HTML5构筑物理模拟环境2.21

奔跑的小兔

例１的解说
使用Three.js 绘制的步骤参照如下
０．画布的准备

１．Three.js 的初期化（initThree()）

２．相机的准备（initCamera()）

３．场景的准备（initScene()）

４．光源的准备（initLight()）

５．物体的装备（initObject()）

６．执行绘制（threeStart()）

０．画布(CANVAS)的准备

准备和画布框大小一致的领域用于WebGL绘制。 具体来说、

(1) body 标签中添加 id 为「canvas-frame」的 div 元素。

(2) style 标签中指定 「canvas-frame」的CSS样式。
BODY 元素中追加 DIV 标签

<div id="canvas-frame"></div>STYLE 元素中追加 CSS样式

通过【元素#ID名】的CSS选择器方式，为【canvas-frame】元素指定如下属性。

(1) 隐藏框线

(2) 鼠标光标设置为【pointer】

(3) 宽度设置为600px

(4) 高度设置为600px

(5) 背景设置为「#EEEEEE」
<style type="text/css">

div#canvas-frame{

  border: none;      //(1)

  cursor: pointer;   //(2)

  width: 600px;      //(3)

  height: 600px;     //(4)

  background-color: #EEEEEE; //(5)

}

</style>１．设置渲染器

三维空间里的物体映射到二维平面的过程被称为三维渲染。 一般来说我们都把进行渲染操作的软件叫做渲染器。 具体来说要进行下面这些处理。
(0) 声明全局变量（对象）

(1) 获取画布「canvas-frame」的高宽

(2) 生成渲染器对象（属性：抗锯齿效果为设置有效）

(3) 指定渲染器的高宽（和画布框大小一致）

(4) 追加 【canvas】 元素到 【canvas-frame】 元素中。

(5) 设置渲染器的清除色(clearColor)
var width, height;                                                           //(0)

var renderer;                                                                //(0)

function initThree() {

  width = document.getElementById('canvas-frame').clientWidth;               //(1)

  height = document.getElementById('canvas-frame').clientHeight;             //(1)

  renderer = new THREE.WebGLRenderer({antialias: ***e});                     //(2)

  renderer.setSize(width, height);                                           //(3)

  document.getElementById('canvas-frame').appendChild(renderer.domElement);  //(4)

  renderer.setClearColorHex(0xFFFFFF, 1.0);                                  //(5)

}