Threejs官方教程
1.Vue引入ThreeJS
近期项目需要做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'
import * as Three from "three";
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import { ConvexGeometry } from 'three/examples/jsm/geometries/ConvexGeometry.js'
import {BufferGeometryUtils} from 'three/examples/jsm/utils/BufferGeometryUtils.js'
// import { OBJLoader, MTLLoader } from 'three-obj-mtl-loader'
import {OBJLoader} from 'three/examples/jsm/loaders/OBJLoader.js';
import {MTLLoader} from 'three/examples/jsm/loaders/MTLLoader.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项目，并在浏览器中查看当前效果：
