threeJS加载无贴图模型（亲测已实现）

<template>

  <div class="earth-container">

    <div id="three-earth" ref="three-earth" />

  </div>

</template>

 

<script>

import * as THREE from 'three'

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'

export default {

  name: 'Earth',

  props: {

 

  },

  components: {

 

  },

  data () {

    return {

      container: null,

      render: null,

      camera: null,

      scene: null,

      raycaster: new THREE.Raycaster(),

      mouse: new THREE.Vector2(),

      controls: null

    }

  },

 

  mounted () {

    this.initRender()

    this.initScene()

    this.initCamera()

    this.initLight()

    this.addCube() 

    this.initControls()

 

    this.animate()

    window.onresize = this.onWindowResize

    window.addEventListener('click', this.onMouseClick, false)

  },

  methods: {

    addCube () {

      var that = this

   //   const loader = new GLTFLoader().setPath('static/cube/')

     const loader = new GLTFLoader()

      loader.load('http://33.33.39.35:8088/3dmodel/red.gltf', function (gltf) {

        gltf.scene.traverse(function (child) {

          if (child.isMesh) {

            /* child.scale.set( 0.1, 0.1, 0.1 ); */

            /* child.material.side = THREE.DoubleSide; */

 

            console.log(child)

            /* camera.lookAt( child.position ); */

 

            // TOFIX RoughnessMipmapper seems to be broken with WebGL 2.0

            // roughnessMipmapper.generateMipmaps( child.material );

          }

        })

 

        that.scene.add(gltf.scene)

 

        that.animate()

      })

    },

    initRender: function () {

      this.render = new THREE.WebGLRenderer({ antialias: true, alpha: true })

      this.render.setPixelRatio(window.devicePixelRatio)

      this.render.setSize(window.innerWidth, window.innerHeight)

 

      /* this.render.shadowMap.enabled = false

      this.render.shadowMap.type = THREE.PCFSoftShadowMap */

      this.render.outputEncoding = THREE.sRGBEncoding

      this.container = document.getElementById('three-earth')

      this.container.appendChild(this.render.domElement)

    },

    initCamera: function () {

      this.camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 100000)

      this.camera.position.set(0, 0, 0)

      /* this.camera.lookAt(new THREE.Vector3(0, 0, 0)) */

    },

    initScene: function () {

      this.scene = new THREE.Scene()

    },

    initLight: function () {

      /* const ambient = new THREE.AmbientLight(0xffffff)

      this.scene.add(ambient) */

      const dirLight = new THREE.DirectionalLight(0xffffff)

      dirLight.position.set(10, 0, 0)

      this.scene.add(dirLight)

    },

    initStats: function () {

      /* this.stats = new Stats()

      this.container.appendChild(this.stats) */

    },

    initControls: function () {

      this.controls = new OrbitControls(this.camera, this.render.domElement)

      /* this.controls.enableDamping = true

      this.controls.dampingFactor = 0.25

      this.controls.enableZoom = true */

      /* this.controls.autoRotate = true

      this.controls.autoRotateSpeed = 3

      this.controls.dampingFactor = true */

      this.controls.enableDamping = true

      this.controls.minDistance = 500

      this.controls.maxDistance = 2500

      this.controls.enablePan = false

      /* this.controls.panSpeed = 200

      this.controls.rotateSpeed = 2 */

    },

    animate: function () {

      requestAnimationFrame(this.animate)

      this.camera.lookAt(this.scene.position)

      this.render.render(this.scene, this.camera)

      this.controls.update()

    },

    randomColor: function () {

      var arrHex = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']

      var strHex = '#'

      var index = ''

      for (var i = 0; i < 6; i++) {

        index = Math.round(Math.random() * 15)

        strHex += arrHex[index]

      }

      return strHex

    },

    onMouseClick: function (event) {

      event.preventDefault()

      this.mouse.x = ((event.clientX) / window.innerWidth) * 2 - 1

      this.mouse.y = -((event.clientY) / window.innerHeight) * 2 + 1

 

      // 通过鼠标点的位置和当前相机的矩阵计算出raycaster

      this.raycaster.setFromCamera(this.mouse, this.camera)

 

      // 获取raycaster直线和所有模型相交的数组集合

      var intersects = this.raycaster.intersectObjects(this.scene.children)

 

      // 将所有的相交的模型的颜色设置为红色，如果只需要将第一个触发事件，那就数组的第一个模型改变颜色即可

      if (intersects.length > 0) {

        intersects[0].object.material.color.set(0xff0000)

      }

    },

    onWindowResize: function () {

      this.camera.aspect = window.innerWidth / window.innerHeight

      this.camera.updateProjectionMatrix()

      this.render.setSize(window.innerWidth, window.innerHeight)

    }

  }

}

</script>

 

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>

  #three-earth{

    width: 100%;

    height: 100%;

  }

.earth-container{

  width: 100%;

  height: 100%;

}

</style>