#

luxiaotao1123

2024-03-29 2fb2947a3b2a487d7205e106dd6bdad37493d43f

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

@@ -3,14 +3,12 @@
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
import TWEEN from '@tweenjs/tween.js';

const help = false;
const help = true;

export default class ShelfThree {

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

        this.objects = [];
    }
@@ -26,7 +24,6 @@
        initLight(this.scene);

        this.animate();
        this.build();
    }

    animate = () => {
@@ -42,6 +39,14 @@
        // Rotate the scene
        this.controls.update()
        this.controls.autoRotateSpeed = 2;
    }

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

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

    addObject = (object) => {
@@ -60,7 +65,7 @@
    }

    initCamera = () => {
        const camera = new THREE.PerspectiveCamera(70, this.fullWidth / this.fullHeight, 1, 60000);
        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 +80,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 +114,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);
    }
@@ -156,8 +161,8 @@
        }, false);
    }

    build = () => {
        buildDemo(this.scene);
    generateMesh = (fn) => {
        fn(this.scene);
    }

    handleClick = () => {
@@ -225,15 +230,4 @@
    if (help) {
        scene.add(new THREE.SpotLightHelper(spotLight));
    }
}

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