1.引入依赖
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'//引入相机轨道控制器
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'//引入GLTF模型加载器
import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js';//大模型解压加载器(draco解析器)
import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader.js"//加载hdr文件作为环境贴图
2.创建场景
const scene = new THREE.Scene()
// 在场景中添加坐标辅助器
const axesHelper = new THREE.AxesHelper(10)//数据表示坐标轴的长度
scene.add(axesHelper)//将坐标轴添加到场景中
3.创建透视相机
const camera = new THREE.PerspectiveCamera(
45,//视角,可视范围
window.innerWidth / window.innerHeight,//摄像机的宽高比
0.1,//摄像机最近能看到的距离
1000//摄像机最远能看到的距离
)
// 设置相机的位置
camera.position.x = 8
camera.position.y = 8
camera.position.z = 8
camera.lookAt(0, 0, 0)//摄像机的朝向
4.创建渲染器
const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)//渲染器的尺寸大小
document.body.appendChild(renderer.domElement)//renderer.domElement就是canvas元素
5.添加相机轨道控制器
// 添加相机轨道控制器
const controls = new OrbitControls(camera, renderer.domElement)
controls.enableDamping = true //打开惯性阻尼
controls.dampingFactor = 0.05//阻尼系数
controls.autoRotate = false//是否自动旋转(围绕着lookAt的坐标旋转)
6.开始渲染
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight//重置相机的宽高比
camera.updateProjectionMatrix()//更新相机的投影矩阵
renderer.setSize(window.innerWidth, window.innerHeight)//重置渲染器的宽高比
})
function animate() {
TWEEN.update()//更新补间动画
controls.update()
renderer.render(scene, camera)//渲染=相机+场景
requestAnimationFrame(animate)//下一帧继续调用渲染函数
}
animate()
于是得到这样的一个画面
7.创建几何体
// 创建一个球体
const ball = new THREE.SphereGeometry(5, 32, 16);
let textureLoader = new THREE.TextureLoader()//创建纹理加载器
let texture = textureLoader.load('./img/Earth.png')//加载纹理图片
texture.colorSpace = THREE.SRGBColorSpace//添加颜色深度
//创建材质
const material = new THREE.MeshBasicMaterial({
map: texture
});
const cube_ball = new THREE.Mesh(ball, material);//创建网格
cube_ball.position.x = -10//设置几何体的位置
scene.add(cube_ball);
得到如下场景
8.添加补间动画
const tween = new TWEEN.Tween(cube_ball.position)//将物体的起始位置传入tween
//第一个参数:到达的位置;第二个参数:所花的时间,链式调用onUpdate
tween.to({ x: 10 }, 2000).onUpdate(() => {
console.log(cube_ball.position.x, 99999);
})
// tween.repeat(Infinity)//重复次数,infinity表示循环,直接写数字表示循环的次数
// tween.yoyo(true)//循环往复运动
// tween.delay(0)//延迟,补间动画延迟一秒钟运行
tween.easing(TWEEN.Easing.Quadratic.InOut) //设置缓动函数
let tween2 = new TWEEN.Tween(cube_ball.position)//设置第二段动画
tween2.to({ x: -10 }, 2000).onUpdate(() => {
})
//第一段从x:-10移动到x:10
//第二段从x:10移动到x:-10
tween.chain(tween2)//第一段动画完成后链接第二段动画
tween2.chain(tween)//第二段动画完成后链接第一段动画
tween.start()//启动补间动画
9.tween的回调函数
tween.onStart(() => { })//动画开始的时候的回调
tween.onComplete(()=>{})// 完成的时候的回调
tween.stop(()=>{})// 停止的时候的回调
tween.onUpdate(()=>{})// 更新时的回调
