ThreeJS学习记录（二）立方体不同面不同图片（待补充）

学习点一：material数组

在设置Mesh的时候，第一个参数是几何体，第二个参数就是材质。
根据官方文档看，第二个参数可以是一个数组。也就是说可以设置几何体不同面的材质图片。

学习点二：顺序

大家可以看下哪一个面会对应哪个图片，nx\ny\nz\px\py\pz。

学习点三：白色是透明度为0，黑色是透明度为1

设置material时，图片白色的地方会透出材质的颜色，黑色地方不会。对比下，下面是图片，material的color设置青色，

附在几何体上的效果：

主要使用

module： OrbitControls

几何体：BoxBufferGeometry、SphereGeometry、CircleGeometry、CylinderGeometry、IcosahedronGeometry

材质加载：TextureLoader

材质：MeshPhongMaterial

环境光：AmbientLight

具体代码

import * as THREE from 'three'
// 轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

let scene, camera, controls, renderer

let axesHelper

// 设置加载管理器
let event = {}
event.onLoad = () => {
  render() //当材质图片加载完成，重新渲染一下
}

function init() {
  renderer = new THREE.WebGLRenderer({ antialias: true }) // 创建渲染器对象
  renderer.setPixelRatio(window.devicePixelRatio)
  renderer.setSize(window.innerWidth, window.innerHeight) //设置渲染区域尺寸
  document.body.appendChild(renderer.domElement) //body元素中插入canvas对象

  scene = new THREE.Scene()

  camera = new THREE.PerspectiveCamera(
    35,
    window.innerWidth / window.innerHeight,
    1,
    1000
  )
  camera.position.set(0, 5, 100)

  controls = new OrbitControls(camera, renderer.domElement)
  controls.addEventListener('change', render) //监听鼠标、键盘事件

  // 环境光
  const ambient = new THREE.AmbientLight(0xffffff, 1)
  scene.add(ambient)

  // 几何体
  const box = new THREE.BoxBufferGeometry(10, 10, 10) //正方体六面
  const ball = new THREE.SphereGeometry(5, 16, 8) //球一面
  const circle = new THREE.CircleGeometry(5, 32) //圆形一面
  const cylinder = new THREE.CylinderGeometry(5, 5, 20, 32) //圆柱
  const twelve = new THREE.IcosahedronGeometry(10, 0) //十二面

  // 材质
  let texture = new THREE.TextureLoader()
  let t1 = texture.load('./textures/六面/nx.jpg', event.onLoad)
  let t2 = texture.load('./textures/六面/px.jpg', event.onLoad)
  let t3 = texture.load('./textures/六面/ny.jpg', event.onLoad)
  let t4 = texture.load('./textures/六面/py.jpg', event.onLoad)
  let t5 = texture.load('./textures/六面/nz.jpg', event.onLoad)
  let t6 = texture.load('./textures/六面/pz.jpg', event.onLoad)
  let t1Material = new THREE.MeshPhongMaterial({
    color: 0x00fa9a,
    map: t1,
    side: THREE.DoubleSide, //双面渲染
  })
  let t2Material = new THREE.MeshPhongMaterial({ color: 0x00fa9a, map: t2 })
  let t3Material = new THREE.MeshPhongMaterial({ color: 0x00fa9a, map: t3 })
  let t4Material = new THREE.MeshPhongMaterial({ color: 0x00fa9a, map: t4 })
  let t5Material = new THREE.MeshPhongMaterial({ color: 0x00fa9a, map: t5 })
  let t6Material = new THREE.MeshPhongMaterial({ color: 0x00fa9a, map: t6 })
  // 六面材质数组
  let materialArr = [
    t1Material,
    t2Material,
    t3Material,
    t4Material,
    t5Material,
    t6Material,
  ]
  let material = new THREE.MeshPhongMaterial({ color: 0x00fa9a })
  let mesh_box = new THREE.Mesh(box, materialArr)
  let mesh_ball = new THREE.Mesh(ball, material) //球只有一个面
  let mesh_circle = new THREE.Mesh(circle, material)
  let mesh_cylinder = new THREE.Mesh(cylinder, materialArr)
  let mesh_twelve = new THREE.Mesh(twelve, material)

  mesh_box.position.set(-32, 0, 0)
  mesh_ball.position.set(-16, 0, 0)
  mesh_circle.position.set(0, 0, 0)
  mesh_cylinder.position.set(16, 0, 0)
  mesh_twelve.position.set(32, 0, 0)

  scene.add(mesh_box)
  scene.add(mesh_ball)
  scene.add(mesh_circle)
  scene.add(mesh_cylinder)
  scene.add(mesh_twelve)

  render()

  window.addEventListener('resize', onWindowResize)
}

function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight
  camera.updateProjectionMatrix()

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

function render() {
  renderer.render(scene, camera) //执行渲染操作
  // requestAnimationFrame(render)
}

function buildHelper() {
  // 辅助坐标系  参数250表示坐标系大小，可以根据场景大小去设置
  axesHelper = new THREE.AxesHelper(250)
  scene.add(axesHelper)
}

init()

buildHelper()

render()