three.js 初体验 （二）纹理

人靠衣装，有一个俊俏的脸庞会给我们带来愉悦感。
接下来我们给立方体贴上一张我们想要的“皮肤”。
还是上一课的代码，我们再加上几行代码就可以轻松实现。
以下是完整代码：

以下是完整代码：

<template>
    <div>
      <div id="container"></div>
    </div>
</template>

<script>
import * as Three from 'three'
import boxTextureUrl from './assets/box.jpg'

export default {
  name: 'ThreeTest',
  data () {
    return {
      camera: null,
      scene: null,
      renderer: null,
      mesh: null
    }
  },
  methods: {
    init: function () {
      const container = document.getElementById('container')
      // 创建相机
      this.camera = new Three.PerspectiveCamera(75, container.clientWidth / container.clientHeight, 0.0001, 10)
      this.camera.position.z = 1

      // 创建场景
      this.scene = new Three.Scene()

      // 定义纹理
      const textureLoader = new Three.TextureLoader()
      const boxTexture = textureLoader.load(boxTextureUrl)

      // 定义形状
      const geometry = new Three.BoxGeometry(0.4, 0.4, 0.4)
      // 定义材质
      const material = new Three.MeshBasicMaterial({ map: boxTexture })

      // 创建网格系统
      this.mesh = new Three.Mesh(geometry, material)

      // 网格系统加入场景
      this.scene.add(this.mesh)

      // 创建渲染器
      this.renderer = new Three.WebGLRenderer({ antialias: true })
      // 设置渲染器尺寸
      this.renderer.setSize(container.clientWidth, container.clientHeight)
      this.renderer.render(this.scene, this.camera)
      // 放入到页面中
      container.appendChild(this.renderer.domElement)
    },
    animate: function () {
      // 逐帧动画
      requestAnimationFrame(this.animate)
      // 设置旋转速度
      this.mesh.rotation.x += 0.01
      this.mesh.rotation.y += 0.02
      // 每动一次，渲染一下，让画面动起来
      this.renderer.render(this.scene, this.camera)
    }
  },
  mounted () {
    this.init()
    this.animate()
  }
}
</script>
<style scoped>
  #container {
    height: 400px;
  }
</style>

解释下代码：

1. 我们要引入一张我们喜欢的图片，我用了一张木头箱子的图片。

import boxTextureUrl from './assets/box.jpg'

2. 定义纹理 textureLoader

const textureLoader = new Three.TextureLoader()
const boxTexture = textureLoader.load(boxTextureUrl)

3. 将纹理加入到材质中

const material = new Three.MeshBasicMaterial({ map: boxTexture })

至此，工作就完成了。大家可以按自己的喜好加载你们想要的“皮肤”了，我们下期再见。