Vue与three.js搭建可视化3d机房监控系统平台

网站地址：jstopo.top 3d机房地址：jstopo.top/threeTopo/#…

import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader.js';
mounted(){
    this.createScene();
},
createScene(){
   // 创建3D场景对象Scene
   const scene = new THREE.Scene();
   //环境光:没有特定方向，整体改变场景的光照明暗
   const ambient = new THREE.AmbientLight(0xffffff, 0.35);
   scene.add(ambient);
   // 从上方照射的白色平行光，强度为 0.5
   const pointLight = new THREE.PointLight(0xffffff, 0.8, 0, 3);
   pointLight.position.set(0, 350, 130);
   scene.add(pointLight);
}
//加载外部设计的模型
loaderObjMtlStl(scene){
	const loaderObj = new OBJLoader();
	const mtlLoader = new MTLLoader();
	mtlLoader.load("/static/model/camera.mtl",(resMtl)=>{
    	resMtl.preload();
    	loaderObj.setMaterials(resMtl);
    	loaderObj.load("/static/model/camera_left.obj",(object)=>{
        	object.position.set(-67, 20, 30);object.scale.setScalar( 0.01 );
        	object.name = "长方形摄像头";
        	scene.add(object);
    })
})
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, 1000);
    // 根据需要设置相机位置具体值
    camera.position.set(200, 200, 200);
    //相机观察目标指向Threejs 3D空间中某个位置
    camera.lookAt(0, 0, 0); //坐标原点
    // AxesHelper：辅助观察的坐标系
    const axesHelper = new THREE.AxesHelper(150);
    scene.add(axesHelper);
    // 设置相机控件轨道控制器OrbitControls
    this.createRender(THREE,scene,camera);
     // 创建渲染器对象
    const renderer = new THREE.WebGLRenderer({
    	antialias: true,
    	alpha: true
    	});
    // 定义threejs输出画布的尺寸(单位:像素px)
    const width = this.w; //宽度
    const height = this.h; //高度
    renderer.setClearAlpha(0);
    renderer.setSize(width, height); //设置three.js渲染区域的尺寸(像素px)
    renderer.render(scene, camera); //执行渲染操作
    this.$refs["model"].appendChild(renderer.domElement);
},