使用最简最优的代码实现 Three.js 点击地面人物走向目标地点的第三人称动画效果 依赖 gltf gsap
200多个Three.js Cesium.js 原生案例 开源仓库地址
github.com/z2586300277…
three.js 编辑器，动画，着色器， cesium 热力图，聚合点位，大量点线面， 图层，主题，文字，等众多案例中心
Three.js 基础和标准功能学习
模型加载 - 使用three.js加载不同格式的模型。
轮廓光 后期处理得各种效果。
几十款着色器 如 智慧城市扫光, 结合各种shaderToy.等
粒子，各种应用场景效果案例。
还有小米 su7, 等优美的高级案例， 还有比较火得3d 地图学习。
集成 各种相关得应用工具合集。
预览地址：z2586300277.github.io/three-cesiu…
国内站点预览：threehub.cn
github地址: github.com/z2586300277…
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
import gsap from 'gsap'
const box = document.getElementById('box')
const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(75, box.clientWidth / box.clientHeight, 0.1, 1000)
camera.position.set(5, 5, 5)
const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true, logarithmicDepthBuffer: true })
renderer.setSize(box.clientWidth, box.clientHeight)
box.appendChild(renderer.domElement)
const controls = new OrbitControls(camera, renderer.domElement)
scene.add(new THREE.AmbientLight(0xffffff, 4), new THREE.GridHelper(40, 20))
animate()
function animate() {
requestAnimationFrame(animate)
renderer.render(scene, camera)
}
let group = null
new GLTFLoader().load(`https://file.threehub.cn/` + 'files/model/Soldier.glb',
gltf => {
group = gltf.scene
scene.add(group)
const clock = new THREE.Clock() // 时钟
const mixer = new THREE.AnimationMixer(group) // 模型动画
group.mixerAnimateRender = () => mixer.update(clock.getDelta()) // 动画帧
group.currentAction = mixer.clipAction(gltf.animations[3]) // walk 动画
}
)
const raycaster = new THREE.Raycaster() // 射线
const targetPositon = new THREE.Vector3() // 目标位置
const plane = new THREE.Plane(new THREE.Vector3(0, 1, 0), 0) // 碰撞面
// 点击事件
box.addEventListener('click', (event) => {
const mouse = new THREE.Vector2((event.offsetX / event.target.clientWidth) * 2 - 1, -(event.offsetY / event.target.clientHeight) * 2 + 1)
raycaster.setFromCamera(mouse, camera)
raycaster.ray.intersectPlane(plane, targetPositon)
const mesh = new THREE.Mesh(new THREE.BoxGeometry(0.1, 0.1, 0.1), new THREE.MeshBasicMaterial())
mesh.position.copy(targetPositon)
scene.add(mesh)
goAddress(group, targetPositon)
})
let oldgsap = null
function goAddress(group, targetPositon) {
oldgsap?.kill() // 停止上一个动画
const distance = group.position.distanceTo(targetPositon) // 距离
const vector = camera.position.clone().sub(group.position) // camera 和 group 差向量
group.lookAt(targetPositon) // 模型朝向
group.rotation.y += Math.PI // 朝向纠正
const duration = distance / 3 // 距离 / 速度
oldgsap = gsap.to(group.position, {
...targetPositon, duration, ease: "none",
onStart: () => {
controls.enabled = false // 禁止控制
group.currentAction.play() // 播放动画
},
onUpdate: () => {
group.mixerAnimateRender() // 动画帧
controls.target.copy(group.position) // 目标跟随
camera.position.lerp(group.position.clone().add(vector), 0.1) // 相机跟随
},
onComplete: () => controls.enabled = true // 恢复控制
})
}
/**
* 名称: 点击第三人称移动
* 作者: 优雅永不过时 https://github.com/z2586300277
*/
