我们在使用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()//更新鼠标交互
}