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

学习点一：material数组

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

学习点二：白色是透明度为0，黑色是透明度为1，透明呢？

设置material时，图片白色的地方会透出材质的颜色，黑色地方不会。

对比下，给material的color设置青色后：

学习点三：顺序

长/正方体：右、左、上、下、前、后
椭圆体：侧面、上、下
球：只有一面

主要使用

module： OrbitControls

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

材质加载：TextureLoader

材质：MeshPhongMaterial

环境光：AmbientLight

具体代码

例子需要加载图片，所以需要等一会才会显示。

<script type="module">
import * as THREE from 'three';


import { OrbitControls } from './jsm/controls/OrbitControls.js';

let scene, camera, controls, renderer;

let axesHelper;

// 设置加载管理器
const 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();
    scene.background = new THREE.Color( 0x909399 );
    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 texture = new THREE.TextureLoader();
    const rightTexture = texture.load( './textures/A材质图片/右-彩底.png', event.onLoad );
    const leftTexture = texture.load( './textures/A材质图片/左-白底.png', event.onLoad );
    const topTexture = texture.load( './textures/A材质图片/上-黑底.png', event.onLoad );
    const bottomTexture = texture.load( './textures/A材质图片/下-灰底.png', event.onLoad );
    const frontTexture = texture.load( './textures/A材质图片/前-白底.png', event.onLoad );
    const backTexture = texture.load( './textures/A材质图片/后-透明底.png', event.onLoad );

    // 定义材质常量，如果你想单独修改某个材质，请重新创建，否则修改了下面的某一个，其它运用到这个材质的地方也会变噢
    const right_material = new THREE.MeshPhongMaterial( {
        // color: 0x00fa9a,
        map: rightTexture
    } );
    const left_material = new THREE.MeshPhongMaterial( {
        // color: 0x00fa9a,
        map: leftTexture } );
    const top_material = new THREE.MeshPhongMaterial( {
        // color: 0x00fa9a,
         map: topTexture } );
    const bottom_material = new THREE.MeshPhongMaterial( {
        //  color: 0x00fa9a,
         map: bottomTexture } );
    const front_material = new THREE.MeshPhongMaterial( {
        // color: 0x00fa9a,
         map: frontTexture,
         side: THREE.DoubleSide } );
    const front_material_color = new THREE.MeshPhongMaterial( {
        color: 0x00fa9a,
         map: frontTexture,
         side: THREE.DoubleSide } );
    const back_material = new THREE.MeshPhongMaterial( {
        color: 0x00fa9a,
        map: backTexture } );

    // 正方体
    const mesh_box = new THREE.Mesh( box, [ right_material, left_material, top_material, bottom_material,
        front_material_color, back_material ] );

    // 球
    const mesh_ball = new THREE.Mesh( ball, front_material );
    // 圆
    const mesh_circle = new THREE.Mesh( circle, front_material );
    // 圆柱体
    const mesh_cylinder = new THREE.Mesh( cylinder, [ front_material, top_material, bottom_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 );

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

    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();

        </script>

图片：
后-透明底是有文字的，试着给物体加个颜色瞧瞧？（有惊喜）