关于three.js: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()