Vue three.js基础四大组件实现三维效果（二）多个几何体

Vue three.js基础四大组件实现三维效果（二）多个几何体

<template>
  <div id="three" style="height: 800px;width: 800px;"></div>
</template>

<script>
import * as THREE from 'three'
export default {
  name: 'HelloWorld',
  data () {
    return {
    }
  },
  mounted(){
    this.qwe()
  },
  methods: {
    qwe () {
      const conter = document.getElementById("three")
      console.log(conter.clientWidth)
      let scren = new THREE.Scene() // 场景
      //灯光
      {
        const color = 0xFFFFFF;
        const intensity = 1;
        const light = new THREE.DirectionalLight(color, intensity);
        light.position.set(2, 2, 2);//x,y,z
        scren.add(light);
      }
      let camera = new THREE.PerspectiveCamera(45, conter.clientWidth / conter.clientHeight, 1, 1000)//透视相机
      let render = new THREE.WebGL1Renderer()//渲染器
      render.setClearColor("#f60")
      render.setSize(conter.clientWidth, conter.clientHeight)//渲染器大小
      conter.appendChild(render.domElement)//渲染结果加载到容器里面
      let geometry = new THREE.BoxGeometry(1,1,1)//几合体 宽长高
      let material = new THREE.MeshPhongMaterial({color:0x00ff00  })//材质 MeshBasicMaterial不受灯光影响
      let cub = new THREE.Mesh(geometry, material)//网格

      let geometry2 = new THREE.DodecahedronBufferGeometry (0.5,1)//球
      let material2 = new THREE.MeshPhongMaterial({color:0xffff00 })//材质 MeshBasicMaterial不受灯光影响
      let cub2 = new THREE.Mesh(geometry2, material2)//网格

      const geometry3 = new THREE.ConeBufferGeometry(0.3,0.5,50);//圆锥
      let material3 = new THREE.MeshPhongMaterial({color:0xff0f00 })//材质 MeshBasicMaterial不受灯光影响
      let cub3 = new THREE.Mesh(geometry3, material3)//网格
      cub3.position.x = 1.5
      cub2.position.x = -1.5
      scren.add(cub)//将网格加到场景去
      scren.add(cub2)
      scren.add(cub3)
      camera.position.z = 5//改变相机位置

      function renders(){
        requestAnimationFrame(renders)
        cub.rotation.x+=0.01//动起来
        cub.rotation.y+=0.01//动起来
        cub2.rotation.x-=0.01//动起来
        cub2.rotation.y-=0.01//动起来
        cub3.rotation.x-=0.01//动起来
        cub3.rotation.z-=0.01//动起来
        render.render(scren,camera)
      }

      renders()

    }
  }
}
</script>