我是three.js的初学者,也将它用于BIM项目,当我加载〜25mb的gltf文件时,我几乎无法移动整个对象,并且stats.js监视器显示的fps为0〜2,最大值gltf文件:https://github.com/xeolabs/xeogl/tree/master/examples/models/gltf/schependomlaan我在vuejs和>中使用THREE js
//package.json "stats.js": "^0.17.0", "three": "^0.109.0",
import * as THREE from 'three'; import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'; import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js'; import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'; this.scene = new THREE.Scene(); this.stats = new Stats(); this.stats.showPanel( 0, 1, 2 ); // 0: fps, 1: ms, 2: mb, 3+: custom let div = document.createElement('div') div.appendChild(this.stats.dom) div.style.position = 'absolute'; div.style.top = 0; div.style.left = 0; document.getElementsByClassName('gltfViewer')[0].appendChild( div ); // Camera this.camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1500 ); this.camera.position.set( this.pos, this.pos, this.pos ); // renderer this.raycaster = new THREE.Raycaster(); this.renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('gltfViewerCanvas'), alpha: false }); this.renderer.setClearColor( 0xefefef ); this.renderer.setPixelRatio( window.devicePixelRatio ); this.renderer.setSize(window.innerWidth, window.innerHeight); // adding controls this.controls = new OrbitControls( this.camera, this.renderer.domElement ); this.controls.dampingFactor = 0.1; this.controls.rotateSpeed = 0.12; this.controls.enableDamping = true; this.controls.update(); window.addEventListener('resize', _ => this.render()); this.controls.addEventListener('change', _ => this.render()); // light var ambientLight = new THREE.AmbientLight( 0xcccccc ); this.scene.add( ambientLight ); var directionalLight = new THREE.DirectionalLight( 0xffffff ); directionalLight.position.set( 0, 1, 1 ).normalize(); this.scene.add( directionalLight ); // loading gltf file // Instantiate a loader this.gltfLoader = new GLTFLoader(); // Optional: Provide a DRACOLoader instance to decode compressed mesh data this.dracoLoader = new DRACOLoader(); this.dracoLoader.setDecoderPath( 'three/examples/js/libs/draco' ); this.gltfLoader.setDRACOLoader( this.dracoLoader ); // Load a glTF resource this.gltfLoader.load( this.src, this.onGLTFLoaded, this.onGLTFLoading, this.onGLTFLoadingError ); //onGLTFLoaded() this.scene.add( optimizedGltf.scene ); // gltf.scene.getObjectById(404).visible = false; this.listGltfObjects(gltf); this.render(); // render () this.renderer.render( this.scene, this.camera ); this.stats.update(); // on mounted component : animate() // animate() this.stats.begin() this.render(); this.stats.end();
即使在使用https://github.com/AnalyticalGraphicsInc/gltf-pipeline应用Draco压缩之后,也没有任何变化。
谢谢
我是three.js的初学者,也将其用于BIM项目,当我加载〜25mb的gltf文件时,我几乎无法移动整个对象,并且stats.js监视器在最大gltf文件处显示0〜2的fps:https :// github ....
关于文件大小—