threejs加载gltf模型_努力学习的前端菜鸟_threejs加载gltf模型

irpas 02-07 6888

项目需要threejs加载gltf模型，查阅网上资料很多，但都为实现，查看例子的源码终于实现出来

gltfLoader (url) { let self = this // 获取threejs的渲染div let container = document.getElementById("ThreeContainer") // 内容渲染 this.renderer = new THREE.WebGLRenderer( { antialias: true } ); this.renderer.setSize( container.clientWidth, container.clientHeight ); container.appendChild( this.renderer.domElement ); // 创建摄像机 this.camera = new THREE.PerspectiveCamera( 45, container.clientWidth / container.clientHeight, 0.1, 1000 ); this.camera.position.set( 0, 100, 50 ) // 创建室内环境 const environment = new RoomEnvironment(); const pmremGenerator = new THREE.PMREMGenerator( self.renderer ); // 创建创景 this.scene = new THREE.Scene(); this.scene.environment = pmremGenerator.fromScene( environment ).texture; // 加载gltf格式 const loader = new GLTFLoader() loader.load( url, function ( gltf ) { gltf.scene.position.y = 8; self.scene.add( gltf.scene ); self.render() }) // 设置缩放旋转控制 const controls = new OrbitControls( self.camera, self.renderer.domElement ); controls.addEventListener( 'change', self.render ) controls.minDistance = 400; controls.maxDistance = 1000; controls.target.set( 10, 90, - 16 ); controls.update(); // 屏幕自适应 window.addEventListener( 'resize', this.onWindowResize, false ) }, onWindowResize() { let container = document.getElementById("ThreeContainer") this.camera.aspect = container.clientWidth / container.clientHeight; this.camera.updateProjectionMatrix(); this.renderer.setSize( container.clientWidth, container.clientHeight ); this.render(); }, render () { this.renderer.render( this.scene, this.camera ); }