threejs

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（全透明）