前言
由于本文介绍的是Vue + Three.js,所以首先我们肯定需要下载依赖包,一般地执行npm install three -s即可,可根据需求加装其他依赖包(新版本中不需要这些):
安装轨道控件插件:npm install three-orbit-controls
安装加载.obj和.mtl文件的插件:npm i --save three-obj-mtl-loader
安装渲染器插件:npm i --save three-css2drender
官方文档:https://threejs.org/docs/index.html#manual/zh/introduction/Creating-a-scene
一个场景的基本要素
1、场景(scene):这里的场景可以理解为一个三维的虚拟环境,当代码执行完var scene = new THREE.Scene();的时候,也就是说浏览器提供了一个等待填充虚拟环境。
2、相机(camera):上面说浏览器提供了一个虚拟环境,当我们向里面填充物体时,scene.add( 物体对象A );这个虚拟环境就有了这个虚拟物体A,但是我们看不见。而camera就充当我们眼睛的作用,将它看到的信息传递给我们。当执行完var camera = new THREE.PerspectiveCamera( 75, w / h, 0.1, 1000 );之后,scene里面就是在坐标(0,0,0)处就建立了一个camera。
3、渲染器(renderer):不管是scene还是camera,他们都是数据虚拟出来的,而renderer的作用就是将camera所“看见”的信息完整的渲染到界面上,从而给我们一个视觉上的三维冲击;camera的作用是眼睛的话,而renderer就是将“眼睛”在虚拟的三维世界里看到的信息显示在浏览器上面。renderer.render( scene, camera );
搭建第一个场景
<template>
<div class="main-view">
<div id="demo1" style="width: 100%;height: 100%"></div>
</div>
</template>
<script>
import * as THREE from 'three' // 引入three
export default {
data () {
return {
camera:null,
scene:null,
renderer:null,
mesh:null
}
},
methods:{
init(){
let container=document.getElementById('demo1')
this.camera=new THREE.PerspectiveCamera(70,container.clientWidth/container.clientHeight,0.01,10)
this.camera.position.z=0.6
this.scene=new THREE.Scene()
let geometry=new THREE.BoxGeometry(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)
this.mesh.rotation.x+=45
this.mesh.rotation.y+=45
this.renderer.render(this.scene,this.camera)
},
},
mounted(){
this.init()
}
}
</script>
<style scoped>
</style>
{{ cmt.username }}
{{ cmt.content }}
{{ cmt.commentDate | formatDate('YYYY.MM.DD hh:mm') }}