Vue three.js基础四大组件实现三维效果（三）贴图/镜头移动/地板

Vue three.js基础四大组件实现三维效果（三）贴图/镜头移动/地板

//未贴图
 let material = new THREE.MeshPhongMaterial({color："#f60"})
//贴图
 const loader = new THREE.TextureLoader()//贴图
 let material = new THREE.MeshPhongMaterial({ map: loader.load('https://threejsfundamentals.org/threejs/resources/images/wall.jpg'),})

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

<script>
import * as THREE from 'three'
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls'
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  mounted(){
    this.qwe()
  },
  methods: {
    qwe () {
      const conter = document.getElementById("three")
      let scren = new THREE.Scene() // 场景
      //灯光
      {
        const color = 0xFFFFFF;
        const intensity = 1;
        const light = new THREE.DirectionalLight(color, intensity);
        light.position.set(1, 1, 2);//x,y,z
        scren.add(light);
      }
      let camera = new THREE.PerspectiveCamera(50, conter.clientWidth / conter.clientHeight, 1, 1000)//透视相机
      let render = new THREE.WebGL1Renderer()//渲染器
      render.setClearColor("#f60")
      render.setSize(conter.clientWidth, conter.clientHeight)//渲染器大小
      conter.appendChild(render.domElement)//渲染结果加载到容器里面

      //镜头可移动
      const controls = new OrbitControls(camera,render.domElement);
      controls.screenSpacePanning = true
      controls.update();

      const loader = new THREE.TextureLoader()//贴图
      //添加地板
      const geome = new THREE.PlaneBufferGeometry(20,20)
      const mate = new THREE.MeshPhongMaterial({ map: loader.load('https://threejsfundamentals.org/threejs/resources/images/wall.jpg'),})
      let mesh = new THREE.Mesh(geome,mate)
      mesh.rotation.x = -Math.PI/2
      mesh.rotation.z = -Math.PI
      // mesh.rotation.y = Math.PI/2
      mesh.position.y = -1.3
      scren.add(mesh)

      let geometry = new THREE.BoxGeometry(0.5,0.5,0.5)//几合体 宽长高

      let material = new THREE.MeshPhongMaterial({ map: loader.load('https://threejsfundamentals.org/threejs/resources/images/wall.jpg'),})//材质 MeshBasicMaterial不受灯光影响
      let cub = new THREE.Mesh(geometry, material)//网格
      cub.position.z = -2
      cub.position.y = 2

      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)//网格

      let geometry4 = new THREE.BoxGeometry(1,1,1)//几合体 宽长高
      const loader4 = new THREE.TextureLoader()//贴图
      let material4 = [
        new THREE.MeshPhongMaterial({ map: loader4.load('https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1107222352,326734774&fm=26&gp=0.jpg'),}),//材质 MeshBasicMaterial不受灯光影响
        new THREE.MeshPhongMaterial({ map: loader4.load('https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2710640311,2174739898&fm=26&gp=0.jpg'),}),//材质 MeshBasicMaterial不受灯光影响
        new THREE.MeshPhongMaterial({ map: loader4.load('https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3740053622,1149390982&fm=26&gp=0.jpg'),}),//材质 MeshBasicMaterial不受灯光影响
        new THREE.MeshPhongMaterial({ map: loader4.load('https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1032090787,3027113824&fm=26&gp=0.jpg'),}),//材质 MeshBasicMaterial不受灯光影响
        new THREE.MeshPhongMaterial({ map: loader4.load('https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3738970635,2195747010&fm=26&gp=0.jpg'),}),//材质 MeshBasicMaterial不受灯光影响
        new THREE.MeshPhongMaterial({ map: loader4.load('https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1532844926,3671374399&fm=26&gp=0.jpg'),})//材质 MeshBasicMaterial不受灯光影响
      ]
      let cub4 = new THREE.Mesh(geometry4, material4)//网格

      cub3.position.x = 1.5
      cub2.position.x = -1.5
      scren.add(cub)//将网格加到场景去
      scren.add(cub2)
      scren.add(cub3)
      scren.add(cub4)
      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//动起来
        cub4.rotation.x-=0.01//动起来
        cub4.rotation.z-=0.01//动起来
        render.render(scren,camera)
      }

      renders()

    }
  }
}
</script>