3.js - 运动曲线

这个球，绕着这个红色的线圈转

代码

import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'let scene,camera,renderer,controls = nulllet moon,earth = null// 根据，一系列的点，创建曲线
let curveconst textureLoader = new THREE.TextureLoader()const clock = new THREE.Clock()const onWindowResize = () => {// 重置相机的宽高比camera.aspect = window.innerWidth / window.innerHeight// 更新相机的投影矩阵camera.updateProjectionMatrix()// 重置渲染器的宽高比renderer.setSize(window.innerWidth, window.innerHeight)// 更新渲染器的像素比renderer.setPixelRatio(window.devicePixelRatio)
}const render = () => {requestAnimationFrame(render)const elapsed = clock.getElapsedTime()let time = (elapsed /10) % 1const point = curve.getPoint(time)// console.log('point=', point) // Vector3 {x: -10, y: 0, z: 10}// 情况一，moon绕着地球转// moon.position.set(Math.sin(elapsed) * 5, 0, Math.cos(elapsed) * 5)// 情况二，moon绕着咱画的线转moon.position.copy(point)// camera.position.copy(point)// camera.lookAt(earth.position)renderer.render(scene, camera)
}const init = () => {const EARTH_RADIUS = 1const MOON_RADIUS = 0.27scene = new THREE.Scene()camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 200)// camera.position.set(0, 0, 3)camera.position.set(0, 5, -10)scene.add(camera)const directionLight = new THREE.DirectionalLight(0xffffff) // 平行光directionLight.position.set(0, 0, 1)scene.add(directionLight)const light = new THREE.AmbientLight(0xffffff, 0.5) // 环境光scene.add(light)// 添加地球const earthGeometry = new THREE.SphereGeometry(EARTH_RADIUS, 16, 16)const earthMaterial = new THREE.MeshPhongMaterial({map: textureLoader.load('../public/assets/texture/planets/earth_atmos_2048.jpg'),specularMap: textureLoader.load('../public/assets/texture/planets/earth_specular_2048.jpg'),specular: 0x333333, // 高光部分的颜色，默认值：0x111111（深灰色）shininess: 5, // 高光反射效果的锐利程度，该值越大，高光区域越小且更亮。默认值为30。normalMap: textureLoader.load('../public/assets/texture/planets/earth_normal_2048.jpg'),normalScale: new THREE.Vector2(0.85, 0.85)})earth = new THREE.Mesh(earthGeometry, earthMaterial)scene.add(earth)// 添加月球const moonGeometry = new THREE.SphereGeometry(MOON_RADIUS, 16, 16)const moonMaterial = new THREE.MeshPhongMaterial({map: textureLoader.load('../public/assets/texture/planets/moon_1024.jpg'),shininess: 5})moon = new THREE.Mesh(moonGeometry, moonMaterial)// moon.position.x = 3scene.add(moon)//-------------------------------------------------------------------------------// 根据，一系列的点，创建曲线【参数true：表示曲线是封闭的】curve = new THREE.CatmullRomCurve3([new THREE.Vector3(-10, 0, 10), new THREE.Vector3(-5, 5, 5), new THREE.Vector3(0, 0, 5), new THREE.Vector3(5, -5, 5), new THREE.Vector3(10, 0, 10)], true)// 在曲线里，使用`getPoints()`，获取51个点const points = curve.getPoints(600)// console.log('points=', points) // 一个，包含600个Vector3元素的数组const geometry = new THREE.BufferGeometry().setFromPoints(points)const material = new THREE.LineBasicMaterial({ color: 0xff0000 })const curveObject = new THREE.Line(geometry, material)scene.add(curveObject)//-------------------------------------------------------------------------------renderer = new THREE.WebGLRenderer()renderer.setSize(window.innerWidth, window.innerHeight)document.body.appendChild(renderer.domElement)controls = new OrbitControls(camera, renderer.domElement)controls.minDistance = 5 // 相机可以离目标对象的最小距离为5个单位（意味着，用户无法将相机拉得太近）controls.maxDistance = 100 // 相机可以离目标对象的最大距离为100个单位（意味着，限制了用户可以将相机拉远的最大距离）window.addEventListener('resize', onWindowResize)
}init()
render()