近期项目需要做3D效果,因为以前没做过,所以准备学习Three.js来完成项目需求,
可是找了很多地方都只有很少的一些在Vue中使用three.js的文章
经过自己的整理,将详细步骤分享给大家
1.首先利用npm安装three.js,具体操作代码如下:
npm install three
若安装了淘宝镜像,则操作命令为:
cnpm 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'
主要插件都已经安装完成了,接下来可以实现一个demo,测试three.js是否引入成功。页面测试代码如下:
<template>
<div>
<div id="container"></div>
</div>
</template>
<script>
import * as Three from "three";
export default {
name: "ThreeTest",
data() {
return {
camera: null,
scene: null,
renderer: null,
mesh: null,
};
},
methods: {
init() {
let container = document.getElementById("container");
this.camera = new Three.PerspectiveCamera(
70,
container.clientWidth / container.clientHeight,
0.01,
1000
);
this.camera.position.z = 0.6;
this.scene = new Three.Scene();
let geometry = new Three.CylinderBufferGeometry(0.2, 0.2, 0.2);
let material = new Three.MeshNormalMaterial();
this.mesh = new Three.Mesh(geometry, material);
this.scene.add(this.mesh);
this.renderer = new Three.WebGLRenderer({ antialias: true });
this.renderer.setSize(container.clientWidth, container.clientHeight);
container.appendChild(this.renderer.domElement);
},
animate() {
requestAnimationFrame(this.animate);
this.mesh.rotation.x += 0.01;
this.mesh.rotation.y += 0.02;
this.renderer.render(this.scene, this.camera);
},
},
mounted() {
this.init();
this.animate();
},
};
</script>
<style scoped>
#container {
height: 400px;
}
</style>
注意相关变量的定义容器大小的定义,接下来可以运行当前vue项目,并在浏览器中查看当前效果:
更多推荐
在Vue中使用three.js
发布评论