mirror of
https://github.com/jiawanlong/Cesium-Examples.git
synced 2025-07-04 15:17:36 +00:00
154 lines
4.7 KiB
HTML
154 lines
4.7 KiB
HTML
<!--********************************************************************
|
||
* by jiawanlong
|
||
*********************************************************************-->
|
||
<!DOCTYPE html>
|
||
<html>
|
||
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
overflow: hidden;
|
||
}
|
||
|
||
body,
|
||
#box {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<div id="box"></div>
|
||
<script type="importmap">
|
||
{
|
||
"imports": {
|
||
"three": "./../../libs/three/build/three.module.js",
|
||
"three/addons/": "./../../libs/three/examples/jsm/"
|
||
}
|
||
}
|
||
</script>
|
||
<script src="./tween.umd.js"></script>
|
||
|
||
|
||
<script type="module">
|
||
import * as THREE from 'three'
|
||
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
|
||
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'
|
||
import { DRACOLoader } from 'three/addons/loaders/DRACOLoader.js'
|
||
|
||
const box = document.getElementById('box')
|
||
const scene = new THREE.Scene()
|
||
|
||
const camera = new THREE.PerspectiveCamera(); //相机
|
||
camera.position.set(50, 20, 100); //相机位置
|
||
camera.lookAt(150, 0, 10); //相机位置
|
||
const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true, logarithmicDepthBuffer: true })
|
||
scene.add(new THREE.AmbientLight(0xffffff, 4))
|
||
scene.add(new THREE.AxesHelper(1000))
|
||
|
||
// 加载模型 gltf/ glb
|
||
const loader = new GLTFLoader()
|
||
loader.load('./zhanji.glb', (gltf) => {
|
||
scene.add(gltf.scene)
|
||
gltf.scene.scale.set(0.005, 0.005, 0.005)
|
||
|
||
//绕x轴旋转π/4
|
||
gltf.scene.rotateY(Math.PI / 4);
|
||
|
||
new TWEEN.Tween(camera.position)
|
||
.to({ x: 0, y: 10, z: 0 }, 3000)
|
||
.start()
|
||
.onStart(function (obj) {
|
||
console.log(obj)
|
||
})
|
||
.onUpdate(function (obj) {
|
||
console.log(obj)
|
||
camera.lookAt(0, 0, 0);
|
||
})
|
||
.onComplete(function (obj) {
|
||
console.log(obj)
|
||
})
|
||
|
||
|
||
// 调用封装的函数，效果等于上面的
|
||
// createCameraTween(
|
||
// {x: 0, y: 10, z: 0},
|
||
// {x: 0, y: 0, z: 0},
|
||
// )
|
||
|
||
|
||
/*
|
||
绕模型运动
|
||
*/
|
||
// const R = 100;
|
||
// new TWEEN.Tween({ angle: 0 })
|
||
// .to({ angle: Math.PI * 2 }, 10000)
|
||
// .onUpdate(function (obj) {
|
||
// camera.position.x = R * Math.cos(obj.angle);
|
||
// camera.position.z = R * Math.sin(obj.angle);
|
||
// camera.lookAt(0, 0, 0);
|
||
// })
|
||
// .start()
|
||
|
||
|
||
})
|
||
|
||
|
||
renderer.setSize(box.clientWidth, box.clientHeight)
|
||
box.appendChild(renderer.domElement)
|
||
let controls = new OrbitControls(camera, renderer.domElement)
|
||
|
||
animate()
|
||
function animate() {
|
||
TWEEN.update();
|
||
requestAnimationFrame(animate)
|
||
renderer.render(scene, camera)
|
||
}
|
||
|
||
|
||
/*
|
||
相机动画函数，从A点飞行到B点
|
||
pos: 三维向量Vector3，表示动画结束相机位置
|
||
target: 三维向量Vector3，表示相机动画结束lookAt指向的目标观察点
|
||
*/
|
||
function createCameraTween(endPos, endTarget) {
|
||
new TWEEN.Tween({
|
||
// 不管相机此刻处于什么状态，直接读取当前的位置和目标观察点
|
||
x: camera.position.x,
|
||
y: camera.position.y,
|
||
z: camera.position.z,
|
||
tx: controls.target.x,
|
||
ty: controls.target.y,
|
||
tz: controls.target.z,
|
||
})
|
||
.to({
|
||
// 动画结束相机位置坐标
|
||
x: endPos.x,
|
||
y: endPos.y,
|
||
z: endPos.z,
|
||
// 动画结束相机指向的目标观察点
|
||
tx: endTarget.x,
|
||
ty: endTarget.y,
|
||
tz: endTarget.z,
|
||
}, 2000)
|
||
.onUpdate(function (obj) {
|
||
// 动态改变相机位置
|
||
camera.position.set(obj.x, obj.y, obj.z);
|
||
// 动态计算相机视线
|
||
// camera.lookAt(obj.tx, obj.ty, obj.tz);
|
||
controls.target.set(obj.tx, obj.ty, obj.tz);
|
||
controls.update();//内部会执行.lookAt()
|
||
})
|
||
.start();
|
||
}
|
||
|
||
|
||
</script>
|
||
|
||
</body>
|
||
|
||
</html> |