在vue中使用threejs，建3D图

前言： 记录在vue中使用threejs步骤：

一、安装

npm install three --save

安装完成如下图：

二、 引入

// 引入threejs核心模块
import * as THREE from "three"
// 引入OrbitControls
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
// 引入FBXLoader
// import { FBXLoader } from "three/examples/jsm/loaders/FBXLoader"
// 引入GLTFLoader
// import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader"

需要引入模块儿不知道路径可以在node_modules去找到three -> examples -> jsm中去寻找。js目录下放的是非模块化的js文件，直接用script src去引入的。jsm目录下放的是模块化的文件。按需去引入即可

三、 创建场景
<

template>
<div class="webgl-container">
<div id="webglDom"
ref="webglDom"></div>
</div>
</template>

<script>
// 引入threejs核心模块
import * as THREE from "three"
// 引入OrbitControls
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
// 引入FBXLoader
// import { FBXLoader } from "three/examples/jsm/loaders/FBXLoader"
// 引入GLTFLoader
// import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader"
export default {
name: 'ThreePage',
data () {
return {
scene: null,
camera: null,
renderer: null,
textloader: null,
width: 0,
height: 0,
}
},
watch: {
skyType () {
this.addSkeyBox();
}
},
mounted () {
this.$nextTick(this.init);
},
methods: {
init () {
// 初始化画布宽高
const container = this.$refs.webglDom;
this.width = container.offsetWidth;
this.height = container.offsetHeight;

// 场景
this.scene = new THREE.Scene();
this.scene.fog = new THREE.Fog(0x005577, 1, 2800)
this.textloader = new THREE.TextureLoader();

// 相机
this.camera = new THREE.PerspectiveCamera(45, this.width / this.height, 0.01, 10000);
this.camera.position.set(860, 470, 720);
this.add(this.camera);
this.camera.lookAt(this.scene.position);

// AxesHelper
let axisHelper = new THREE.AxesHelper(100, 100);
this.add(axisHelper);

// 添加灯光
this.addLight();
this.addBox();

// 渲染器
this.renderer = new THREE.WebGLRenderer({
antialias: true
})
this.renderer.setClearColor(new THREE.Color('#000000'), 1);
this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
this.renderer.setSize(this.width, this.height);
document.getElementById("webglDom").appendChild(this.renderer.domElement);

// OrbitControls
new OrbitControls(this.camera, this.renderer.domElement);
this.render();
},

addBox () {
const geometry = new THREE.BoxBufferGeometry(300, 300, 300);
const material = new THREE.MeshPhongMaterial({
color: 0xff0000
});
const mesh = new THREE.Mesh(geometry, material);
this.add(mesh);
},

addLight () {
// 环境光
const light = new THREE.AmbientLight(0xffffff, 0.5); // soft white light
this.add(light);

// // 平行光源
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(200, 600, 200);
this.add(directionalLight);
},
add (obj) {
this.scene.add(obj);
},
render () {
this.renderer.render(this.scene, this.camera);
requestAnimationFrame(this.render);
}
}

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#webglDom,
.webgl-container {
width: 100%;
height: 100%;
overflow: hidden;
}
</style>

四、 效果图