Three.js入门_纹理贴图，载入.glb模型

这一次来实现一个参加纹路贴图和.glb格式模型的场景。 最后的作用根本如下：

最初我想做的时直升飞机在绿色的草坪起飞，因为经费和时间有限就先实现一个低配版的场景但也不妨碍我运用API 来继续进行。

前期场景准备基础场景

 this.scene = new Three.Scene() //构建场景
this.scene.fog = new Three.FogExp2(0xefd1b5, 0.0025) //场景的雾化作用
  var camera = new Three.PerspectiveCamera(
        120,
        window.innerWidth / window.innerHeight,
        0.1,
        2000
      )
         //  定位相机 指向场景中心
      camera.position.set(-20, 40, 30) //设置相机方位
      camera.lookAt(this.scene.position) //设置相机方向(指向的场景目标)
      this.camera = camera
        //  创立渲染器
      var renderer = new Three.WebGLRenderer()
      // 渲染器初始色彩
      renderer.setClearColor(new Three.Color(0xb9d3ff))
      // 输出canvas画面大小
      renderer.setSize(window.innerWidth, window.innerHeight)
      this.renderer = renderer
        var pointLight = new Three.PointLight(0xffffff)
      pointLight.position.set(-60, 100, 100)
      this.scene.add(pointLight)
        this.addGrassGem() //参加草地
        //将渲染器加载到dom里
        document.getElementById('contanier').appendChild(this.renderer.domElement)

1.运用（Texture）纹路贴图参加一片草地

addGrassGem(){
 const geometry = new Three.PlaneGeometry(10000, 10000)
      const texture = new Three.TextureLoader().load(
        'https://img0.baidu.com/it/u=3054322455,2150588617&fm=253&fmt=auto&app=120&f=JPEG? w=500&h=333'
      )
      // 纹路在水平和笔直方向的扩展办法
      texture.wrapS = Three.RepeatWrapping
      texture.wrapT = Three.RepeatWrapping
      texture.repeat.set(100, 100) //贴图阵列
      const grassMaterial = new Three.MeshBasicMaterial({ map: texture })
      const grass = new Three.Mesh(geometry, grassMaterial)
      grass.rotation.x = -0.5 * Math.PI
      this.scene.add(grass)
      }

构造函数Texture(image, mapping, wrapS, wrapT, magFilter, minFilter, format, type, anisotropy, encoding)

• image:为一个图片目标，由textureLoader.load办法创立
• wrapS：界说贴图在水平方向如何包裹默许值THREE.ClampToEdgeWrapping 其他两个参数 THREE.RepeatWrapping，THREE.MirroredRepeatWrapping

THREE.ClampToEdgeWrapping(超出的部分取纹路边际的色彩)

THREE.RepeatWrapping(超出后重复填充）

THREE.MirroredRepeatWrapping（镜像，当纹路的整数部分是奇数是重复平铺，偶数是对应翻转）

• wrapT : 界说贴图在笔直方向如何包裹(可选特点值参照wrapS)

• repeat ：界说切图两个方向上重复的次数仅 wrapS ，wrapT 为THREE.RepeatWrapping/THREE.MirroredRepeatWrapping有效

• rotation :纹路沿着中心点转动的弧度（rad）正值为逆时针方向。

• center :设置旋转中心点默许（0,0）

还有一些矩阵改变特点 这儿没有用到暂时不记录

2.加载GLB模型

GLB模型是一种场景动画集合模型

    loadGltf() {
      // vue加载glb模型通过DRACOLoader压缩
      const loader = new GLTFLoader()
      // DRACOLoader压缩模型
      const dracoLoader = new DRACOLoader()
      // 压缩办法途径
      dracoLoader.setDecoderPath('./moduler/draco/')
      dracoLoader.preload()
      console.log(dracoLoader, 'dracoLoader')
      loader.setDRACOLoader(dracoLoader)
      loader.load(
        'https://10.54.14.123:8084/mapData/CesiumAir/Cesium_Air.glb',
        (gltf) => {
          // 将模型的整个 scene 添加到我们的场景里。尽管它的名字是 scene，实际上是一个 Three.Group
          console.log(gltf, 'gltfgltfgltf')
          gltf.scene.position.set(0, 2, 0)
          gltf.scene.rotation.y = 110
          this.scene.add(gltf.scene)
          this.airPlane = gltf.scene
          this.renderer.render(this.scene, this.camera)
          this.animate()
        },
        (xhr) => {
          console.log((xhr.loaded / xhr.total) * 100 + '% loaded')
        },
        (error) => {
          console.error(error)
        }
      )
    },

3.因为模型没有动画先参加简单位移动画

  animate() {
      //   // 运用动画作用，浏览器全新的动画作用
      window.requestAnimationFrame(this.animate)
      //   // 设置模型网格的坐标
      this.airPlane.position.z -= 0.5
      if (this.airPlane.position.z <= -20) {
        this.airPlane.position.y += 0.1
      }
      // 将场景和图形动态的渲染到渲染器上去
      this.renderer.render(this.scene, this.camera)
    },