import * as THREE from 'three'; // import * as dat from 'dat.gui'; // const gui = new dat.GUI(); // gui.domElement.style = 'position:absolute;top:100px;left:10px;z-index:99999999999999'; class ChamberBase { model; modelName = 'chamber'; group: THREE.Object3D | null = null; constructor(model) { this.model = model; } addLight() { const directionalLight = new THREE.DirectionalLight(0xffffff, 1.2); directionalLight.position.set(-0.8, 23, 3.9); this.group?.add(directionalLight); directionalLight.target = this.group as THREE.Object3D; // gui.add(directionalLight.position, 'x', -10, 20).onChange(function (value) { // directionalLight.position.x = Number(value); // _this.render(); // }); // gui.add(directionalLight.position, 'y', -50, 50).onChange(function (value) { // directionalLight.position.y = Number(value); // _this.render(); // }); // gui.add(directionalLight.position, 'z', -20, 20).onChange(function (value) { // directionalLight.position.z = Number(value); // _this.render(); // }); // gui.add(spotLight.position, 'x', -600, 600).onChange(function (value) { // spotLight.position.x = Number(value); // _this.render(); // }); // gui.add(spotLight.position, 'y', -600, 800).onChange(function (value) { // spotLight.position.y = Number(value); // _this.render(); // }); // gui.add(spotLight.position, 'z', -500, 1000).onChange(function (value) { // spotLight.position.z = Number(value); // _this.render(); // }); } mountedThree() { return new Promise((resolve) => { this.model.setGLTFModel([this.modelName]).then((gltf) => { this.group = gltf[0]; if (this.group) { this.group?.scale.set(0.1, 0.1, 0.1); this.group.position.y += 40; resolve(null); this.addLight(); } }); }); } destroy() { this.model.clearGroup(this.group); this.model = null; this.group = null; } } export default ChamberBase;