纳金网

标题: 利用HTML5构筑物理模拟环境2.21 [打印本页]

作者: 奔跑的小兔 时间: 2012-8-17 15:03
标题: 利用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)

}

欢迎光临纳金网 (http://go.narkii.com/club/)