|  |  |  | 
|---|
|  |  |  | import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader' | 
|---|
|  |  |  | import * as Utils from '../../utils' | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const help = true; | 
|---|
|  |  |  | const help = false; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | export default class ShelfThree { | 
|---|
|  |  |  |  | 
|---|
|  |  |  | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | getFullWidth = () => { | 
|---|
|  |  |  | return this.dom.offsetWidth; | 
|---|
|  |  |  | return this.dom?.offsetWidth; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | getFullHeight = () => { | 
|---|
|  |  |  | return this.dom.offsetHeight; | 
|---|
|  |  |  | return this.dom?.offsetHeight; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | addObject = (object) => { | 
|---|
|  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | initScene = () => { | 
|---|
|  |  |  | const scene = new THREE.Scene(); | 
|---|
|  |  |  | // scene.background = new THREE.Color(0xf0f0f0); | 
|---|
|  |  |  | // scene.background = new THREE.Color(0x333333); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | // scene.background = new THREE.Color(0xf8f8f8); | 
|---|
|  |  |  | scene.background = new THREE.Color(0x7a7a7a); | 
|---|
|  |  |  | scene.fog = new THREE.Fog(scene.background, 1, 5000); | 
|---|
|  |  |  | 
|---|
|  |  |  | renderer.toneMapping = THREE.ACESFilmicToneMapping; | 
|---|
|  |  |  | renderer.setPixelRatio(window.devicePixelRatio); | 
|---|
|  |  |  | renderer.setSize(this.getFullWidth(), this.getFullHeight()); | 
|---|
|  |  |  | this.dom.appendChild(renderer.domElement); | 
|---|
|  |  |  | this.dom?.appendChild(renderer.domElement); | 
|---|
|  |  |  | return renderer; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | 
|---|
|  |  |  | initControls = () => { | 
|---|
|  |  |  | const controls = new OrbitControls(this.camera, this.renderer.domElement); | 
|---|
|  |  |  | // controls.enableRotate = false; // 禁用整体旋转功能 | 
|---|
|  |  |  | controls.enablePan = true; // 允许平移 | 
|---|
|  |  |  | controls.enablePan = false; // 允许平移 | 
|---|
|  |  |  | controls.enableDamping = true;   // 开启阻尼 | 
|---|
|  |  |  | controls.dampingFactor = 0.08; // 阻尼因子 | 
|---|
|  |  |  | controls.enableZoom = true; // 允许缩放 | 
|---|
|  |  |  | // controls.minDistance = 1; // 最小缩放距离 | 
|---|
|  |  |  | // controls.maxDistance = 30; // 最大缩放距离 | 
|---|
|  |  |  | controls.minPolarAngle = 0; // 最小俯仰角度(向下看) | 
|---|
|  |  |  | // controls.minPolarAngle = Math.PI / 2.1; | 
|---|
|  |  |  | controls.minPolarAngle = Math.PI / 2.1; | 
|---|
|  |  |  | controls.maxPolarAngle = Math.PI / 2.1; // 最大俯仰角度(向上看) | 
|---|
|  |  |  | controls.rotateSpeed = 0.6; // 视角移动速度减慢 | 
|---|
|  |  |  | controls.autoRotate = true; // 自动旋转 | 
|---|
|  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | initStats = () => { | 
|---|
|  |  |  | const stats = new Stats(); | 
|---|
|  |  |  | this.dom.appendChild(stats.dom); | 
|---|
|  |  |  | this.dom?.appendChild(stats.dom); | 
|---|
|  |  |  | if (!help) { | 
|---|
|  |  |  | stats.domElement.style.display = 'none'; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | 
|---|
|  |  |  | this.handleClick(objName, x, y); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | this.dom.addEventListener("click", this.handleClickEvent, false); | 
|---|
|  |  |  | this.dom?.addEventListener("click", this.handleClickEvent, false); | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | generateMesh = (fn) => { | 
|---|
|  |  |  | 
|---|
|  |  |  | break; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | rePerspective = (maxHeight, normalHeight) => { | 
|---|
|  |  |  | const height = Math.max(maxHeight, normalHeight) | 
|---|
|  |  |  | const cameraPosScale = 0.7; | 
|---|
|  |  |  | this.camera.position.set( | 
|---|
|  |  |  | -height * cameraPosScale, | 
|---|
|  |  |  | height * cameraPosScale, | 
|---|
|  |  |  | height * cameraPosScale | 
|---|
|  |  |  | ); | 
|---|
|  |  |  | this.controls.target = new THREE.Vector3(0, maxHeight * 0.53, 0); | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | destroy = () => { | 
|---|
|  |  |  | 
|---|
|  |  |  | this.controls.dispose(); | 
|---|
|  |  |  | this.controls = null; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | this.dom.removeEventListener("click", this.handleClickEvent); | 
|---|
|  |  |  | this.dom?.removeEventListener("click", this.handleClickEvent); | 
|---|
|  |  |  | this.camera = null; | 
|---|
|  |  |  | this.objects = []; | 
|---|
|  |  |  | while (this.dom?.firstChild) { | 
|---|