Vue 3 中集成 Three.js 场景的完整实践指南

本文详解如何在 vue 3javascript 版本项目中正确集成 three.js 基础场景涵盖 dom 挂载、生命周期协调、渲染循环管理及常见陷阱规避。 本文详解如何在 vue 3javascript 版本项目中正确集成 three.js 基础场景涵盖 dom 挂载、生命周期协调、渲染循环管理及常见陷阱规避。在 Vue 3 的响应式架构下直接嵌入 Three.js 渲染逻辑需特别注意 DOM 元素可用性、渲染器生命周期与 Vue 组件生命周期的协同。原生 Three.js 示例依赖 document.body.appendChild()但在 Vue 单文件组件SFC中必须通过 ref 获取真实 DOM 节点并在 onMounted 钩子中安全挂载渲染器——这是避免 Cannot read property appendChild of null 等错误的关键。以下是一个可直接运行的 App.vue 完整实现使用 JavaScript非 TypeScriptscript setupimport { ref, onMounted, onUnmounted } from vue;import * as THREE from three;// 创建 DOM 引用容器const target ref();// 初始化 Three.js 核心对象const scene new THREE.Scene();const camera new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000);const renderer new THREE.WebGLRenderer({ antialias: true });renderer.setSize(500, 500); // 推荐显式设置尺寸避免默认拉伸renderer.setPixelRatio(window.devicePixelRatio); // 提升高 DPI 屏幕显示质量// 创建绿色立方体const geometry new THREE.BoxGeometry(1, 1, 1);const material new THREE.MeshBasicMaterial({ color: 0x00ff00 });const cube new THREE.Mesh(geometry, material);scene.add(cube);camera.position.z 5;// 动画循环函数闭包内维持引用避免重复创建let animationId null;function animate() { animationId requestAnimationFrame(animate); cube.rotation.x 0.01; cube.rotation.y 0.01; renderer.render(scene, camera);}// 组件挂载后挂载渲染器 DOM 并启动动画onMounted(() { if (target.value) { target.value.appendChild(renderer.domElement); animate(); }});// 【重要】组件卸载前清理资源防止内存泄漏onUnmounted(() { if (animationId) { cancelAnimationFrame(animationId); } if (renderer.domElement renderer.domElement.parentNode) { renderer.domElement.parentNode.removeChild(renderer.domElement); } renderer.dispose(); // 释放 WebGL 资源});/scripttemplate div reftarget classthree-container/div/templatestyle scoped.three-container { width: 500px; height: 500px; margin: 2rem auto; border: 1px solid #eee;}/style? 关键要点说明 ref onMounted 是黄金组合确保 renderer.domElement 只在真实 DOM 节点就绪后才插入 显式 setSize() 优于 renderer.setSize(window.innerWidth, ...)避免因响应式容器尺寸变化导致渲染异常推荐结合 CSS 控制容器宽高Three.js 渲染器按需适配 务必调用 renderer.dispose() 和 cancelAnimationFrameVue 组件可能被复用或销毁未清理的动画帧和 WebGL 上下文将引发内存泄漏 添加 antialias: true 和 setPixelRatio显著提升视觉质量尤其在 Retina 屏幕上 避免在 setup() 顶层执行渲染逻辑Three.js 对象如 scene, camera可定义在顶层但 DOM 操作与动画启动必须延迟至 onMounted。? 进阶提示如需响应窗口缩放可监听 window.resize 事件并更新 camera.aspect 与 renderer.setSize()但需注意防抖以避免高频重绘。 Zeemo AI 一款专业的视频字幕制作和视频处理工具