如何将three接入vue项目中呢？
npm install three -S
index.html
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<style>
html,body {
width:100%;
height:100%;
padding: 0;
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<noscript>
</noscript>
<div id="app">
</div>
</body>
</html>
App.vue
<template>
<div id="app">
<home></home>
</div>
</template>
<script>
import Home from './components/home.vue'
export default {
name: 'App',
components: {
Home
}
}
</script>
<style>
#app {
width:100%;
height:100%;
}
</style>
home.vue
<template>
<div class="main" ref="container">
</div>
</template>
<script>
import * as THREE from "three";
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js';
export default {
name: 'Home',
data(){
return {
cont: null,
camera: null,
scene: null,
mesh: null,
renderer: null,
}
},
mounted(){
this.cont = this.$refs.container;
this.init();
this.animate();
window.onresize = ()=>{
this.camera.aspect = this.cont.clientWidth / this.cont.clientHeight;
this.camera.updateProjectionMatrix();
this.renderer.setSize( this.cont.clientWidth, this.cont.clientHeight, true);
}
},
methods:{
init(){
this.scene = new THREE.Scene();
var axes = new THREE.AxesHelper(50);//50表示xyz轴的长度，红:x,绿:y,蓝:z
this.scene.add(axes);
var geometry = new THREE.BoxGeometry(20, 20, 20);
var material = new THREE.MeshLambertMaterial({
color: 0xffff00
});
//合成对象
this.mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
this.mesh.position.set(10, 10, 10);
this.scene.add(this.mesh); //网格模型添加到场景中
var point = new THREE.PointLight(0xffffff);
point.position.set(0, 0, 100); //点光源位置
this.scene.add(point); //点光源添加到场景中
this.camera = new THREE.PerspectiveCamera(45, this.cont.clientWidth / this.cont.clientHeight, 0.1, 1000);
this.camera.position.set(50, 50, 50); //设置相机的位置
this.camera.lookAt(new THREE.Vector3(0,0,0)); //设置相机拍摄的方向，看向原点位置
this.renderer = new THREE.WebGLRenderer({ antialias: true });
this.renderer.setSize(this.cont.clientWidth, this.cont.clientHeight, true);//设置渲染区域尺寸
this.renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
this.cont.appendChild(this.renderer.domElement);
new OrbitControls(this.camera, this.renderer.domElement);
},
animate(){
this.renderer.render(this.scene, this.camera);//渲染必须有场景和相机两个对象
this.mesh.rotateY(0.01);
requestAnimationFrame(this.animate);//递归调用
}
}
}
</script>
<style scoped>
.main{
width:100%;
height:100%;
}
</style>
scene.gif
网友评论