2d拖拽生成3d机房可视化，通过模型闪烁设备告警

预览网址jstopo.top

createCamera(THREE,scene){
    // width和height用来设置Three.js输出的Canvas画布尺寸(像素px)
    const width = this.w; //宽度
    const height = this.h; //高度
    // 实例化一个透视投影相机对象
    const camera = new THREE.PerspectiveCamera(28, width / height, 0.1, 500);
    // 正投影相机
    // const k = width / height; //canvas画布宽高比
    // const s = 200;//控制left, right, top, bottom范围大小
    // const camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 0.1, 2000);
    //相机在Three.js三维坐标系中的位置
    // 根据需要设置相机位置具体值
    camera.position.set(0, 100, 120);
    //相机观察目标指向Threejs 3D空间中某个位置
    camera.lookAt(0, 0, 0); //坐标原点
    // AxesHelper：辅助观察的坐标系
    const axesHelper = new THREE.AxesHelper(150);
    scene.add(axesHelper);
    // 设置相机控件轨道控制器OrbitControls
    this.createRender(THREE,scene,camera);
},
createRender(THREE,scene,camera){
    // 创建渲染器对象
    const canvas = this.$refs["model"];
    const renderer = new THREE.WebGLRenderer({
        canvas: canvas,
        antialias: true,
        alpha: true,
        logarithmicDepthBuffer: false
    });
    console.log("场景对象",scene);
    // const dragControls = new DragControls( scene.children, camera, renderer.domElement );
    // this.dragControls = dragControls;
    // 定义threejs输出画布的尺寸(单位:像素px)
    const width = this.w; //宽度
    const height = this.h; //高度
    renderer.setClearAlpha(0.1);
    renderer.premultipliedAlpha = true;
    renderer.setSize(width, height); //设置three.js渲染区域的尺寸(像素px)
    renderer.render(scene, camera); //执行渲染操作
    // this.$refs["model"].appendChild(renderer.domElement);
    // this.rayCasterModel(renderer,scene,THREE,camera);
    const controls = new OrbitControls(camera, renderer.domElement);
    // const clock = new THREE.Clock();
    const render=()=>{
        cancelAnimationFrame(this.timer);
        renderer.render(scene, camera); //执行渲染操作
        // this.texture.offset.x -= 0.04;
        // this.texture.offset.y +=0.01;
        scene.children.forEach(meshBox=>{//相机跟随的应用方法
            if(meshBox.name.includes("-")){
            this.updateLabel(scene, camera, meshBox.name);
            }
        })
        // this.dragControls.update();
        controls.update();
        this.timer = requestAnimationFrame(render);//请求再次执行函数render
    }
    render();
}