【可视化大屏-3d机房监控】Vue与three.js搭建可视化机房监控-Toy模板网

这篇具有很好参考价值的文章主要介绍了【可视化大屏-3d机房监控】Vue与three.js搭建可视化机房监控。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

vue threejs 大屏,javascript,3d,vue.js
演示网址：http://jstopo.top网站地址
3d机房地址：http://jstopo.top/threeTopo/#/monitor/index文章来源地址https://www.toymoban.com/news/detail-838190.html

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);
},