Threejs给立方体添加贴图及动画

添加贴图

添加贴图需要用到 TextureLoader

1. 添加贴图

  // 添加 textureLoader
  const textureLoader = new THREE.TextureLoader();
  // 获取贴图 texture
  const texture = textureLoader.load('/assets/avatar.png', function () {
    doRender();
  });

  // 创建一个立方体几何体
  const geometry = new THREE.BoxGeometry(50, 50, 50);
  // 创建一个材质
  const material = new THREE.MeshLambertMaterial({
    // color: 0xff00ff,
    map: texture,// 设置贴图
  })
  // 利用几何体和材质生成网格模型
  const mesh = new THREE.Mesh(geometry, material);
  // 把网格模型添加到场景中
  scene.add(mesh);

  // 写成渲染方法-方便调用
  function doRender() {
    // 执行渲染操作-指定场景、相机作为参数
    renderer.render(scene, camera);
  }

  doRender();

2. 贴图效果

添加动画

1. 调整doRender方法命名为animate

  // 添加 textureLoader
  const textureLoader = new THREE.TextureLoader();

  // 创建一个立方体几何体
  const geometry = new THREE.BoxGeometry(50, 50, 50);
  // 创建一个材质
  const material = new THREE.MeshLambertMaterial({
    map: textureLoader.load('/assets/avatar.png'),// 设置贴图
  })
  // 利用几何体和材质生成网格模型
  const mesh = new THREE.Mesh(geometry, material);
  // 把网格模型添加到场景中
  scene.add(mesh);

  // 写成渲染方法-方便调用
  function animate() {
    requestAnimationFrame(animate);
    mesh.rotation.x += 0.005;
    mesh.rotation.y += 0.01;

    // 执行渲染操作-指定场景、相机作为参数
    renderer.render(scene, camera);
  }

  animate();

2. 效果

多张贴图

生成网格模型的时候，可以添加多个材料

1. 添加多张贴图

  // 添加 textureLoader
  const textureLoader = new THREE.TextureLoader();

  // 创建一个立方体几何体
  const geometry = new THREE.BoxGeometry(50, 50, 50);
  // 创建一个材质
  const material1 = new THREE.MeshLambertMaterial({
    map: textureLoader.load('/assets/avatar.png'),
  })
  const material2 = new THREE.MeshLambertMaterial({
    map: textureLoader.load('/assets/images/grass.jpg'),
  })
  const material3 = new THREE.MeshLambertMaterial({
    map: textureLoader.load('/assets/images/line.jpg'),
  })
  const material4 = new THREE.MeshLambertMaterial({
    map: textureLoader.load('/assets/images/rain.png'),
  })
  const material5 = new THREE.MeshLambertMaterial({
    map: textureLoader.load('/assets/images/run.jpg'),
  })
  const material6 = new THREE.MeshLambertMaterial({
    map: textureLoader.load('/assets/images/tree.png'),
  })
  // 利用几何体和材质生成网格模型
  const mesh = new THREE.Mesh(geometry, [material1, material2, material3, material4, material5, material6]);
  // 把网格模型添加到场景中
  scene.add(mesh);

2. 效果

最终代码

import { useEffect, useRef } from 'react';
import * as THREE from 'three';

export default function PageComponent() {
  const boxRef = useRef<HTMLDivElement>(null);
  const width = window.innerWidth;
  const height = window.innerHeight;

  // 场景
  const scene = new THREE.Scene();

  // 坐标
  const axes = new THREE.AxesHelper(1000);
  axes.name = "AxesHelper";
  scene.add(axes);

  // 环境光
  const ambient = new THREE.AmbientLight(0x888888);
  scene.add(ambient);

  // 点光源
  const point = new THREE.PointLight(0xffffff);
  point.position.set(150, 100, 500); // 点光源位置
  scene.add(point); // 点光源添加到场景中

  // 相机
  const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
  camera.position.set(100, 100, 150);
  camera.lookAt(scene.position);

  // 渲染器
  const renderer = new THREE.WebGLRenderer();
  // renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(width, height);// 设置渲染区域大小
  renderer.setClearColor(0xb9d3ff, 1);// 设置渲染区域背景

  // 添加 textureLoader
  const textureLoader = new THREE.TextureLoader();

  // 创建一个立方体几何体
  const geometry = new THREE.BoxGeometry(50, 50, 50);
  // 创建一个材质
  const material1 = new THREE.MeshLambertMaterial({
    map: textureLoader.load('/assets/avatar.png'),
  })
  const material2 = new THREE.MeshLambertMaterial({
    map: textureLoader.load('/assets/images/grass.jpg'),
  })
  const material3 = new THREE.MeshLambertMaterial({
    map: textureLoader.load('/assets/images/line.jpg'),
  })
  const material4 = new THREE.MeshLambertMaterial({
    map: textureLoader.load('/assets/images/rain.png'),
  })
  const material5 = new THREE.MeshLambertMaterial({
    map: textureLoader.load('/assets/images/run.jpg'),
  })
  const material6 = new THREE.MeshLambertMaterial({
    map: textureLoader.load('/assets/images/tree.png'),
  })
  // 利用几何体和材质生成网格模型
  const mesh = new THREE.Mesh(geometry, [material1, material2, material3, material4, material5, material6]);
  // 把网格模型添加到场景中
  scene.add(mesh);

  function animate() {
    requestAnimationFrame(animate);

    mesh.rotation.x += 0.005;
    mesh.rotation.y += 0.01;
    // 执行渲染操作-指定场景、相机作为参数
    renderer.render(scene, camera);
  }

  animate();

  useEffect(() => {
    boxRef.current?.appendChild(renderer.domElement);
    return () => {
      boxRef.current?.removeChild(renderer.domElement);
    };
  }, [boxRef, renderer]);

  return <div ref={boxRef}></div>
}

参考文档

• Three.js教程
• threejs手册