我们在使用threejs创建动画的时候,物体的旋转都是按照自己的几何中心轴旋转的,那么如何让一个物体绕着另一个物体旋转呢?这时候我们就可以使用物体组合运动来解决,把两个物体放进一个组里,对组进行旋转即可实现。
实现物体组合运动共分为以下几个步骤:创建组、把物体放进组里、对组进行定位、场景添加组、给组添加动画
下面是物体组合运动的案例:
import * as THREE from 'three' import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls'//导入鼠标交互 const w =window.innerWidth const h =window.innerHeight //Scene(场景) const scene=new THREE.Scene() //坐标轴 const axes = new THREE.AxesHelper(2,2,2) scene.add(axes) //创建物体组合 const group = new THREE.Group() const groupAll = new THREE.Group() //创建球体,并将球体放入合适的组里 const geometry = new THREE.SphereGeometry(1) const material = new THREE.MeshBasicMaterial({color:0xffff00})//基础网格材质 const ball1=new THREE.Mesh(geometry,material) groupAll.add(ball1)//把太阳放在组groupAll中 //地球 const geometry1 = new THREE.SphereGeometry(0.2) const material1 = new THREE.MeshNormalMaterial()//法线网格材质 const ball2=new THREE.Mesh(geometry1,material1) group.add(ball2)//把地球放进组group中 group.position.y=2//给组group定位 //月球 const geometry2 = new THREE.SphereGeometry(0.05) const material2 = new THREE.MeshBasicMaterial({color:0x666666})//基础网格材质 const ball3=new THREE.Mesh(geometry2,material2) group.add(ball3)//把月球放进组group中 ball3.position.y=0.4//给月球定位 groupAll.add(group) //场景添加group scene.add(groupAll) //创建光线 const light = new THREE.AmbientLight() //把光线放入场景 scene.add(light) //创建一个相机 const camera=new THREE.PerspectiveCamera(75,w/h,0.1,100) //75是能看到的角度范围 camera.position.set(0,0,5) camera.lookAt(0,0,0) //创建渲染器 const renderer=new THREE.WebGLRenderer() renderer.setSize(w,h) document.body.append(renderer.domElement) const orbitControls = new OrbitControls(camera,renderer.domElement)//添加鼠标交互需要传入相机和canvas参数 //动画 const clock=new THREE.Clock() tick() function tick(){ const time=clock.getElapsedTime() // cube1.rotation.z=time // cube.rotation.z=time // cube2.rotation.z=time //给组创建动画 group.rotation.z=time*4 groupAll.rotation.z=time requestAnimationFrame(tick) renderer.render(scene,camera) orbitControls.update()//更新鼠标交互 }