| | |
| | | } |
| | | |
| | | 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; |
| | | } |
| | | |
| | |
| | | |
| | | 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) => { |
| | | // fn(this.addObject); |
| | | const loader = new FBXLoader(); |
| | | const promise = new Promise((resolve) => { |
| | | loader.load('model/04.fbx', (mesh) => { |
| | | mesh.position.set(0, 10, 0); |
| | | mesh.scale.set(5, 5, 5); |
| | | mesh.name = '1-1-1'; |
| | | mesh.traverse(function (child) { |
| | | if (child.isMesh) { |
| | | if (child.name === '不规则') { |
| | | // child.visible = false; |
| | | child.material.color.set(0xE8B67E); |
| | | } |
| | | if (child.name === '货架') { |
| | | // child.visible = false; |
| | | child.material.color.set(0x4680BF); |
| | | } |
| | | if (child.name === '托盘') { |
| | | // child.visible = false; |
| | | child.material.color.set(0xBEBEBE); |
| | | } |
| | | child.name = '1-1-1' |
| | | child.castShadow = true; |
| | | child.receiveShadow = true; |
| | | } |
| | | }); |
| | | this.addObject(mesh); |
| | | resolve(); |
| | | }) |
| | | }) |
| | | return promise; |
| | | fn(loader, this.addObject); |
| | | } |
| | | |
| | | setNewSelectedMesh = (objName) => { |
| | |
| | | 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) { |