使用vue学习three.js之加载和使用纹理-设置material.specularMap属性使用高光贴图创建色彩鲜明的地球

Posted 2021-06-19 点燃火柴

使用高光贴图创建色彩鲜明的地球

• 1.demo效果
• 2. 相关知识点
• 3. 实现要点
• 4. demo代码

1.demo效果

2. 相关知识点

在demo效果中，你可以看到海洋的色彩比较鲜明会反光，陆地上则不反光或反光很少，实现这种效果并不是使用特殊的法线贴图，使用一张显示高度的法向贴图即可

3. 实现要点

高光贴图的使用和其他贴图一样，需要将material的 specularMap 属性设置成加载的高光贴图，还要设置material的 specular 属性，该属性接收一个Color对象，这个属性会 决定反光颜色。这一步中还需要加载纹理贴图和法向贴图，并设置到材质的map属性和normalMap属性

// 创建模型
createModels() {
  const publicPath = process.env.BASE_URL
  //加载纹理贴图
  const planetTexture = new THREE.TextureLoader().load(
    `${publicPath}textures/planets/Earth.png`
  )
  //加载高光贴图
  const specularTexture = new THREE.TextureLoader().load(
    `${publicPath}textures/planets/EarthSpec.png`
  )
  //加载法向贴图
  const normalTexture = new THREE.TextureLoader().load(
    `${publicPath}textures/planets/EarthNormal.png`
  )

  const planetMaterial = new THREE.MeshPhongMaterial()
  planetMaterial.specularMap = specularTexture
  planetMaterial.specular = new THREE.Color(0xffffff)
  planetMaterial.shininess = 2

  planetMaterial.normalMap = normalTexture
  planetMaterial.map = planetTexture
  planetMaterial.shininess = 10
  const sphereGeom = new THREE.SphereGeometry(10, 30, 30)
  this.earchMesh = new THREE.Mesh(sphereGeom, planetMaterial)

  this.scene.add(this.earchMesh)
}

4. demo代码

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

<script>
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
export default {
  data() {
    return {
      earchMesh: null,
      camera: null,
      scene: null,
      renderer: null,
      controls: null
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    // 初始化
    init() {
      this.createScene() // 创建场景
      this.createModels() // 创建模型
      this.createLight() // 创建光源
      this.createCamera() // 创建相机
      this.createRender() // 创建渲染器
      this.createControls() // 创建控件对象
      this.render() // 渲染
    },
    // 创建场景
    createScene() {
      this.scene = new THREE.Scene()
    },
    // 创建模型
    createModels() {
      const publicPath = process.env.BASE_URL
      //加载纹理贴图
      const planetTexture = new THREE.TextureLoader().load(
        `${publicPath}textures/planets/Earth.png`
      )
      //加载高光贴图
      const specularTexture = new THREE.TextureLoader().load(
        `${publicPath}textures/planets/EarthSpec.png`
      )
      //加载法向贴图
      const normalTexture = new THREE.TextureLoader().load(
        `${publicPath}textures/planets/EarthNormal.png`
      )

      const planetMaterial = new THREE.MeshPhongMaterial()
      planetMaterial.specularMap = specularTexture
      planetMaterial.specular = new THREE.Color(0xffffff)
      planetMaterial.shininess = 2

      planetMaterial.normalMap = normalTexture
      planetMaterial.map = planetTexture
      planetMaterial.shininess = 10
      const sphereGeom = new THREE.SphereGeometry(10, 30, 30)
      this.earchMesh = new THREE.Mesh(sphereGeom, planetMaterial)

      this.scene.add(this.earchMesh)
    },

    // 创建光源
    createLight() {
      // 环境光
      const ambientLight = new THREE.AmbientLight(0x330000) // 创建环境光
      this.scene.add(ambientLight) // 将环境光添加到场景

      const directionLight = new THREE.DirectionalLight(0xffffff)
      directionLight.position.set(350, 350, 150)
      directionLight.intensity = 0.4
      this.scene.add(directionLight)
    },
    // 创建相机
    createCamera() {
      const element = document.getElementById('container')
      const width = element.clientWidth // 窗口宽度
      const height = element.clientHeight // 窗口高度
      const k = width / height // 窗口宽高比
      // PerspectiveCamera( fov, aspect, near, far )
      this.camera = new THREE.PerspectiveCamera(45, k, 0.1, 1000)
      this.camera.position.set(30, 30, 30) // 设置相机位置

      this.camera.lookAt(new THREE.Vector3(0, 0, 0)) // 设置相机方向
      this.scene.add(this.camera)
    },
    // 创建渲染器
    createRender() {
      const element = document.getElementById('container')
      this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true })
      this.renderer.setSize(element.clientWidth, element.clientHeight) // 设置渲染区域尺寸
      this.renderer.shadowMap.enabled = true // 显示阴影
      // this.renderer.shadowMap.type = THREE.PCFSoftShadowMap
      this.renderer.setClearColor(0x000000, 1) // 设置背景颜色
      element.appendChild(this.renderer.domElement)
    },

    render() {
      this.earchMesh.rotation.y += 0.005
      this.renderer.render(this.scene, this.camera)
      requestAnimationFrame(this.render)
    },
    // 创建控件对象
    createControls() {
      this.controls = new OrbitControls(this.camera, this.renderer.domElement)
    }
  }
}
</script>

<style>
#container {
  position: absolute;
  width: 100%;
  height: 100%;
}
.controls-box {
  position: absolute;
  right: 5px;
  top: 5px;
  width: 300px;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #c3c3c3;
}
.label-col {
  padding: 8px 5px;
}

.vertice-span {
  line-height: 38px;
  padding: 0 2px 0 10px;
}
</style>