学习点一：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, rendererlet 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()