import * as THREE from 'three'; import { animateCamera, getTextCanvas, renderVideo } from '/@/utils/threejs/util'; import UseThree from '../../../../hooks/core/threejs/useThree'; import lmWindRect from './longmen.threejs'; import zdWindRect from './zhedie.threejs'; import dsWindRect from './duishe.threejs'; import gsap from 'gsap'; import * as dat from 'dat.gui'; // const gui = new dat.GUI(); // 模型对象、 文字对象 let model, // group, lmWindRectObj, zdWindRectObj, dsWindRectObj, windRectType = 'lmWindRect'; // 打灯光 const addLight = () => { // if (windRectType === 'lmWindRect') { // lmWindRectObj.addLight.call(lmWindRectObj); // } else if (windRectType === 'zdWindRect') { // zdWindRectObj.addLight.call(zdWindRectObj); // } else if (windRectType === 'dsWindRect') { // dsWindRectObj.addLight.call(dsWindRectObj); // } const pointLight2 = new THREE.PointLight(0xffeeee, 1, 0); pointLight2.position.set(317, 41, -21); pointLight2.shadow.bias = 0.05; model.scene.add(pointLight2); // const pointLight3 = new THREE.PointLight(0xffffff, 1, 138); pointLight3.position.set(-202, 50, 27.8); pointLight3.shadow.bias = 0.05; model.scene.add(pointLight3); // const pointLight4 = new THREE.PointLight(0xffeeee, 1, 162); pointLight4.position.set(83, 62, -14); pointLight4.shadow.bias = 0.05; model.scene.add(pointLight4); // const pointLight5 = new THREE.PointLight(0xffffff, 0.8, 176); pointLight5.position.set(-123, 61.6, -18); pointLight5.shadow.bias = 0.05; model.scene.add(pointLight5); // const pointLight6 = new THREE.PointLight(0xffffff, 1.5, 64); pointLight6.position.set(-76, 48, 18); pointLight6.shadow.bias = 0.05; model.scene.add(pointLight6); const pointLight7 = new THREE.PointLight(0xffffff, 1, 302); pointLight7.position.set(-220, -177, -3.5); pointLight7.shadow.bias = -0.05; model.scene.add(pointLight7); const spotLight = new THREE.SpotLight(); spotLight.angle = Math.PI / 16; spotLight.penumbra = 0; spotLight.castShadow = true; spotLight.distance = 0; spotLight.position.set(-470, -500, 500); model.scene.add(spotLight); spotLight.shadow.camera.near = 0.5; // default spotLight.shadow.camera.far = 1000; // default spotLight.shadow.focus = 1; spotLight.shadow.bias = -0.000002; }; // 重置摄像头 const resetCamera = () => { model.camera.position.set(0, 0, 500); model.camera.rotation.set(-27.88, 14.35, 7.47); model.orbitControls?.update(); model.camera.updateProjectionMatrix(); }; // 初始化左右摇摆动画 const startAnimation = () => { // 定义鼠标点击事件 model.canvasContainer?.addEventListener('mousedown', mouseEvent.bind(null)); model.canvasContainer?.addEventListener('pointerup', (event) => { event.stopPropagation(); // 单道、 双道 if (windRectType === 'lmWindRect') { lmWindRectObj.mouseUpModel.call(lmWindRectObj); } else if (windRectType === 'zdWindRect') { zdWindRectObj.mouseUpModel.call(zdWindRectObj); } else if (windRectType === 'dsWindRect') { dsWindRectObj.mouseUpModel.call(dsWindRectObj); } }); }; // 鼠标点击、松开事件 const mouseEvent = (event) => { event.stopPropagation(); // 将鼠标位置归一化为设备坐标。x 和 y 方向的取值范围是 (-1 to +1) model.mouse.x = ((event.clientX - model.canvasContainer.getBoundingClientRect().left) / model.canvasContainer.clientWidth) * 2 - 1; model.mouse.y = -((event.clientY - model.canvasContainer.getBoundingClientRect().top) / model.canvasContainer.clientHeight) * 2 + 1; (model.rayCaster as THREE.Raycaster).setFromCamera(model.mouse, model.camera as THREE.Camera); if (group) { const intersects = model.rayCaster?.intersectObjects(group.children, false) as THREE.Intersection[]; if (intersects.length > 0) { // 单道、 双道 if (windRectType === 'lmWindRect') { lmWindRectObj.mousedownModel.call(lmWindRectObj, intersects); } else if (windRectType === 'zdWindRect') { zdWindRectObj.mousedownModel.call(zdWindRectObj, intersects); } else if (windRectType === 'dsWindRect') { dsWindRectObj.mousedownModel.call(dsWindRectObj, intersects); } } } }; /* 添加监控数据 */ export const addFmText = (selectData) => { if (windRectType === 'lmWindRect') { return lmWindRectObj.addFmText.call(lmWindRectObj, selectData); } else if (windRectType === 'zdWindRect') { return zdWindRectObj.addFmText.call(zdWindRectObj, selectData); } else if (windRectType === 'dsWindRect') { return dsWindRectObj.addFmText.call(dsWindRectObj, selectData); } }; export const play = (flag) => { if (windRectType === 'lmWindRect') { return lmWindRectObj.play.call(lmWindRectObj, flag); } else if (windRectType === 'zdWindRect') { return zdWindRectObj.play.call(zdWindRectObj, flag); } else if (windRectType === 'dsWindRect') { return dsWindRectObj.play.call(dsWindRectObj, flag); } }; // 切换风窗类型 export const setModelType = (type) => { windRectType = type; model.camera.position.set(-1000, 100, 500); return new Promise((resolve) => { // 显示双道风窗 if (windRectType === 'lmWindRect') { model.startAnimation = lmWindRectObj.render.bind(lmWindRectObj); group = lmWindRectObj.group; if (model.scene.getObjectByName('zdcf')) { model.scene.remove(zdWindRectObj.group); } if (model.scene.getObjectByName('dscf')) { model.scene.remove(dsWindRectObj.group); } const oldCameraPosition = { x: -1000, y: 100, z: 500 }; model.scene.add(lmWindRectObj.group); setTimeout(async () => { resolve(null); const position = lmWindRectObj.group.position; await animateCamera( oldCameraPosition, oldCameraPosition, { x: 46.257, y: 57.539, z: 94.313 }, { x: position.x, y: position.y, z: position.z }, model, 0.8 ); }, 300); } else if (windRectType === 'zdWindRect') { model.startAnimation = zdWindRectObj.render.bind(zdWindRectObj); group = zdWindRectObj.group; if (model.scene.getObjectByName('lmcf')) { model.scene.remove(lmWindRectObj.group); } if (model.scene.getObjectByName('dscf')) { model.scene.remove(dsWindRectObj.group); } model.scene.add(zdWindRectObj.group); const oldCameraPosition = { x: -1000, y: 100, z: 500 }; setTimeout(async () => { resolve(null); const position = zdWindRectObj.group.position; await animateCamera( oldCameraPosition, oldCameraPosition, { x: 66.257, y: 57.539, z: 104.313 }, { x: position.x, y: position.y, z: position.z }, model, 0.8 ); }, 300); } else if (windRectType === 'dsWindRect') { model.startAnimation = dsWindRectObj.render.bind(dsWindRectObj); group = dsWindRectObj.group; if (model.scene.getObjectByName('lmcf')) { model.scene.remove(lmWindRectObj.group); } if (model.scene.getObjectByName('zdcf')) { model.scene.remove(zdWindRectObj.group); } model.scene.add(dsWindRectObj.group); setTimeout(async () => { resolve(null); const position = dsWindRectObj.group.position; const oldCameraPosition = { x: -1020, y: 100, z: 500 }; await animateCamera( oldCameraPosition, oldCameraPosition, { x: 46.257, y: 57.539, z: 104.313 }, { x: position.x, y: position.y, z: position.z }, model, 0.8 ); }, 300); } }); }; export const mountedThree = (playerVal1, playerVal2) => { return new Promise(async (resolve) => { model = new UseThree('#window3D'); model.setEnvMap('test1'); model.renderer.toneMappingExposure = 0.8; addLight(); lmWindRectObj = new lmWindRect(model, playerVal1, playerVal2); await lmWindRectObj.mountedThree(); zdWindRectObj = new zdWindRect(model, playerVal1); await zdWindRectObj.mountedThree(); dsWindRectObj = new dsWindRect(model, playerVal1); await dsWindRectObj.mountedThree(); resolve(null); model.animate(); startAnimation(); }); }; export const destroy = () => { if (model) { lmWindRectObj?.destroy(); zdWindRectObj?.destroy(); zdWindRectObj?.destroy(); model.deleteModal(); model = null; group = null; } };