#

luxiaotao1123

2024-03-28 afa59e8666c01099decc7458d78e2542ac9291cf

 zy-asrs-flow/src/pages/map/drawer/shelf/shelfThree.js

@@ -9,8 +9,6 @@

    constructor(dom) {
        this.dom = dom;
        this.fullWidth = dom.offsetWidth;
        this.fullHeight = dom.offsetHeight;

        this.objects = [];
    }
@@ -41,7 +39,15 @@
        this.stats.update();
        // Rotate the scene
        this.controls.update()
        this.controls.autoRotateSpeed = 0.6;
        this.controls.autoRotateSpeed = 2;
    }

    getFullWidth = () => {
        return this.dom.offsetWidth;
    }

    getFullHeight = () => {
        return this.dom.offsetHeight;
    }

    addObject = (object) => {
@@ -60,8 +66,8 @@
    }

    initCamera = () => {
        const camera = new THREE.PerspectiveCamera(70, this.fullWidth / this.fullHeight, 1, 60000);
        camera.position.set(200, 200, 200);
        const camera = new THREE.PerspectiveCamera(70, this.getFullWidth() / this.getFullHeight(), 1, 60000);
        camera.position.set(-300, 300, 300);
        this.scene.add(camera);
        return camera;
    }
@@ -75,7 +81,7 @@
        // this.renderer.toneMapping = THREE.ReinhardToneMapping;
        renderer.toneMapping = THREE.ACESFilmicToneMapping;
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(this.fullWidth, this.fullHeight);
        renderer.setSize(this.getFullWidth(), this.getFullHeight());
        this.dom.appendChild(renderer.domElement);
        return renderer;
    }
@@ -109,9 +115,9 @@

    windowResize = () => {
        this.resizeHandler = () => {
            this.camera.aspect = this.fullWidth / this.fullHeight;
            this.camera.aspect = this.getFullWidth() / this.getFullHeight();
            this.camera.updateProjectionMatrix();
            this.renderer.setSize(this.fullWidth, this.fullHeight);
            this.renderer.setSize(this.getFullWidth(), this.getFullHeight());
        };
        window.addEventListener('resize', this.resizeHandler, false);
    }
@@ -167,23 +173,50 @@
    destroy = () => {
        cancelAnimationFrame(this.animationFrame);
        window.removeEventListener('resize', this.resizeHandler);
        this.renderer.dispose();
        this.controls.dispose();
        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();
            this.renderer.context = null;
            this.renderer.domElement = null;
            this.renderer = null;
        }
        if (this.controls) {
            this.controls.dispose();
            this.controls = null;
        }
        this.camera = null;
        this.objects = [];
        while (this.dom?.firstChild) {
            this.dom.removeChild(this.dom.firstChild);
        }
    }

    removeEntity = (object) => {
        if (object.material) object.material.dispose();
        if (object.geometry) object.geometry.dispose();
        if (object.texture) object.texture.dispose();
        this.scene.remove(object);
    }
};

const initLight = (scene) => {
    const directionalLight = new THREE.DirectionalLight(0xffffff, 0.6); // 光颜色，强度
    directionalLight.position.set(1, 1, 1).normalize();
    const directionalLight = new THREE.DirectionalLight(0xffffff, 8);
    directionalLight.position.set(-300, 300, 300);
    scene.add(directionalLight);

    const ambientLight = new THREE.AmbientLight(0xf0f0f0, 3);
    const ambientLight = new THREE.AmbientLight(0xf0f0f0, 8);
    scene.add(ambientLight);

    const spotLight = new THREE.SpotLight(0xffffff, 8);
    spotLight.position.set(0, 1000, 0);
    spotLight.position.set(-300, 300, 0);
    spotLight.angle = Math.PI / 4;  // 角度
    spotLight.distance = 1500;  // 距离
    spotLight.distance = 800;  // 距离
    spotLight.decay = 0;    // 光衰
    // 光照阴影及其生效范围
    spotLight.castShadow = true;
@@ -202,7 +235,9 @@

const buildDemo = (scene) => {
    const boxGeometry = new THREE.BoxGeometry(100, 100, 100);
    const boxMaterial = new THREE.MeshBasicMaterial({ color: 0x40739e });
    const boxMaterial = new THREE.MeshStandardMaterial({
        color: '#222f3e',
    });
    const boxMesh = new THREE.Mesh(boxGeometry, boxMaterial);
    boxMesh.position.set(0, 0, 0);
    scene.add(boxMesh)