vue集成Threejs
1.需要的依赖:
npm i three --save
npm i imports-loader exports-loader --save-dev
npm i import-three-examples --save-dev
2.webpack的配置:
const ThreeExamples = require('import-three-examples')
module.exports = {
......
......
module: {
rules: [
......
......
{
test: /\.js$/,
loader: 'babel-loader'
},
...ThreeExamples
]
}
}
*如果是vue-cli3.0,需要在 vue.config.js中配置
const ThreeExamples = require('import-three-examples')
// 第三方插件配置
pluginOptions: {
// ...
...ThreeExamples
}
3.组件内引用
import * as THREE from 'three'
*引入后出现报错,很可能是three版本太高,可尝试降低版本
4.代码示例:
<template>
<div>
<div id="container"></div>
</div>
</template>
<script>
import * as THREE from 'three/build/three.js'
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js'
export default {
name: 'building',
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: 'white'
})
this.mesh = new THREE.Mesh(geometry, material)
this.scene.add(this.mesh)
// 相机设置
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.WebGLRenderer({antialias: true})
this.renderer.setSize(container.clientWidth, container.clientHeight)
container.appendChild(this.renderer.domElement)
// 创建控件对象
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>
颜色:
以0x开头的颜色值和#开头的颜色值都是16位进制的
他们的0x开头的颜色值一般后面跟8位例如:0xfffefefe ,0x后面跟着前2个ff一般代表透明,后面跟着的6位和
例如 0x : 0xfffefefe,
# :#fefefe
#开头的比较常用在xml布局中
0x开头比较常用的代码的布局中。
透明度参照表;
00%=FF(不透明) 5%=F2 10%=E5 15%=D8 20%=CC 25%=BF 30%=B2 35%=A5 40%=99 45%=8c 50%=7F
55%=72 60%=66 65%=59 70%=4c 75%=3F 80%=33 85%=21 90%=19 95%=0c 100%=00(全透明)