这个球,绕着这个红色的线圈转
代码
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.innerHeightcamera.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)moon.position.copy(point)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, 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, shininess: 5, 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)scene.add(moon)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)const points = curve.getPoints(600)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 controls.maxDistance = 100 window.addEventListener('resize', onWindowResize)
}init()
render()