网上有很多uniapp使用tree.js的教程，但是我在使用测试中，发现tree.js的官方3d模型中有很多加载不出来，但是也没有报错，全网搜也没搜到方法，最后发现是缩放的问题，这里将代码贴出来，关键的方法是getFitScaleValue（）这个方法
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 | 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.js';import { DRACOLoader} from "three/examples/jsm/loaders/DRACOLoader.js";import { OBJLoader} from "three/examples/jsm/loaders/OBJLoader.js";export default { //Soldier data() { return { mSceneWidth: 0, // 手机屏幕宽度 mSceneHeight: 0, // 手机屏幕高度 canvas: null, worldFocus: null, // 世界焦点（模型放置，相机围绕的中心） renderer: null, mCanvasId: null, scene: null, mesh: null, camera: null, clock: null, renderAnimFrameId: null, // 渲染帧动画id controls: null, timeS: 0, changeFlag: true, mixer: null, previousTime: 0, modelUrl: "/static/Soldier.glb" }; }, mounted() { // uni.createSelectorQuery().in(this).select('#webgl').fields({ // node: true // }).exec(res=> { // console.log(JSON.stringify(res)) // this.mCanvasId = res[0].node.id; // // 注册画布 // const mCanvas = THREE.global.registerCanvas(this.mCanvasId, res[0].node); // // 开始初始化 // this.init(mCanvas); // }) }, // 页面加载时 onLoad(option) { // 获取手机屏幕宽高 this.mSceneWidth = uni.getWindowInfo().windowWidth; this.mSceneHeight = uni.getWindowInfo().windowHeight; // 设置世界中心 this.worldFocus = new THREE.Vector3(0, 0, 0); }, // 页面加载完毕后 onReady() { this.init() }, onShow() { }, onHide() { this.disposes() cancelAnimationFrame(this.animate()) }, methods: { // 在不需要时释放资源 disposes() { // 释放几何体 this.scene.traverse((object) => { if (object.geometry) { object.geometry.dispose(); } // 释放材质 if (object.material) { if (Array.isArray(object.material)) { object.material.forEach(material => material.dispose()); } else { object.material.dispose(); } } }); // 释放渲染器 if (this.renderer) { this.renderer.dispose(); } // 清除场景 while (this.scene.children.length > 0) { this.scene.remove(this.scene.children[0]); } }, getFitScaleValue(scene) { let box=new THREE.BoxGeometry(3,3,3) let mail=new THREE.MeshBasicMaterial({color:0xff6600}) let mesh=new THREE.Mesh(box,mail) var boxes = new THREE.Box3().setFromObject( scene ); var maxDiameter = Math.max((boxes.max.x - boxes.min.x), (boxes.max.y - boxes.min.y), (boxes.max.z - boxes.min.z)); //数值越大，模型越小 console.log(maxDiameter) return Math.ceil(this.mSceneHeight / maxDiameter/4); }, init() { // 创建一个场景 this.scene = new THREE.Scene() //三位坐标线 // const axesHelper = new THREE.AxesHelper(5); // this.scene.add(axesHelper); //创建相机对象，45是相机的视角 ， 宽高比是屏幕的宽高比 ， 最近能看到0.1 ， 最远能看到10000 // this.camera = new THREE.OrthographicCamera(-s * k, s * k, s , -s, 1, 1000); // this.camera.position.set(0, 20, 300); const lod = new THREE.LOD(); // 创建不同细节级别的几何体 const highDetailGeometry = new THREE.BoxGeometry(1, 1, 1); const mediumDetailGeometry = new THREE.BoxGeometry(0.5, 0.5, 0.5); const lowDetailGeometry = new THREE.BoxGeometry(0.25, 0.25, 0.25); // 创建材质 const material = new THREE.MeshBasicMaterial({ color: 0xff0000 }); // 创建不同细节级别的网格 const highDetailMesh = new THREE.Mesh(highDetailGeometry, material); const mediumDetailMesh = new THREE.Mesh(mediumDetailGeometry, material); const lowDetailMesh = new THREE.Mesh(lowDetailGeometry, material); // 将不同细节级别的网格添加到LOD对象中 lod.addLevel(highDetailMesh, 0); // 距离0 lod.addLevel(mediumDetailMesh, 5); // 距离5 lod.addLevel(lowDetailMesh, 10); // 距离10 this.scene.add(lod); this.camera = new THREE.PerspectiveCamera(75, this.mSceneWidth / this.mSceneHeight, 0.1, 2000); //100，300 ，500 this.camera.position.set(0, 0, 5); //设置相机位置 //this.camera.position.set(100, -800, 500); this.scene.add(this.camera) this.camera.lookAt(this.scene.position); //设置相机方向(指向的场景对象) // 执行一个渲染函数 this.rendererGLR() /* 光源设置*/ this.pointLight() this.clock = new THREE.Clock() //创建控件对象 this.change() //更新轨道控件 let fileName = this.modelUrl.lastIndexOf(".") let fileFormat = this.modelUrl.substring(fileName + 1, this.modelUrl.length).toLowerCase() if (fileFormat == 'fbx') { this.fbxLoader() } else if (fileFormat == 'glb') { this.gblLoader() } else if (fileFormat == 'obj') { this.objLoader() } //this.renderer.render(this.scene, this.camera); }, pointLight() { 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); directional_light.castShadow = true; this.scene.add(directional_light); let a = 1, b = 0.6, c = 10; let directionalLight1 = new THREE.DirectionalLight(0xffffff, b); directionalLight1.position.set(-a, -a, a * c).normalize(); let directionalLight2 = new THREE.DirectionalLight(0xffffff, b); directionalLight2.position.set(a, -a, -a * c).normalize(); let directionalLight3 = new THREE.DirectionalLight(0xffffff, b); directionalLight3.position.set(-a, a, -a * c).normalize(); let directionalLight4 = new THREE.DirectionalLight(0xffffff, b); directionalLight4.position.set(a, a, a * c).normalize(); this.scene.add(directionalLight1); this.scene.add(directionalLight2); this.scene.add(directionalLight3); this.scene.add(directionalLight4); }, //渲染函数 rendererGLR() { this.$nextTick(() => { const element = document.getElementById('webgl') this.canvas = element this.renderer.setSize(element.clientWidth, element.clientHeight); element.appendChild(this.renderer.domElement); }) this.renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true, powerPreference: "high-performance", precision: "mediump" }); //alpha:true背景透明 this.renderer.setPixelRatio(window.devicePixelRatio * 2); this.renderer.toneMapping = THREE.ACESFilmicToneMapping; this.renderer.toneMappingExposure = 1.0; this.renderer.outputColorSpace = THREE.SRGBColorSpace; this.renderer.shadowMap.enabled = true; this.renderer.shadowMap.type = THREE.PCFSoftShadowMap; }, //创建控件对象 change() { this.controls = new OrbitControls(this.camera, this.renderer.domElement); this.controls.minDistance = 300 this.controls.maxDistance = 1000 this.controls.addEventListener('change', () => { this.renderer.render(this.scene, this.camera); }); //监听鼠标、键盘事件 //禁止缩放 this.controls.enableZoom = this.changeFlag //禁止旋转 this.controls.enableRotate = this.changeFlag //禁止右键拖拽 this.controls.enablePan = this.changeFlag }, //更新轨道控件 animate() { if (this.renderer) { // console.log(this.stats) // this.stats.update() let T = this.clock.getDelta() let renderT = 1 / 30 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); if (!this.changeFlag) { this.controls.autoRotateSpeed = 16 } this.controls.autoRotate = false // 是否自动旋转 } //创建一个时钟对象 //this.clock = new THREE.Clock() //this.scene.rotateY(0.01) //获得两帧的时间间隔 更新混合器相关的时间 if (this.mixer) { this.mixer.update(this.clock.getDelta()*100) } }, objLoader() { let that = this const loader = new OBJLoader(); uni.showLoading({ title: "正在加载" }) // load a resource loader.load( // resource URL that.modelUrl, // called when resource is loaded function(object) { console.log(object) uni.hideLoading() var scale = that.getFitScaleValue(object) console.log(scale) object.scale.set(scale, scale, scale); that.scene.add(object); setTimeout(function() { //that.renderer.render(that.scene, that.camera); that.animate() }, 1000); }, // called when loading is in progress function(xhr) { console.log((xhr.loaded / xhr.total * 100) + '% loaded'); }, // called when loading has errors function(error) { console.log('An error happened'); } ); }, //导入FBX模型文件 fbxLoader() { let that = this const loader = new FBXLoader(); loader.load(this.modelUrl, function(mesh) { that.scene.add(mesh); that.ownerInstance.callMethod('onload') }) }, //导入GLB模型文件 gblLoader() { uni.showLoading({ title: "正在加载", }) let that = this const loader = new GLTFLoader(); const dracoloader = new DRACOLoader(); dracoloader.setDecoderPath("/static/draco/"); loader.setDRACOLoader(dracoloader); loader.load(that.modelUrl, function(gltf) { uni.hideLoading() //that.mesh = gltf.scene if (gltf.animations.length > 0) { that.mixer = new THREE.AnimationMixer(gltf.scene) const action = that.mixer.clipAction(gltf.animations[0]) // 让动画进入播放状态 action.play() } var scale = that.getFitScaleValue(gltf.scene) console.log(scale) gltf.scene.scale.set(scale, scale, scale); that.scene.add(gltf.scene); setTimeout(function() { //that.renderer.render(that.scene, that.camera); that.animate() }, 1000); }, function(xhr) { console.log((xhr.loaded / xhr.total * 100) + '% loaded'); }, function(err) { console.log(err) }); }, // 触摸开始 // 触摸事件处理 onTouchStart(event) { const touch = event.touches[0]; const rect = this.canvas.getBoundingClientRect(); const x = touch.clientX - rect.left; const y = touch.clientY - rect.top; // 在这里处理触摸开始事件 }, onTouchMove(event) { const touch = event.touches[0]; const rect = this.canvas.getBoundingClientRect(); const x = touch.clientX - rect.left; const y = touch.clientY - rect.top; // 在这里处理触摸移动事件 }, onTouchEnd() { // 在这里处理触摸结束事件 } }} |
未调用缩放方法，就是空白，调用后：
到此这篇关于uniapp 使用 tree.js 解决模型加载不出来的问题的文章就介绍到这了,更多相关uniapp tree.js 模型加载不出来内容请搜索IT俱乐部以前的文章或继续浏览下面的相关文章希望大家以后多多支持IT俱乐部！
