three.js绕边缘旋转
2016-08-04 10:02
567 查看
dummy = new THREE.Object3D(); plane = new THREE.Mesh(new THREE.PlaneGeometry(100,100),new THREE.MeshBasicMaterial({color:0xff0000})); plane.position.set(50,0,0); dummy.add(plane); dummy.position.set(0,0,0); scene.add(dummy);
由于three.js 模型默认旋转是以坐标轴 x, y z来旋转的,所以我们通过plane.rotation.x/y/z的方法只能绕其mesh的中心轴旋转,而无法绕边缘。 在这里plane为dummy的一个child,我们在旋转dummy的时候,plane也可以旋转。dummy也是绕中心旋转,我们只要设定好plane的坐标就好了。 在这个例子中,将Plane的左边缘的x的坐标设置为dummy的x的坐标的中心。谨记:plane坐标是相对于其parent坐标来设的,当设plane坐标时,将dummy的中心坐标看成是0,0,0而不是dummy在世界坐标系中的坐标。
相关文章推荐
- three.js 绕其边缘旋转
- 【Three.js】OrbitControl 旋转
- THREE.js -- 增加Nurbs曲线旋转生成曲面,即时调整更新实例
- Three.js 保存camera(视角)设置到数据库,包括场景的缩放、旋转、移动等
- three.js旋转的3D文字canvas_geometry_text
- three.js旋转的360全景canvas_geometry_panorama
- Three.js自定义相机旋转动画:沿圆弧旋转
- Three.js 学习笔记(1)--坐标体系和旋转
- three.js实现围绕某物体旋转
- 【three.js练习程序】旋转、缩放场景
- Three.js纹理贴图正方体旋转动画效果
- 三维空间旋转和Three.JS中的实现
- three.js平面几何体之旋转
- three.js旋转的方块canvas_geometry_cube
- three.js内部实例-贴花(包含拖动、旋转、缩放)
- 【three.js练习程序】旋转物体自身
- three.js伪入门教程之旋转的九尾妖狐
- three.js入门基本知识,教你十分钟做出一个旋转的图形
- three.js旋转的场景canvas_camera_orthographic
- three.js实现的地球3D旋转效果