three.js自定义几何体,世界坐标系,本地坐标系

Three,js

1.Three.js的基本概念和三大组件.

       这篇介绍的非常详细:

       http://www.hewebgl.com/article/getarticle/50

2.自定义几何体的注意事项:

       THREE.Geometry是所有几何体的基类.构造函数如下:

       例:构造一个十面双锥体,并指定纹理定标

需要注意的是, 定义每个三角形面时,必须为同为顺时针或同为逆时针.否则会出现怪异现象

若需要为自定义几何体贴图,需要对每个面指定uv坐标(对应图片上的坐标)

       

vargeometry = new THREE.Geometry()

   var theta=Math.PI*0.2

   var c=Math.cos.bind(Math)

   var s=Math.sin.bind(Math)

       //定义每个顶点

   geometry.vertices.push(

       new THREE.Vector3(radius*c(theta), radius*s(theta), 0),

       new THREE.Vector3(radius*c(3*theta), radius*s(3*theta), 0),

       new THREE.Vector3(radius*c(5*theta), radius*s(5*theta), 0),

       new THREE.Vector3(radius*c(7*theta), radius*s(7*theta), 0),

       new THREE.Vector3(radius*c(9*theta), radius*s(9*theta), 0),

       new THREE.Vector3(0, 0, height),

       new THREE.Vector3(0, 0, -height)

)

//定义每个三角面

   geometry.faces.push(

       new THREE.Face3(5, 0, 4),

       new THREE.Face3(5, 4, 3),

       new THREE.Face3(5, 3, 2),

       new THREE.Face3(5, 2, 1),

       new THREE.Face3(5, 1, 0),

 

       new THREE.Face3(6, 4, 0),

       new THREE.Face3(6, 3, 4),

       new THREE.Face3(6, 2, 3),

       new THREE.Face3(6, 1, 2),

       new THREE.Face3(6, 0, 1)

)

//定义每个面的uv坐标系

var uvs=[]

    for(var i=0;i<5;i++){

        uvs.push(

            new THREE.Vector2(

                (1+c(2*i*theta+theta))/2,  (1+s(2*i*theta+theta))/2 

            )

        )

    }

    uvs.push(new THREE.Vector2(0.5,0.5))

    uvs.push(new THREE.Vector2(0.5,0.5))

 

   geometry.faceVertexUvs[0].push([uvs[5],uvs[0],uvs[4]])

   geometry.faceVertexUvs[0].push([uvs[5],uvs[4],uvs[3]])

   geometry.faceVertexUvs[0].push([uvs[5],uvs[3],uvs[2]])

   geometry.faceVertexUvs[0].push([uvs[5],uvs[2],uvs[1]])

   geometry.faceVertexUvs[0].push([uvs[5],uvs[1],uvs[0]])

 

   geometry.faceVertexUvs[0].push([uvs[6],uvs[4],uvs[0]])

   geometry.faceVertexUvs[0].push([uvs[6],uvs[3],uvs[4]])

    geometry.faceVertexUvs[0].push([uvs[6],uvs[2],uvs[3]])

   geometry.faceVertexUvs[0].push([uvs[6],uvs[1],uvs[2]])

   geometry.faceVertexUvs[0].push([uvs[6],uvs[0],uvs[1]])

       //官方指南要加这个

       geometry.computeBoundingSphere();

3.运动的有序性

       在three.js中,物体只有三种运动:旋转,平移,缩放.

但是three.js只会依照先缩放,再旋转,再平移来操作物体.不会因为指令的顺序来执行.

且相对的坐标都是世界坐标系.

       比如:

       Mesh.position.x+=1;Mesh.rotation.x+=1

       等效于:

       Mesh.rotation.x+=1;Mesh.position.x+=1;

4.有父子关系的子物体的运动参考坐标系是什么?

       物体的运动参考坐标系永远是世界坐标系.

       比如:

       ParentMesh.add(ChildMesh)

       ChildMesh的最终位置如何确定?

       Three.js这样来处理:

首先:ChildMesh相对世界坐标系,依次执行自己的缩放,旋转,平移

然后:ChildMesh相对世界坐标系,依次执行ParentMesh的缩放,旋转,平移

若有多个父子关系,以此类推

例子:

ParentMesh.position.x+=1

ParentMesh.rotation.x+=0.1

ChildMesh.position.y+=5

ChildMesh.rotation.z+=0.5

//ChildMesh会以世界坐标系为参考,依次这样运动:

ChildMesh.rotation.z+=0.5

ChildMesh.position.y+=5

ChildMesh.rotation.x+=0.1

ChildMesh.position.x+=1

5.一些以插件形式存在的库

(1) TrackballControls.js.鼠标控制实现自由旋转,缩放场景

你可以在three.js仓库下的examples/js/controls/下找到它.

使用方式很简单:

var mouse = new THREE.TrackballControls(global.camera);

function animate() {

   requestAnimationFrame(animate);

   mouse.update()

   global.renderer.render(global.scene, global.camera);

};

(2)显示帧数的库

(3)显示一个输入框,可以根据输入来实时改变项目的一些参数的库