three.js简单实践

标签：container 创建 实践 value three new js THREE properties

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
    },

 

标签：container,创建,实践,value,three,new,js,THREE,properties
From： https://www.cnblogs.com/ZJTL/p/18056813