安装three.js
npm install three --save
或者
yarn add three
此处使用的版本
“three”: “^0.154.0”,
“vue”: “^3.2.33”,
页面引入
import * as THREE from "three";
import {OrbitControls} from "three/examples/jsm/controls/OrbitControls";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
var scene=null;
var camera=null;
var renderer=null;
var controls=null;
modelInitFun(){let _w="容器宽度";let _h="容器高度";//场景scene=new THREE.Scene();//相机camera=new THREE.PerspectiveCamera(75,_w/_h,0.1,5000);camera.position.z=50.602655301093874;camera.position.x=7.390108868949435;camera.position.y=50.123625707396773;//渲染器renderer=new THREE.WebGLRenderer({antialias:true});renderer.setClearColor('#f2f2f2');renderer.setSize(_w,_h);renderer.setAnimationLoop(this.render)//定向光源const directionalLight = new THREE.DirectionalLight(0xffffff, 10);directionalLight.position.set(10, 50, 80); // 设置光源位置scene.add(directionalLight);//添加坐标辅助scene.add(new THREE.AxesHelper(1000));let canvas=document.querySelector('.siteInspection');canvas.appendChild(renderer.domElement);controls=new OrbitControls(camera,renderer.domElement);controls.addEventListener('change',()=>{// console.log(camera.position)renderer.render(scene,camera)})// 创建DRACOLoader实例const dracoLoader = new DRACOLoader();dracoLoader.setDecoderPath('node_modules/three/examples/jsm/libs/draco/gltf/');//依赖包中Draco解码器的路径const loaderG = new GLTFLoader();loaderG.setDRACOLoader(dracoLoader);loaderG.load( '../static/2_1/2_1Floor.gltf', async function ( gltf ) {const model = gltf.scene;await renderer.compileAsync( model, camera, scene );scene.add(model);} );},render(){renderer.render(scene,camera);requestAnimationFrame(this.render)},
)
