• threejs

坐标轴原点在左上角，横向x，纵向y。 zoom最低为3，x范围[0-7]，y范围[0-7]，每放大一级乘以2。 zoom x y 3 0-7 0-7 4 0-15 0-15 5 0-31 0-31 6 0-63 0-63 7 0-127 0-127 8 0-255 0-255 9 0-511 0-511 10 0-1024 0-1024 11 0-2047 0-2047 12 0-4095 0-4095

1.terrain-rgb https://docs.mapbox.com/data/tilesets/reference/mapbox-terrain-rgb-v1/

<script src="Tween.js"></script> / 立方体网格模型 var mesh = new THREE.Mesh(…); … // twwen代码设置 var rota = ({ x: 0 }); var ro1 = new TWEEN.Tween(rota); ro1.to({ x: 1 }, 4000); ro1.easing(TWEEN.Easing.Sinusoidal.InOut); ro1.onUpdate(function() { mesh.rotation.y = this.x * 2 * Math.PI; console.log(‘onUpdate里面的函数执行一次’) }); var ro2 = new TWEEN.Tween(rota); ro2.to({ x: 0 }, 4000); ro2.easing(TWEEN.Easing.Sinusoidal.InOut); ro2.onUpdate(function() { mesh.rotation.y = this.x * 2 * Math.PI; }); ro1.chain(ro2); ro2.chain(ro1); ro1.start(); // 渲染函数中执行TWEEN的update()方…

1.确保加载模型后模型有animations属性。 2.加载完模型后，在模型中定义mixer的变量值。 const loader = new GLTFLoader(); loader.load("./model/gltf/RobotExpressive/RobotExpressive.glb", function (gltf) { // 赋值动画给mixer mixer = new THREE.AnimationMixer(gltf.scene); mixer.clipAction(gltf.animations[9]).play(); scene.add(gltf.scene); }); 3.定义时间间隔，直接初始化就行 clock = new THREE.Clock(); 4.在重复渲染函数中加入以下代码，第2行到第5行 function animate () { if (mixer) { const delta = clock.getDelta(); mixer.update(delta); } renderer.render(scene, camera); robotRef.value.appendChild(renderer.domElement); requestAnimationFrame(animate);…