three.js+发光贴图

基础概念

Three.js 是一个基于 WebGL 的 JavaScript 3D 库，用于在网页上创建和显示动画3D计算机图形。它简化了WebGL的复杂性，使得开发者可以更容易地创建交互式的3D体验。

发光贴图（Emissive Map） 是一种纹理贴图，用于模拟物体自身发出光线的效果。这种贴图通常用于增强物体的视觉效果，使其看起来像是自发光的，而不是仅仅反射环境光。

类型与应用场景

类型：发光贴图通常是RGB贴图，其中每个颜色通道的值决定了相应区域发光的强度。
应用场景：
- 游戏中的角色装备、车辆或其他装饰元素。
- 用户界面中的按钮或图标，以吸引用户注意。
- 虚拟现实和增强现实应用中的交互元素。

示例代码

以下是一个简单的Three.js示例，展示如何使用发光贴图：

// 引入three.js库
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

// 创建场景、相机和渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 加载模型和发光贴图
const textureLoader = new THREE.TextureLoader();
const emissiveTexture = textureLoader.load('path/to/emissive-texture.jpg');
const material = new THREE.MeshStandardMaterial({ emissive: emissiveTexture });
const geometry = new THREE.BoxGeometry();
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

camera.position.z = 5;

// 添加轨道控制
const controls = new OrbitControls(camera, renderer.domElement);

// 渲染循环
function animate() {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  controls.update();
  renderer.render(scene, camera);
}

animate();