查看: 1214|回复: 0
打印 上一主题 下一主题

[WEBGL] 利用HTML5构筑物理模拟环境3.1

[复制链接]

5552

主题

2

听众

8万

积分

首席设计师

Rank: 8Rank: 8

纳金币
-1
精华
11

最佳新人 活跃会员 热心会员 灌水之王 突出贡献

跳转到指定楼层
楼主
发表于 2012-8-20 15:07:29 |只看该作者 |倒序浏览
例2的解说

和例1相比有三处新追加的地方
(1) 创建多个对象

(2) 「loop()」函数的定义和执行

(3) 追加指定物体回转角度的方法
创建多个对象

例2中通过数组来保存立方体。 Javascript 中数组可以按照
var cube = Array();这样的方式进行声明。 和C语言不一样,Javascript中定义数组对象不用指定长度。
配列名[識別子].position.set(x, y, z);「LOOP()」函数的定义和执行

「loop()」函数中通过「window.requestAnimationFrame(loop);」实现无限循环调用。 在本节开始的地方已接触过这种方式。 如果不让物体动起来,即使不断重复绘制,必然还是同样的静态的画面。 让例2中的物体回转起来。
指定物体的回转角度的方法

一般来说通过指定物体的位置和回转角度,三维空间中的物体就能展示任意的姿势。 例1中、接触过指定物体位置坐标的方法「position.set(x,y,z)」。 例2中、会同时指定物体的位置坐标和回转角度。 利用 [Mesh]类的对象的方法,让物体回转起来。
オブジェクト名.rotation.set( theta_x, theta_y, theta_z );而且、通过「theta_x」「theta_y」「theta_z」可以实现「x軸」「y軸」「z軸」各种角度的回转。 单位是弧度。
オブジェクト名.rotation.x =  theta_x;

オブジェクト名.rotation.y =  theta_y;

オブジェクト名.rotation.z =  theta_z;实现动画的时候,值的变更一定要在渲染之前进行。 另外,渲染之前不要忘记了 「renderer.clear();」。如果不执行「renderer.clear();」 , 上一帧绘制的内容就会遗留下来。
分享到: QQ好友和群QQ好友和群 腾讯微博腾讯微博 腾讯朋友腾讯朋友 微信微信
转播转播0 分享淘帖0 收藏收藏0 支持支持0 反对反对0
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

手机版|纳金网 ( 闽ICP备2021016425号-2/3

GMT+8, 2025-7-23 06:11 , Processed in 0.075682 second(s), 29 queries .

Powered by Discuz!-创意设计 X2.5

© 2008-2019 Narkii Inc.

回顶部