1. Uniapp与three.js的强强联合在移动端和H5开发领域Uniapp凭借其跨平台特性已经成为很多开发者的首选。而three.js作为WebGL的封装库让3D开发变得触手可及。当这两者相遇就能创造出令人惊艳的3D交互体验。我去年做过一个电商项目需要在商品详情页展示3D模型就是用的这个技术组合效果相当不错。要在Uniapp中使用three.js首先需要安装three.js库。这里有个小技巧建议锁定特定版本避免后续版本更新导致兼容性问题。我推荐使用0.149.0版本这个版本在Uniapp中表现稳定npm install --save three0.149.0安装完成后需要在页面中引入必要的模块。除了基础的THREE对象外我们还需要引入OrbitControls用于模型交互控制以及模型加载器import * as THREE from three import {OrbitControls} from three/examples/jsm/controls/OrbitControls.js import {GLTFLoader} from three/examples/jsm/loaders/GLTFLoader.js import {FBXLoader} from three/examples/jsm/loaders/FBXLoader.js2. 场景初始化与模型加载2.1 创建基础场景初始化场景是3D展示的第一步这里有几个关键点需要注意。首先是相机的选择我推荐使用PerspectiveCamera透视相机因为它更符合人眼的视觉效果。在实际项目中我发现相机位置的设置对最终效果影响很大init() { this.scene new THREE.Scene() this.camera new THREE.PerspectiveCamera() this.camera.position.set(500, 0, 700) this.camera.lookAt(this.scene.position) }渲染器的配置也很关键。在移动端我们需要特别注意性能优化。开启抗锯齿antialias会让边缘更平滑但会消耗更多性能。根据我的测试在高端手机上可以开启但在低端设备上建议关闭this.renderer new THREE.WebGLRenderer({ alpha: true, // 透明背景 antialias: true // 抗锯齿 }) this.renderer.setPixelRatio(window.devicePixelRatio * 2)2.2 光源设置技巧光源的设置直接影响模型的视觉效果。我通常使用四束方向光组合的环境光方案这样可以在保证基础亮度的同时让模型有更好的立体感let ambientLight new THREE.AmbientLight(0xffffff, 1) this.scene.add(ambientLight) const directional_light new THREE.DirectionalLight(0xffffff, 1) directional_light.position.set(0, 1, 0) this.scene.add(directional_light) // 添加四束方向光 let a1, b0.6, c10 let lights [ new THREE.DirectionalLight(0xffffff,b).position.set(-a,-a,a*c).normalize(), new THREE.DirectionalLight(0xffffff,b).position.set(a,-a,-a*c).normalize(), new THREE.DirectionalLight(0xffffff,b).position.set(-a,a,-a*c).normalize(), new THREE.DirectionalLight(0xffffff,b).position.set(a,a,a*c).normalize() ] lights.forEach(light this.scene.add(light))3. 模型加载与优化3.1 FBX模型加载实战FBX格式在3D建模领域非常常见特别适合包含动画的模型。在加载FBX模型时我建议添加加载进度回调这对大模型特别有用fbxLoader() { let that this const loader new FBXLoader() loader.load( this.modelUrl, function(mesh) { that.scene.add(mesh) that.ownerInstance.callMethod(onload) }, function(xhr) { console.log((xhr.loaded / xhr.total * 100) % loaded) }, function(error) { console.error(FBX加载错误:, error) } ) }3.2 GLB模型加载技巧GLB是glTF的二进制格式体积更小加载更快。在实际项目中我发现GLB格式特别适合移动端使用。加载GLB时可以访问模型的各个组成部分gblLoader() { let that this const loader new GLTFLoader() loader.load( this.modelUrl, function(gltf) { that.mesh gltf.scene let model gltf.scene that.scene.add(model) // 可以访问模型的动画 if(gltf.animations gltf.animations.length) { that.mixer new THREE.AnimationMixer(model) gltf.animations.forEach(clip { that.mixer.clipAction(clip).play() }) } that.ownerInstance.callMethod(onload) } ) }4. 交互控制与性能优化4.1 轨道控制器配置OrbitControls是实现模型交互的核心组件。通过合理配置可以实现旋转、缩放、平移等操作。在实际项目中我发现限制操作范围可以提升用户体验change() { this.controls new OrbitControls(this.camera, this.renderer.domElement) this.controls.minDistance 300 // 最小缩放距离 this.controls.maxDistance 1000 // 最大缩放距离 // 禁用阻尼效果可以提升性能但会降低交互流畅度 this.controls.enableDamping true this.controls.dampingFactor 0.05 this.controls.addEventListener(change, () { this.renderer.render(this.scene, this.camera) }) }4.2 自动旋转与性能平衡自动旋转是展示3D模型的常用功能但需要注意性能问题。我通常会在requestAnimationFrame中控制渲染频率animate() { if (this.renderer) { let T this.clock.getDelta() let renderT 1 / 30 // 控制渲染频率为30fps this.timeS this.timeS T if(this.timeS renderT) { this.controls.update() this.renderer.render(this.scene, this.camera) this.timeS 0 } requestAnimationFrame(this.animate) this.controls.autoRotate true this.controls.autoRotateSpeed 15 } }4.3 跨平台兼容性处理在Uniapp中使用three.js有个重要限制在APP端不能直接运行必须使用renderjs技术。这是我在实际项目中踩过的坑。解决方案是在H5端使用标准three.js代码在APP端通过renderjs实现// 在template中 view idthreeView v-ifisH5/view view v-else !-- APP端使用renderjs实现 -- /view // 在script中 mounted() { this.isH5 process.env.VUE_APP_PLATFORM h5 if(this.isH5) { this.initThree() } }5. 高级优化技巧5.1 模型压缩与预处理在实际项目中模型文件大小直接影响加载速度和性能。我推荐使用以下工具对模型进行预处理使用Blender对FBX模型进行减面处理使用glTF-Pipeline压缩GLB文件对纹理图片进行适当压缩5.2 内存管理与垃圾回收three.js中的对象需要手动释放内存。特别是在单页应用中离开页面时要记得清理beforeDestroy() { this.scene.traverse(object { if(object.geometry) { object.geometry.dispose() } if(object.material) { if(Array.isArray(object.material)) { object.material.forEach(m m.dispose()) } else { object.material.dispose() } } }) this.renderer.dispose() }5.3 响应式设计在移动端屏幕尺寸各异需要确保3D场景能够自适应window.addEventListener(resize, () { const element document.getElementById(threeView) this.camera.aspect element.clientWidth / element.clientHeight this.camera.updateProjectionMatrix() this.renderer.setSize(element.clientWidth, element.clientHeight) })6. 实战经验分享在最近的一个电商项目中我们需要展示家具的3D模型。开始时直接加载原始FBX文件在低端手机上出现了明显的卡顿。经过优化我们采取了以下措施将模型面数从5万减到1万将纹理尺寸从2048x2048降到1024x1024添加了加载进度提示实现了按需加载只有用户点击查看时才加载3D模型优化后加载时间从原来的8秒降到了2秒以内用户体验大幅提升。这个案例告诉我在移动端做3D展示性能优化和用户体验同样重要。
Uniapp中three.js进阶实践：FBX与GLB模型加载与交互优化
1. Uniapp与three.js的强强联合在移动端和H5开发领域Uniapp凭借其跨平台特性已经成为很多开发者的首选。而three.js作为WebGL的封装库让3D开发变得触手可及。当这两者相遇就能创造出令人惊艳的3D交互体验。我去年做过一个电商项目需要在商品详情页展示3D模型就是用的这个技术组合效果相当不错。要在Uniapp中使用three.js首先需要安装three.js库。这里有个小技巧建议锁定特定版本避免后续版本更新导致兼容性问题。我推荐使用0.149.0版本这个版本在Uniapp中表现稳定npm install --save three0.149.0安装完成后需要在页面中引入必要的模块。除了基础的THREE对象外我们还需要引入OrbitControls用于模型交互控制以及模型加载器import * as THREE from three import {OrbitControls} from three/examples/jsm/controls/OrbitControls.js import {GLTFLoader} from three/examples/jsm/loaders/GLTFLoader.js import {FBXLoader} from three/examples/jsm/loaders/FBXLoader.js2. 场景初始化与模型加载2.1 创建基础场景初始化场景是3D展示的第一步这里有几个关键点需要注意。首先是相机的选择我推荐使用PerspectiveCamera透视相机因为它更符合人眼的视觉效果。在实际项目中我发现相机位置的设置对最终效果影响很大init() { this.scene new THREE.Scene() this.camera new THREE.PerspectiveCamera() this.camera.position.set(500, 0, 700) this.camera.lookAt(this.scene.position) }渲染器的配置也很关键。在移动端我们需要特别注意性能优化。开启抗锯齿antialias会让边缘更平滑但会消耗更多性能。根据我的测试在高端手机上可以开启但在低端设备上建议关闭this.renderer new THREE.WebGLRenderer({ alpha: true, // 透明背景 antialias: true // 抗锯齿 }) this.renderer.setPixelRatio(window.devicePixelRatio * 2)2.2 光源设置技巧光源的设置直接影响模型的视觉效果。我通常使用四束方向光组合的环境光方案这样可以在保证基础亮度的同时让模型有更好的立体感let ambientLight new THREE.AmbientLight(0xffffff, 1) this.scene.add(ambientLight) const directional_light new THREE.DirectionalLight(0xffffff, 1) directional_light.position.set(0, 1, 0) this.scene.add(directional_light) // 添加四束方向光 let a1, b0.6, c10 let lights [ new THREE.DirectionalLight(0xffffff,b).position.set(-a,-a,a*c).normalize(), new THREE.DirectionalLight(0xffffff,b).position.set(a,-a,-a*c).normalize(), new THREE.DirectionalLight(0xffffff,b).position.set(-a,a,-a*c).normalize(), new THREE.DirectionalLight(0xffffff,b).position.set(a,a,a*c).normalize() ] lights.forEach(light this.scene.add(light))3. 模型加载与优化3.1 FBX模型加载实战FBX格式在3D建模领域非常常见特别适合包含动画的模型。在加载FBX模型时我建议添加加载进度回调这对大模型特别有用fbxLoader() { let that this const loader new FBXLoader() loader.load( this.modelUrl, function(mesh) { that.scene.add(mesh) that.ownerInstance.callMethod(onload) }, function(xhr) { console.log((xhr.loaded / xhr.total * 100) % loaded) }, function(error) { console.error(FBX加载错误:, error) } ) }3.2 GLB模型加载技巧GLB是glTF的二进制格式体积更小加载更快。在实际项目中我发现GLB格式特别适合移动端使用。加载GLB时可以访问模型的各个组成部分gblLoader() { let that this const loader new GLTFLoader() loader.load( this.modelUrl, function(gltf) { that.mesh gltf.scene let model gltf.scene that.scene.add(model) // 可以访问模型的动画 if(gltf.animations gltf.animations.length) { that.mixer new THREE.AnimationMixer(model) gltf.animations.forEach(clip { that.mixer.clipAction(clip).play() }) } that.ownerInstance.callMethod(onload) } ) }4. 交互控制与性能优化4.1 轨道控制器配置OrbitControls是实现模型交互的核心组件。通过合理配置可以实现旋转、缩放、平移等操作。在实际项目中我发现限制操作范围可以提升用户体验change() { this.controls new OrbitControls(this.camera, this.renderer.domElement) this.controls.minDistance 300 // 最小缩放距离 this.controls.maxDistance 1000 // 最大缩放距离 // 禁用阻尼效果可以提升性能但会降低交互流畅度 this.controls.enableDamping true this.controls.dampingFactor 0.05 this.controls.addEventListener(change, () { this.renderer.render(this.scene, this.camera) }) }4.2 自动旋转与性能平衡自动旋转是展示3D模型的常用功能但需要注意性能问题。我通常会在requestAnimationFrame中控制渲染频率animate() { if (this.renderer) { let T this.clock.getDelta() let renderT 1 / 30 // 控制渲染频率为30fps this.timeS this.timeS T if(this.timeS renderT) { this.controls.update() this.renderer.render(this.scene, this.camera) this.timeS 0 } requestAnimationFrame(this.animate) this.controls.autoRotate true this.controls.autoRotateSpeed 15 } }4.3 跨平台兼容性处理在Uniapp中使用three.js有个重要限制在APP端不能直接运行必须使用renderjs技术。这是我在实际项目中踩过的坑。解决方案是在H5端使用标准three.js代码在APP端通过renderjs实现// 在template中 view idthreeView v-ifisH5/view view v-else !-- APP端使用renderjs实现 -- /view // 在script中 mounted() { this.isH5 process.env.VUE_APP_PLATFORM h5 if(this.isH5) { this.initThree() } }5. 高级优化技巧5.1 模型压缩与预处理在实际项目中模型文件大小直接影响加载速度和性能。我推荐使用以下工具对模型进行预处理使用Blender对FBX模型进行减面处理使用glTF-Pipeline压缩GLB文件对纹理图片进行适当压缩5.2 内存管理与垃圾回收three.js中的对象需要手动释放内存。特别是在单页应用中离开页面时要记得清理beforeDestroy() { this.scene.traverse(object { if(object.geometry) { object.geometry.dispose() } if(object.material) { if(Array.isArray(object.material)) { object.material.forEach(m m.dispose()) } else { object.material.dispose() } } }) this.renderer.dispose() }5.3 响应式设计在移动端屏幕尺寸各异需要确保3D场景能够自适应window.addEventListener(resize, () { const element document.getElementById(threeView) this.camera.aspect element.clientWidth / element.clientHeight this.camera.updateProjectionMatrix() this.renderer.setSize(element.clientWidth, element.clientHeight) })6. 实战经验分享在最近的一个电商项目中我们需要展示家具的3D模型。开始时直接加载原始FBX文件在低端手机上出现了明显的卡顿。经过优化我们采取了以下措施将模型面数从5万减到1万将纹理尺寸从2048x2048降到1024x1024添加了加载进度提示实现了按需加载只有用户点击查看时才加载3D模型优化后加载时间从原来的8秒降到了2秒以内用户体验大幅提升。这个案例告诉我在移动端做3D展示性能优化和用户体验同样重要。
