这个球,绕着这个红色的线圈转
代码
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
let scene,
camera,
renderer,
controls = null
let moon,
earth = null
// 根据,一系列的点,创建曲线
let curve
const 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) % 1
const 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 = 1
const MOON_RADIUS = 0.27
scene = 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 = 3
scene.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()
本站资源均来自互联网,仅供研究学习,禁止违法使用和商用,产生法律纠纷本站概不负责!如果侵犯了您的权益请与我们联系!
转载请注明出处: 免费源码网-免费的源码资源网站 » 3.js - 运动曲线
发表评论 取消回复