1. 为什么你需要一个3D场景编辑器最近几年Web 3D技术发展迅猛Three.js作为最流行的WebGL框架之一让在浏览器中创建3D内容变得前所未有的简单。但很多开发者都会遇到一个痛点每次修改3D场景都需要重新写代码调试起来非常麻烦。这就是为什么我们需要一个可视化的3D场景编辑器。我在去年开发公司项目时就深有体会。当时需要频繁调整场景中的物体位置、材质参数每次都要改代码然后刷新页面效率极低。后来我花了两个周末时间用Three.js自己撸了一个简易的场景编辑器工作效率直接提升了300%。现在我可以实时调整参数所见即所得再也不用反复修改代码了。2. 搭建基础编辑器框架2.1 初始化Three.js场景首先我们需要创建一个基础的Three.js场景。这里我推荐使用Vite作为构建工具它能提供极快的开发体验。import * as THREE from three; import { OrbitControls } from three/examples/jsm/controls/OrbitControls; // 初始化场景 const scene new THREE.Scene(); scene.background new THREE.Color(0xf0f0f0); // 设置相机 const camera new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.set(0, 5, 10); // 添加渲染器 const renderer new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // 添加轨道控制器 const controls new OrbitControls(camera, renderer.domElement); controls.enableDamping true; // 添加基础光源 const ambientLight new THREE.AmbientLight(0x404040); scene.add(ambientLight); const directionalLight new THREE.DirectionalLight(0xffffff, 0.5); directionalLight.position.set(1, 1, 1); scene.add(directionalLight); // 添加坐标轴辅助 const axesHelper new THREE.AxesHelper(5); scene.add(axesHelper); // 渲染循环 function animate() { requestAnimationFrame(animate); controls.update(); renderer.render(scene, camera); } animate();2.2 创建编辑器UI界面接下来我们需要创建一个简单的UI界面。我选择了使用HTMLCSS来构建这样最轻量也最容易定制。div classeditor-container div classscene-container idscene-container/div div classcontrol-panel div classscene-tree idscene-tree/div div classproperty-editor idproperty-editor/div /div /div对应的CSS样式.editor-container { display: flex; height: 100vh; width: 100vw; } .scene-container { flex: 1; } .control-panel { width: 300px; background: #fff; border-left: 1px solid #ddd; display: flex; flex-direction: column; } .scene-tree { height: 50%; overflow: auto; border-bottom: 1px solid #ddd; } .property-editor { height: 50%; overflow: auto; }3. 实现核心编辑器功能3.1 场景树管理场景树是编辑器的核心功能之一它让我们可以清晰地看到场景中所有物体的层级关系。我使用了一个轻量级的树形组件库来实现这个功能。class SceneTreeManager { constructor(scene, container) { this.scene scene; this.container container; this.selectedObject null; this.init(); } init() { this.renderTree(); this.setupEvents(); } renderTree() { // 清空容器 this.container.innerHTML ; // 递归渲染场景树 const renderNode (object, parentElement) { const node document.createElement(div); node.className tree-node; node.textContent object.name || object.type; node.dataset.uuid object.uuid; if (object.children.length 0) { const childrenContainer document.createElement(div); childrenContainer.className tree-children; node.appendChild(childrenContainer); object.children.forEach(child { renderNode(child, childrenContainer); }); } parentElement.appendChild(node); }; renderNode(this.scene, this.container); } setupEvents() { this.container.addEventListener(click, (e) { const node e.target.closest(.tree-node); if (node) { const uuid node.dataset.uuid; this.selectedObject this.findObjectByUuid(this.scene, uuid); this.onSelectionChange(this.selectedObject); } }); } findObjectByUuid(object, uuid) { if (object.uuid uuid) return object; for (let i 0; i object.children.length; i) { const found this.findObjectByUuid(object.children[i], uuid); if (found) return found; } return null; } onSelectionChange(object) { // 触发属性编辑器更新 console.log(Selected:, object); } }3.2 属性编辑器实现属性编辑器需要能够动态显示和修改选中物体的各种属性。这里我实现了一个通用的属性编辑器可以自动识别Three.js对象的属性类型。class PropertyEditor { constructor(container) { this.container container; this.currentObject null; } update(object) { this.currentObject object; this.container.innerHTML ; if (!object) { this.container.innerHTML div classno-selection请选择场景中的物体/div; return; } // 创建属性表单 const form document.createElement(div); form.className property-form; // 添加名称编辑 this.addPropertyField(form, name, 名称, text); // 根据对象类型添加特定属性 if (object instanceof THREE.Mesh) { this.addMeshProperties(form, object); } else if (object instanceof THREE.Light) { this.addLightProperties(form, object); } // 添加位置、旋转、缩放编辑 this.addVector3Property(form, position, 位置); this.addVector3Property(form, rotation, 旋转); this.addVector3Property(form, scale, 缩放); this.container.appendChild(form); } addPropertyField(form, property, label, type text) { const field document.createElement(div); field.className property-field; const labelElement document.createElement(label); labelElement.textContent label; const input document.createElement(input); input.type type; input.value this.currentObject[property]; input.addEventListener(change, (e) { this.currentObject[property] type number ? parseFloat(e.target.value) : e.target.value; }); field.appendChild(labelElement); field.appendChild(input); form.appendChild(field); } addMeshProperties(form, mesh) { this.addPropertyField(form, visible, 可见, checkbox); this.addPropertyField(form, castShadow, 投射阴影, checkbox); this.addPropertyField(form, receiveShadow, 接收阴影, checkbox); // 材质属性 if (mesh.material) { const materialHeader document.createElement(h4); materialHeader.textContent 材质属性; form.appendChild(materialHeader); this.addColorProperty(form, material.color, 颜色, mesh.material.color); this.addPropertyField(form, material.opacity, 透明度, range, 0, 1, 0.01); this.addPropertyField(form, material.transparent, 透明, checkbox); this.addPropertyField(form, material.wireframe, 线框模式, checkbox); } } addColorProperty(form, propertyPath, label, color) { const field document.createElement(div); field.className property-field; const labelElement document.createElement(label); labelElement.textContent label; const input document.createElement(input); input.type color; input.value #${color.getHexString()}; input.addEventListener(change, (e) { const target this.resolvePropertyPath(propertyPath); target.set(e.target.value); }); field.appendChild(labelElement); field.appendChild(input); form.appendChild(field); } resolvePropertyPath(path) { const parts path.split(.); let obj this.currentObject; for (let i 0; i parts.length - 1; i) { obj obj[parts[i]]; } return obj[parts[parts.length - 1]]; } }4. 高级功能实现4.1 后处理效果集成后处理可以为场景添加各种炫酷的效果。Three.js提供了后处理库我们可以很容易地集成到编辑器中。import { EffectComposer } from three/examples/jsm/postprocessing/EffectComposer; import { RenderPass } from three/examples/jsm/postprocessing/RenderPass; import { ShaderPass } from three/examples/jsm/postprocessing/ShaderPass; import { FXAAShader } from three/examples/jsm/shaders/FXAAShader; class PostProcessingManager { constructor(renderer, scene, camera) { this.renderer renderer; this.scene scene; this.camera camera; this.composer null; this.effects {}; this.init(); } init() { // 创建效果组合器 this.composer new EffectComposer(this.renderer); // 添加基础渲染通道 const renderPass new RenderPass(this.scene, this.camera); this.composer.addPass(renderPass); // 添加FXAA抗锯齿 this.addEffect(fxaa, new ShaderPass(FXAAShader)); // 修改渲染循环 this.originalAnimate animate; animate () { requestAnimationFrame(animate); controls.update(); this.composer.render(); }; } addEffect(name, pass) { this.effects[name] pass; this.composer.addPass(pass); return pass; } removeEffect(name) { const pass this.effects[name]; if (pass) { this.composer.removePass(pass); delete this.effects[name]; } } }4.2 场景标注绘制场景标注是3D编辑器的一个重要功能可以让用户在场景中添加注释、标记重要位置等。class AnnotationManager { constructor(scene, camera, renderer) { this.scene scene; this.camera camera; this.renderer renderer; this.annotations []; this.init(); } init() { // 创建标注容器 this.annotationContainer document.createElement(div); this.annotationContainer.className annotation-container; document.body.appendChild(this.annotationContainer); // 监听点击事件添加新标注 this.renderer.domElement.addEventListener(click, (e) { if (e.ctrlKey) { // 按住Ctrl键点击添加标注 this.addAnnotation(e.clientX, e.clientY); } }); // 每帧更新标注位置 this.originalAnimate animate; animate () { this.originalAnimate(); this.updateAnnotations(); }; } addAnnotation(x, y) { // 将屏幕坐标转换为3D空间坐标 const mouse new THREE.Vector2( (x / window.innerWidth) * 2 - 1, -(y / window.innerHeight) * 2 1 ); const raycaster new THREE.Raycaster(); raycaster.setFromCamera(mouse, this.camera); const intersects raycaster.intersectObjects(this.scene.children, true); if (intersects.length 0) { const point intersects[0].point; // 创建3D标注点 const marker new THREE.Mesh( new THREE.SphereGeometry(0.1, 16, 16), new THREE.MeshBasicMaterial({ color: 0xff0000 }) ); marker.position.copy(point); this.scene.add(marker); // 创建2D标注标签 const annotation document.createElement(div); annotation.className annotation; annotation.textContent prompt(请输入标注内容) || 新标注; this.annotationContainer.appendChild(annotation); this.annotations.push({ marker, element: annotation, position: point }); } } updateAnnotations() { this.annotations.forEach(anno { // 将3D坐标转换为屏幕坐标 const vector anno.position.clone().project(this.camera); vector.x (vector.x 1) / 2 * window.innerWidth; vector.y -(vector.y - 1) / 2 * window.innerHeight; // 更新标注元素位置 anno.element.style.transform translate(${vector.x}px, ${vector.y}px); anno.element.style.display vector.z 1 ? block : none; }); } }5. 从功能实现到创意设计5.1 风格化场景设计基础功能实现后我们可以开始考虑如何让场景更具设计感。Three.js提供了多种方式来实现风格化效果。class StylizedEffects { constructor(scene) { this.scene scene; this.effects {}; } addToonShading() { // 遍历场景中的所有网格物体 this.scene.traverse(obj { if (obj.isMesh) { // 替换为卡通材质 const toonMaterial new THREE.MeshToonMaterial({ color: obj.material.color, shininess: 30 }); obj.material toonMaterial; } }); // 添加边缘光效果 const rimLight new THREE.HemisphereLight(0xffffff, 0x000000, 0.5); this.scene.add(rimLight); this.effects.toonShading rimLight; } addWireframeOverlay() { // 为每个网格创建线框副本 this.scene.traverse(obj { if (obj.isMesh) { const wireframe new THREE.LineSegments( new THREE.WireframeGeometry(obj.geometry), new THREE.LineBasicMaterial({ color: 0x000000, transparent: true, opacity: 0.5 }) ); wireframe.position.copy(obj.position); wireframe.rotation.copy(obj.rotation); wireframe.scale.copy(obj.scale); this.scene.add(wireframe); obj.userData.wireframe wireframe; } }); } addGridFloor(size 10, divisions 10, color 0x888888) { const gridHelper new THREE.GridHelper(size, divisions, color, color); this.scene.add(gridHelper); this.effects.gridFloor gridHelper; } }5.2 交互设计优化好的交互设计可以大大提升编辑器的用户体验。我们可以添加一些实用的交互功能。class InteractionManager { constructor(scene, camera, renderer) { this.scene scene; this.camera camera; this.renderer renderer; this.raycaster new THREE.Raycaster(); this.mouse new THREE.Vector2(); this.selectedObject null; this.init(); } init() { // 鼠标移动事件 this.renderer.domElement.addEventListener(mousemove, (e) { this.mouse.x (e.clientX / window.innerWidth) * 2 - 1; this.mouse.y -(e.clientY / window.innerHeight) * 2 1; }); // 点击事件 this.renderer.domElement.addEventListener(click, () { this.raycaster.setFromCamera(this.mouse, this.camera); const intersects this.raycaster.intersectObjects(this.scene.children, true); if (intersects.length 0) { // 清除之前选中对象的高亮 if (this.selectedObject) { this.selectedObject.material.emissive.setHex(this.selectedObject.userData.originalEmissive || 0x000000); } // 设置新选中对象的高亮 this.selectedObject intersects[0].object; this.selectedObject.userData.originalEmissive this.selectedObject.material.emissive.getHex(); this.selectedObject.material.emissive.setHex(0xffff00); // 触发选中事件 if (this.onObjectSelected) { this.onObjectSelected(this.selectedObject); } } }); // 键盘事件 document.addEventListener(keydown, (e) { if (this.selectedObject) { const step e.shiftKey ? 0.1 : 1; switch (e.key) { case ArrowUp: this.selectedObject.position.y step; break; case ArrowDown: this.selectedObject.position.y - step; break; case ArrowLeft: this.selectedObject.position.x - step; break; case ArrowRight: this.selectedObject.position.x step; break; case Delete: this.scene.remove(this.selectedObject); this.selectedObject null; break; } } }); } }6. 编辑器优化与扩展6.1 性能优化技巧随着场景复杂度增加性能优化变得尤为重要。以下是我在实践中总结的几个有效方法实例化渲染对于大量重复的几何体使用实例化网格可以大幅提升性能。const geometry new THREE.BoxGeometry(1, 1, 1); const material new THREE.MeshBasicMaterial({ color: 0x00ff00 }); const count 1000; const instancedMesh new THREE.InstancedMesh(geometry, material, count); const matrix new THREE.Matrix4(); for (let i 0; i count; i) { matrix.setPosition( Math.random() * 100 - 50, Math.random() * 100 - 50, Math.random() * 100 - 50 ); instancedMesh.setMatrixAt(i, matrix); } scene.add(instancedMesh);LOD细节层次根据物体距离相机的远近使用不同精度的模型。const lod new THREE.LOD(); // 添加不同细节级别的几何体 lod.addLevel(new THREE.BoxGeometry(1, 1, 1, 10, 10, 10), 50); // 高精度50单位内使用 lod.addLevel(new THREE.BoxGeometry(1, 1, 1, 5, 5, 5), 100); // 中精度 lod.addLevel(new THREE.BoxGeometry(1, 1, 1), 200); // 低精度 scene.add(lod);视锥体裁剪只渲染相机视野内的物体。const frustum new THREE.Frustum(); const cameraViewProjectionMatrix new THREE.Matrix4(); function updateFrustum() { camera.updateMatrixWorld(); cameraViewProjectionMatrix.multiplyMatrices( camera.projectionMatrix, camera.matrixWorldInverse ); frustum.setFromProjectionMatrix(cameraViewProjectionMatrix); } function isInView(object) { const sphere new THREE.Sphere(); object.geometry.computeBoundingSphere(); sphere.copy(object.geometry.boundingSphere); sphere.applyMatrix4(object.matrixWorld); return frustum.intersectsSphere(sphere); }6.2 编辑器功能扩展基础编辑器完成后可以考虑添加更多高级功能材质编辑器可视化编辑复杂材质参数。class MaterialEditor { constructor(material, container) { this.material material; this.container container; this.init(); } init() { this.container.innerHTML ; // 颜色选择器 this.addColorControl(color, 基础颜色); // 数值滑块 this.addSliderControl(roughness, 粗糙度, 0, 1, 0.01); this.addSliderControl(metalness, 金属度, 0, 1, 0.01); // 纹理上传 this.addTextureUpload(map, 漫反射贴图); this.addTextureUpload(normalMap, 法线贴图); } addColorControl(property, label) { const field document.createElement(div); field.className material-field; const labelElement document.createElement(label); labelElement.textContent label; const input document.createElement(input); input.type color; input.value #${this.material[property].getHexString()}; input.addEventListener(change, (e) { this.material[property].set(e.target.value); }); field.appendChild(labelElement); field.appendChild(input); this.container.appendChild(field); } }动画时间轴编辑和预览场景动画。class AnimationTimeline { constructor(scene, container) { this.scene scene; this.container container; this.animations []; this.currentTime 0; this.init(); } init() { // 创建时间轴UI this.timelineElement document.createElement(div); this.timelineElement.className timeline; this.container.appendChild(this.timelineElement); // 创建控制按钮 const controls document.createElement(div); controls.className timeline-controls; const playButton document.createElement(button); playButton.textContent 播放; playButton.addEventListener(click, () this.play()); const pauseButton document.createElement(button); pauseButton.textContent 暂停; pauseButton.addEventListener(click, () this.pause()); const stopButton document.createElement(button); stopButton.textContent 停止; stopButton.addEventListener(click, () this.stop()); controls.appendChild(playButton); controls.appendChild(pauseButton); controls.appendChild(stopButton); this.container.appendChild(controls); // 添加到渲染循环 this.originalAnimate animate; animate (time) { this.originalAnimate(time); this.updateAnimations(time); }; } addAnimation(object, property, keyframes) { this.animations.push({ object, property, keyframes }); } updateAnimations(time) { if (!this.playing) return; this.currentTime 0.016; // 假设60fps this.animations.forEach(anim { // 找到当前时间点前后的关键帧 const frames anim.keyframes.sort((a, b) a.time - b.time); let prevFrame frames[0]; let nextFrame frames[frames.length - 1]; for (let i 0; i frames.length - 1; i) { if (frames[i].time this.currentTime frames[i 1].time this.currentTime) { prevFrame frames[i]; nextFrame frames[i 1]; break; } } // 计算插值 const t (this.currentTime - prevFrame.time) / (nextFrame.time - prevFrame.time); const value prevFrame.value (nextFrame.value - prevFrame.value) * t; // 应用动画 anim.object[anim.property] value; }); } }