three.js核心要素讲解

论坛 期权论坛 编程之家     
选择匿名的用户   2021-6-1 11:53   769   0

1,创建场景对象:var scene = new THREE.Scene();

2,创建几何体:var geometry = new THREE.BoxGeometry(100, 100, 100);注:有多种几何体的创建函数,也可以通过自定义的几何体加入到场景中,通过BufferGeometryBufferAttribute实现,具体的实现参考官方文档。

3,创建材质:var material = new THREE.MeshLambertMaterial({ color: 0x0000ff });

4,创建网格模型对象:var mesh = new THREE.Mesh(geometry, material); 注:mesh函数两个参数是几何体对象和材质对象,如此就很好记忆了。

5,网格模型对象加入到场景:scene.add(mesh); 注:这样就很清楚了,创建场景,创建几何体和材质,然后根据几何体和材质创建网格模型对象,最后加入到场景就完成了一个模型的基本装配。

6,点光源和环境光的设置:

7,相机设置:

8,创建渲染器并且执行渲染:代码把canvas插入到body中的,加入是要插入到div中修改dom节点再append就可以了。

9,监听鼠标事件:如果定义的旋转动画下面那行监听事件的代码要删掉。

10,旋转动画:

分享到 :
0 人收藏
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

积分:3875789
帖子:775174
精华:0
期权论坛 期权论坛
发布
内容

下载期权论坛手机APP