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'; const help = false; const debugCamera = { x: 100, y: 300, z: 200 } export default class ShelfThree { constructor(dom) { const { current: container } = dom; this.scene = initScene(); this.camera = initCamera(this.scene); this.renderer = initRenderer(container); this.controls = initControls(this.camera, this.renderer); windowResize(this.camera, this.renderer); initLight(this.scene); this.stats = initStats(container); this.objects = []; this.agvList = []; this.agvDataList = []; this.conveyorDataList = []; this.initRaycaster(container, this.camera, this.objects); } startup = () => { this.animate(); this.build(); } animate = () => { requestAnimationFrame(this.animate); this.render(); TWEEN.update(); } render = () => { this.renderer.shadowMap.enabled = true; this.renderer.render(this.scene, this.camera); this.stats.update(); // Rotate the scene this.controls.update() this.controls.autoRotateSpeed = 0.6; } addObject = (object) => { this.scene.add(object); this.objects.push(object); } build = () => { // 1.build floor buildFloor(this.scene); } initRaycaster = (container, camera, objects) => { const raycaster = new THREE.Raycaster(); const mouse = new THREE.Vector2(); container.addEventListener("click", (event) => { this.handleClick("null"); }) container.addEventListener("dblclick", (event) => { let x, y; if (event.changedTouches) { x = event.changedTouches[0].pageX; y = event.changedTouches[0].pageY; } else { x = event.clientX; y = event.clientY; } event.preventDefault(); mouse.x = (x / window.innerWidth) * 2 - 1; mouse.y = -(y / window.innerHeight) * 2 + 1; raycaster.setFromCamera(mouse, camera); let intersects = raycaster.intersectObjects(objects, true); if (intersects.length === 0) { this.handleClick("null"); return; } let objName = intersects[0].object.name; if (objName.startsWith("locNo")) { if (this.handleClick) { this.handleClick(objName, x, y); } } else { this.handleClick("null"); } }, false); } handleClick = () => { } }; const initScene = () => { const scene = new THREE.Scene(); // scene.background = new THREE.Color(0xf0f0f0); scene.background = new THREE.Color(0x333333); if (help) { scene.add(new THREE.AxesHelper(1000)); } return scene; } const initCamera = (scene) => { const camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 10000); camera.position.set(debugCamera.x, debugCamera.y, debugCamera.z); scene.add(camera); return camera; } const initLight = (scene) => { const directionalLight = new THREE.DirectionalLight(0xffffff, 0.6); // 光颜色,强度 directionalLight.position.set(1, 1, 1).normalize(); scene.add(directionalLight); const ambientLight = new THREE.AmbientLight(0xf0f0f0, 3); scene.add(ambientLight); const spotLight = new THREE.SpotLight(0xffffff, 8); spotLight.position.set(1617, 2500, 4022); spotLight.angle = Math.PI * 1; spotLight.decay = 0; spotLight.castShadow = true; spotLight.shadow.camera.near = 200; spotLight.shadow.camera.far = 2000; spotLight.shadow.bias = - 0.000222; spotLight.shadow.mapSize.width = 1024; spotLight.shadow.mapSize.height = 1024; const targetObject = new THREE.Object3D(); targetObject.position.set(1617, 0, 4022); spotLight.target = targetObject; scene.add(spotLight); if (help) { scene.add(new THREE.SpotLightHelper(spotLight)); } } const initRenderer = (container) => { const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); renderer.setClearAlpha(0); // renderer.useLegacyLights = false; // 旧版光源 重要 renderer.shadowMap.enabled = true; // this.renderer.shadowMap.type = THREE.BasicShadowMap; // 最低阴影 // this.renderer.toneMapping = THREE.ReinhardToneMapping; renderer.toneMapping = THREE.ACESFilmicToneMapping; renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(window.innerWidth, window.innerHeight); container.appendChild(renderer.domElement); return renderer; } const initControls = (camera, renderer) => { const controls = new OrbitControls(camera, renderer.domElement); // controls.enableRotate = false; // 禁用整体旋转功能 controls.enablePan = true; // 允许平移 controls.enableDamping = true; // 开启阻尼 controls.dampingFactor = 0.08; // 阻尼因子 controls.enableZoom = true; // 允许缩放 // controls.minDistance = 1; // 最小缩放距离 // controls.maxDistance = 30; // 最大缩放距离 controls.minPolarAngle = 0; // 最小俯仰角度(向下看) controls.maxPolarAngle = Math.PI / 2.1; // 最大俯仰角度(向上看) controls.rotateSpeed = 0.6; // 视角移动速度减慢 // controls.autoRotate = true; // 自动旋转 controls.target = new THREE.Vector3(debugCamera.x, 0, debugCamera.z) // 平替 camera的lookAt return controls; } const windowResize = (camera, renderer) => { window.addEventListener('resize', function () { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); }, false); } const initStats = (container) => { const stats = new Stats(); container.appendChild(stats.dom); if (!help) { stats.domElement.style.display = 'none'; } return stats; } const buildFloor = (scene) => { // const size = 10000; // const divisions = 100; // const helper = new THREE.GridHelper(size, divisions); // helper.position.x = size / 2; // helper.position.z = size / 2; // helper.material.opacity = 0.25; // helper.material.transparent = true; // scene.add(helper); // return helper; const width = 3500; const length = 7500; const floorGeometry = new THREE.BoxGeometry(width, 1, length); // 216为长度,10为宽度,10为高度 const floorMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff, transparent: true, opacity: 0.1, }); const floorMesh = new THREE.Mesh(floorGeometry, floorMaterial); floorMesh.position.set(width / 2, -1, length / 2); // 根据你的需求设置位置 floorMesh.name = 'floor'; scene.add(floorMesh); return floorMesh; }