一直想搞一下Threejs，并希望能够用到Vue-cli中配合着vue开发，今天结合网上的知识和Threejs的书籍写一个如下demo，作为第一次编写入门，也希望对大家有所帮助！
源码：my3dtest: 我的前端测试仓库！使用Vue和Threejs来娱乐3D
1.首先创建vue项目
命令： vue init webpack my3dtest? ? //my3dtest是项目名，可修改
2.引入three包
npm install --save three?
3.demo 效果
?
4.代码实现：My3D001.vue
<template>
<div>
<div id="container"></div>
</div>
</template>
<script>
import * as THREE from "three";
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js';
export default {
name: "My3D001",
data(){
return{
camera:null,
scene:null,
renderer:null,
mesh:null,
controls:null
}
},
mounted() {
this.init();
this.animate()
},
methods:{
init(){
//创建场景对象Scene
this.scene = new THREE.Scene();
//创建网格模型 并设置其参数和材质
let geometry = new THREE.BoxGeometry(0.2,0.2,0.2);
let material = new THREE.MeshNormalMaterial({
color:0x0000ff
});
this.mesh = new THREE.Mesh(geometry,material);
//将创建的网格添加到场景中
this.scene.add(this.mesh);
//创建点光源
var point = new THREE.PointLight(0xffffff);
point.position.set(400,200,300);
this.scene.add(point);
//创建环境光
var anbient = new THREE.AmbientLight(0x444444);
this.scene.add(anbient);
//相机设置
let container = document.getElementById("container");
this.camera = new THREE.PerspectiveCamera(
70,
container.clientWidth /container.clientHeight,
0.01,//三维场景显示范围控制系数，系数越大，显示的范围越大
10);
this.camera.position.z = 1;
/**
* 创建渲染器
*/
this.renderer = new THREE.WebGL1Renderer({antialias:true});
this.renderer.setSize(container.clientWidth,container.clientHeight);//设置渲染区域尺寸
this.renderer.setClearColor(0xb9d3ff,1);//设置背景颜色
container.appendChild(this.renderer.domElement);//将渲染器绑定到div标签
//创建控件对象
this.controls = new OrbitControls(this.camera,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);
}
}
}
</script>
<style scoped>
#container{
position: absolute;
width: 100%;
height: 100%;
}
</style>
在路由文件里修改路由：
import Vue from 'vue'
import Router from 'vue-router'
import My3D001 from '../views/My3D001'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'My3D001',
component: My3D001,
}
]
})
?自己创建的两个群，一个是做3D及机器人方面的（包括算法图像处理，以及三维模型生成,机器人开发等），另一个是元宇宙：技术站群，两个群都是为了交流技术的，禁止乱发广告。
