IronTowerCorrect/core/Scene3d.js

import PanoWireframe from './PanoWireframe.js'

var renderer, camera, scene, controls;
var cameraDefault = new THREE.Vector3(0, 0, 0.001);
var lookAtPoint = new THREE.Vector3(0, 0, 0);

export default class Scene3d {
    constructor(options) {
        this.dom = options.dom
        this.width = options.width
        this.height = options.height
        this.sceneCode = options.sceneCode

        /**
         * 初始化渲染器
         */
        function initRenderer() {
            renderer = new THREE.WebGLRenderer({antialias: true});
            renderer.setClearColor(0x333333, 1);
            renderer.setSize(options.width, options.height);
            renderer.shadowMap.enabled = true;
            renderer.shadowMap.type = THREE.PCFSoftShadowMap;
            options.dom.appendChild( renderer.domElement );
        }
        initRenderer()

        /**
         * 初始化场景
         */
        function initScene() {
            scene = new THREE.Scene();
        }
        initScene()

        /**
         * 初始化相机
         */
        function initCamera() {
            camera = new THREE.PerspectiveCamera(90, options.width / options.height, 0.01, 1000);
            camera.position.set(cameraDefault.x, cameraDefault.y, cameraDefault.z);
            camera.lookAt(lookAtPoint);
        }
        initCamera()

         /**
         * 初始化控制器
         */
        function initControls() {
            controls = new THREE.OrbitControls( camera, renderer.domElement );
            controls.rotateSpeed = 2.0;     // 旋转速度
            controls.zoomSpeed = 1.2;       // 缩放速度
            controls.panSpeed = 0.8;        // 平controls
            controls.staticMoving = true;   // 静止移动，为 true 则没有惯性
            controls.dynamicDampingFactor = 0.3;    // 阻尼系数 越小 则滑动越大
            controls.saveState()
        }
        initControls()
        
        
        const geometry = new THREE.SphereGeometry( 30, 32, 16 );
        const material = new THREE.MeshBasicMaterial( { side: 2 } );
        this.sky = new THREE.Mesh( geometry, material );
        this.sky.scale.x = -1
        scene.add( this.sky );

        this.panoWireframe = new PanoWireframe(scene, this.sceneCode)


        function animate() {
            renderer.render(scene, camera);
            controls.update();
            requestAnimationFrame(animate);
        }
        animate();
    }

    async load(panoId) {
        let texture = new THREE.TextureLoader().load(`https://4dkk.4dage.com/scene_view_data/${this.sceneCode}/images/pan/high/${panoId}.jpg`)
        this.sky.material.map = texture
        this.sky.material.needsUpdate = true

        this.panoWireframe.clearAll()
        let labels = await this.panoWireframe.load(panoId)
        return labels
    }
}