• threejs

Document Three.js 内存泄漏是前端3D开发中高发且隐蔽的问题，其核心根源在于WebGL资源与JavaScript对象的分离管理机制：Three.js的可视化对象（如Mesh、Material、Texture）底层对应WebGL上下文的GPU资源（缓冲、纹理、着色器程序等），这些资源无法被浏览器垃圾回收（GC）自动清理，必须手动释放；同时JavaScript层面的强引用（如全局变量、事件监听器）会导致Three.js对象无法被GC回收，进一步加剧内存泄漏。 以下从核心原因、常见泄漏场景、针对性解决方案、最佳实践四个维度进行深度解析： 一、Three.js内存泄漏的核心本质 Three.js的内存管理分为两层： 层级 管理方式 泄漏风险 JavaScript对象层 由浏览器GC自动回收 强引用未清理时无法回收 WebGL资源层 由WebGL上下文持有，需手动调用dispose()释放 未调用dispose()时，GPU资源永久占用 内存泄漏的本质是：WebGL资源未手动释放，或JavaScript对象被持续强引用导致GC无法回收。 二、常见内存泄漏场景与根源分析 1. WebGL资源未手动释放（最高发场景） 场景示例 删除场景中的Mesh但未释放其依赖的Geometry和Material： // 错误：仅从场景移除Mesh，未释放…

坐标轴原点在左上角，横向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);…