本文介绍了在uniapp中使用tree.js时遇到的模型加载不出来的问题,并最终发现是由于缩放问题导致的,通过调用`getFitScaleValue()`方法解决了这个问题,感兴趣的朋友一起看看吧
网上有很多uniapp使用tree.js的教程，但是我在使用测试中，发现tree.js的官方3d模型中有很多加载不出来，但是也没有报错，全网搜也没搜到方法，最后发现是缩放的问题，这里将代码贴出来，关键的方法是getFitScaleValue（）这个方法
<template><view id="app"><canvas id="webgl" ref="webgl" canvas-id="webgl" type="webgl":style="'width:'+mSceneWidth+'px; height:'+mSceneHeight+'px;'"></canvas></view></template><script>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 {//Soldierdata() {return {mSceneWidth: 0, // 手机屏幕宽度mSceneHeight: 0, // 手机屏幕高度canvas: null,worldFocus: null, // 世界焦点（模型放置，相机围绕的中心）renderer: null,mCanvasId: null,scene: null,mesh: null,camera: null,clock: null,renderAnimFrameId: null, // 渲染帧动画idcontrols: 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); // 距离0lod.addLevel(mediumDetailMesh, 5); // 距离5lod.addLevel(lowDetailMesh, 10); // 距离10this.scene.add(lod);this.camera = new THREE.PerspectiveCamera(75, this.mSceneWidth / this.mSceneHeight, 0.1, 2000);//100，300 ，500this.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 = elementthis.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 = 300this.controls.maxDistance = 1000this.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 / 30this.timeS = this.timeS + Tif (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 = thisconst loader = new OBJLoader();uni.showLoading({title: "正在加载"})// load a resourceloader.load(// resource URLthat.modelUrl,// called when resource is loadedfunction(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 progressfunction(xhr) {console.log((xhr.loaded / xhr.total * 100) + '% loaded');},// called when loading has errorsfunction(error) {console.log('An error happened');});},//导入FBX模型文件fbxLoader() {let that = thisconst loader = new FBXLoader();loader.load(this.modelUrl, function(mesh) {that.scene.add(mesh);that.ownerInstance.callMethod('onload')})},//导入GLB模型文件gblLoader() {uni.showLoading({title: "正在加载",})let that = thisconst 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.sceneif (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() {// 在这里处理触摸结束事件}}}</script><style lang="scss"></style>未调用缩放方法，就是空白，调用后：
