three.js简单实践

1.引入

yarn add three

2.vue页面引入

  <div id="container"></div>

import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
import { createMultiMaterialObject } from 'three/examples/jsm/utils/SceneUtils.js'

  <style lang="less" scoped>

  #container {

    width: 100vw;

    height: 400px;

  }

  </style>

3.初始化方法

  data() {

    return {

      properties: {

        width: {

          name: 'width',

          value: 0.5,

          min: 0,

          max: 1,

          step: 0.01

        },

        height: {

          name: 'height',

          value: 0.5,

          min: 0,

          max: 1,

          step: 0.01

        },

        depth: {

          name: 'depth',

          value: 0.5,

          min: 0,

          max: 1,

          step: 0.01

        },

        widthSegments: {

          name: 'widthments',

          value: 8,

          min: 0,

          max: 40,

          step: 1

        },

        heightSegments: {

          name: 'heightments',

          value: 8,

          min: 0,

          max: 40,

          step: 1

        },

        depthSegments: {

          name: 'depthments',

          value: 8,

          min: 0,

          max: 40,

          step: 1

        }

      },  

      camera: null,

      scene: null,

      renderer: null,

      mesh: null

    }

  },

  mounted() {
    this.initThree()
  },
  methods: {
    initThree() {
      this.createScene() // 创建场景
      this.createMesh() // 创建网格模型
      this.createLight() // 创建光源
      this.createCamera() // 创建相机
      this.createRender() // 创建渲染器
      this.createControls() // 创建控件对象
      this.render() // 渲染
    },
  }

    // 创建场景
    createScene() {
      this.scene = new THREE.Scene()
    },
    // 创建网格模型
    createMesh() {
      // //创建图形
      let geometry = new THREE.BoxGeometry(
        this.properties.width.value, 
        this.properties.height.value, 
        this.properties.depth.value,
        Math.round(this.properties.widthSegments.value),
        Math.round(this.properties.heightSegments.value),
        Math.round(this.properties.depthSegments.value)
      );
      // 创建材质
      const meshMaterial = new THREE.MeshNormalMaterial({
        side: THREE.DoubleSide
      })
      const wireFrameMat = new THREE.MeshBasicMaterial({ wireframe: true })

      // 添加组合材质
      this.mesh = createMultiMaterialObject(geometry, [
        meshMaterial,
        wireFrameMat
      ])
      this.scene.add(this.mesh);
    },
    // 创建光源
    createLight() {

    },
    // 创建相机
    createCamera() {
      let container = document.getElementById('container');
      this.camera = new THREE.PerspectiveCamera(70, container.clientWidth/container.clientHeight, 0.01, 10);
      this.camera.position.z = 1;
    },
    // 创建渲染器
    createRender() {
      let container = document.getElementById('container');
      this.renderer = new THREE.WebGLRenderer({antialias: true});
      //setSize 设置大小
      this.renderer.setSize(container.clientWidth, container.clientHeight);
      container.appendChild(this.renderer.domElement);
    },
    // 创建控件对象
    createControls() {
      this.controls = new OrbitControls(this.camera, this.renderer.domElement)
    },
    // 渲染
    render() {
      this.updateFun()
      this.renderer.render(this.scene, this.camera)
      requestAnimationFrame(this.render)
    },
    // 更新属性
    updateFun() {
      const tempRotationY = this.mesh.rotation.y
      this.scene.remove(this.mesh)
      this.createMesh()
      this.mesh.rotation.y += tempRotationY + 0.01
    },