1.安装依赖

// 比如安装148版本
npm install three@0.148.0 --save

2.使用页面引用

import * as THREE from 'three';
// 引入扩展库OrbitControls.js
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
// 引入扩展库GLTFLoader.js
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

3.实例说明代码

export default {name: 'App',data() {return {vn: 1,scene: '',geometry: '',material: '',mesh: '',camera: '',controls:'',renderer:''}},mounted() {this.scene = new THREE.Scene();this.geometry = new THREE.BoxGeometry(100, 100, 100);//创建一个材质对象Materialthis.material = new THREE.MeshBasicMaterial({color: 0xff0000,//0xff0000设置材质颜色为红色});// 两个参数分别为几何体geometry、材质materialconst mesh = new THREE.Mesh(this.geometry, this.material); //网格模型对象Mesh//设置网格模型在三维空间中的位置坐标，默认是坐标原点mesh.position.set(0, 10, 0);this.scene.add(mesh)// 实例化一个透视投影相机对象const aspect = window.innerWidth / window.innerHeight;const camera = new THREE.PerspectiveCamera(75, aspect, 0.1, 1000);//相机在Three.js三维坐标系中的位置// 根据需要设置相机位置具体值camera.position.set(200, 200, 200);camera.lookAt(mesh.position);//指向mesh对应的位置this.camera = camera// 创建渲染器对象const renderer =new THREE.WebGLRenderer({ antialias: true });renderer.setSize(window.innerWidth, window.innerHeight);this.renderer=rendererdocument.body.appendChild(renderer.domElement);// 设置相机控件轨道控制器OrbitControlsthis.controls = new OrbitControls(camera, renderer.domElement);this.animate();console.log("记载")},methods:{animate(){requestAnimationFrame(this.animate.bind(this));this.controls.update();this.renderer.render(this.scene, this.camera);}}
}
</script>

效果图