1.首先利用npm安装three.js,具体操作代码如下:
npm install three
2.接下来利用npm安装轨道控件插件:
npm install three-orbit-controls
3.接下来安装加载.obj和.mtl文件的插件:
npm i --save three-obj-mtl-loader
4.安装渲染器插件:
npm i --save three-css2drender
安装好以后,在页面中引入three.js并使用,在所调用页面引入的代码为:
import * as Three from 'three'
代码如下
<!-- -->
<template>
<div id="container">123</div>
</template>
<script>
let scene = null,
camera=null,
renderer=null,
mesh=null
import * as Three from 'three'
import {
defineComponent, onMounted, reactive, toRefs} from 'vue';
export default defineComponent({
setup () {
console.log(Three)
const state = reactive({
})
const init = () =>{
let container = document.getElementById('container');
camera = new Three.PerspectiveCamera(70, container.clientWidth/container.clientHeight, 0.01, 10);
camera.position.z = 1
scene = new Three.Scene()
let geometry = new Three.BoxGeometry(0.2, 0.2, 0.2);
let material = new Three.MeshNormalMaterial();
mesh = new Three.Mesh(geometry, material);
scene.add(mesh);
renderer = new Three.WebGLRenderer({
antialias:true});
renderer.setSize(container.clientWidth,container.clientHeight);
container.appendChild(renderer.domElement);
}
const animate = () =>{
requestAnimationFrame(animate);
mesh.rotation.x += 0.01;
mesh.rotation.y += 0.02;
renderer.render(scene,camera);
}
onMounted(()=>{
init()
animate()
})
return {
...toRefs(state)
};
},
})
</script>
<style lang='less' scoped>
@import url(./style.less);
</style>