import * as THREE from 'three'; import Stats from 'three/addons/libs/stats.module.js'; import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'; import TWEEN from '@tweenjs/tween.js'; import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader'; const help = false; export default class AgvThree { constructor(dom) { this.dom = dom; this.objects = []; this.handleClick = null; } startup = () => { this.scene = this.initScene(); this.camera = this.initCamera(); this.renderer = this.initRenderer(); this.controls = this.initControls(); this.stats = this.initStats(); this.initLight(); this.windowResize(); this.animate(); } animate = () => { this.animationFrame = requestAnimationFrame(this.animate); this.render(); TWEEN.update(); } render = () => { this.renderer.render(this.scene, this.camera); this.stats.update(); this.controls.update(); } getFullWidth = () => { return this.dom?.offsetWidth || window.innerWidth; } getFullHeight = () => { return this.dom?.offsetHeight || window.innerHeight; } addObject = (object) => { this.scene?.add(object); this.objects?.push(object); } initScene = () => { const scene = new THREE.Scene(); scene.background = new THREE.Color(0x323232); scene.fog = new THREE.Fog(scene.background, 1, 5000); if (help) { scene.add(new THREE.AxesHelper(1000)); } return scene; } initCamera = () => { const camera = new THREE.PerspectiveCamera(70, this.getFullWidth() / this.getFullHeight(), 1, 60000); camera.position.set(-400, 400, 400); return camera; } initRenderer = () => { const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); renderer.setClearAlpha(0); renderer.shadowMap.enabled = true; renderer.toneMapping = THREE.ACESFilmicToneMapping; renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); renderer.setSize(this.getFullWidth(), this.getFullHeight()); this.dom?.appendChild(renderer.domElement); return renderer; } initControls = () => { const controls = new OrbitControls(this.camera, this.renderer.domElement); controls.enablePan = false; controls.enableDamping = true; controls.dampingFactor = 0.08; controls.enableZoom = true; controls.minPolarAngle = Math.PI / 2.1; controls.maxPolarAngle = Math.PI / 2.1; controls.rotateSpeed = 0.6; controls.autoRotate = true; controls.autoRotateSpeed = 2; controls.target = new THREE.Vector3(0, 250, 0); return controls; } initStats = () => { const stats = new Stats(); this.dom?.appendChild(stats.dom); if (!help) { stats.domElement.style.display = 'none'; } return stats; } initLight = () => { const hemiLight = new THREE.HemisphereLight(0xffffff, 0xffffff, 6); hemiLight.color.setHSL(0.6, 1, 0.6); hemiLight.groundColor.setHSL(0.095, 1, 0.75); hemiLight.position.set(0, 1500, 0); this.scene.add(hemiLight); const dirLight = new THREE.DirectionalLight(0xffffff, 2.5); dirLight.color.setHSL(0.1, 1, 0.95); dirLight.position.set(-10, 10, 10); dirLight.position.multiplyScalar(30); this.scene.add(dirLight); const dirLight1 = new THREE.DirectionalLight(0xffffff, 2.5); dirLight1.color.setHSL(0.1, 1, 0.95); dirLight1.position.set(10, 10, -10); dirLight1.position.multiplyScalar(30); this.scene.add(dirLight1); } generateMesh = (fn) => { const loader = new FBXLoader(); fn(loader, this.addObject); } 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); } windowResize = () => { this.resizeHandler = () => { this.camera.aspect = this.getFullWidth() / this.getFullHeight(); this.camera.updateProjectionMatrix(); this.renderer.setSize(this.getFullWidth(), this.getFullHeight()); }; window.addEventListener('resize', this.resizeHandler, false); } destroy = () => { cancelAnimationFrame(this.animationFrame); window.removeEventListener('resize', this.resizeHandler); if (this.scene) { while (this.scene.children.length > 0) { this.removeEntity(this.scene.children[0]); } this.scene = null; } if (this.renderer) { this.renderer.dispose(); this.renderer.forceContextLoss(); if (this.dom && this.renderer.domElement && this.dom.contains(this.renderer.domElement)) { try { this.dom.removeChild(this.renderer.domElement); } catch (error) { console.warn('Failed to remove renderer.domElement:', error); } } this.renderer = null; } if (this.controls) { this.controls.dispose(); this.controls = null; } if (this.stats && this.stats.domElement && this.dom.contains(this.stats.domElement)) { try { this.dom.removeChild(this.stats.domElement); } catch (error) { console.warn('Failed to remove stats.domElement:', error); } } this.camera = null; this.objects = []; } removeEntity = (object) => { if (object.material) object.material.dispose(); if (object.geometry) object.geometry.dispose(); this.scene.remove(object); } }