threejs物体组合运动怎么设置，threejs物体组合运动方法

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

查看案例效果