React Three.js 实现 Apple 热成像 Logo引言热成像效果是一种通过颜色渐变来表现温度分布的可视化技术在工业检测、医疗影像和艺术创作中都有广泛应用。本文将带你从零开始使用 React 和 Three.js 构建一个动态的 Apple logo 热成像效果。我们将从基础概念出发逐步深入最终实现一个可交互的 3D 场景。## 一、基础概念Three.js 与 React 的结合Three.js 是一个基于 WebGL 的 3D 图形库而 React 是流行的前端框架。通过react-three/fiber和react-three/drei这两个库我们可以将 Three.js 的声明式 API 无缝集成到 React 组件中。### 核心组件介绍-Canvas: 提供 Three.js 渲染上下文-Mesh: 代表 3D 物体包含几何体geometry和材质material-ShaderMaterial: 允许自定义着色器实现热成像效果的关键## 二、环境搭建与基础场景首先我们需要安装必要的依赖包。创建一个新的 React 项目然后安装bashnpm install three react-three/fiber react-three/drei接下来我们创建一个基础场景包含一个简单的 3D 物体jsx// App.jsx - 基础 Three.js 场景import React from react;import { Canvas } from react-three/fiber;import { OrbitControls } from react-three/drei;// 定义一个简单的立方体组件function Box() { return ( mesh {/* 几何体长方体 */} boxGeometry args{[2, 2, 2]} / {/* 材质标准材质带颜色 */} meshStandardMaterial colorhotpink / /mesh );}export default function App() { return ( div style{{ width: 100vw, height: 100vh }} {/* Canvas 是 Three.js 的渲染容器 */} Canvas camera{{ position: [0, 0, 5] }} {/* 环境光提供基础照明 */} ambientLight intensity{0.5} / {/* 点光源提供方向性照明 */} pointLight position{[10, 10, 10]} / {/* 我们的 3D 对象 */} Box / {/* 轨道控制器允许用户旋转视角 */} OrbitControls / /Canvas /div );}这段代码创建了一个基础的 3D 场景一个粉色的立方体支持鼠标拖拽旋转。这是理解 Three.js 在 React 中工作的第一步。## 三、热成像效果的原理热成像效果的核心是通过颜色映射color mapping来表现数据。在 3D 图形中我们可以通过顶点着色器vertex shader和片元着色器fragment shader来控制每个像素的颜色。### 颜色映射技术1.线性渐变从蓝色低温到红色高温2.伪彩色使用彩虹色阶3.自定义调色板根据需求设计颜色过渡我们将使用自定义着色器基于模型表面的法线方向或自定义数据来生成热成像效果。## 四、实现 Apple Logo 模型为了简化我们使用内置几何体组合成 Apple logo 的形状。实际项目中可以导入 SVG 或 GLTF 模型。jsx// AppleLogo.jsx - Apple Logo 3D 模型import React from react;import * as THREE from three;export default function AppleLogo() { return ( group {/* 主体使用圆环几何体组合 */} mesh position{[-1, 0, 0]} ringGeometry args{[0.8, 1.2, 32]} / meshStandardMaterial colorgray / /mesh mesh position{[1, 0, 0]} ringGeometry args{[0.8, 1.2, 32]} / meshStandardMaterial colorgray / /mesh {/* 叶子使用球体 */} mesh position{[0, 1.2, 0]} sphereGeometry args{[0.3, 16, 16]} / meshStandardMaterial colorgreen / /mesh {/* 茎使用圆柱体 */} mesh position{[0, 0.8, 0]} cylinderGeometry args{[0.1, 0.1, 0.5, 8]} / meshStandardMaterial colorbrown / /mesh /group );}## 五、热成像着色器实现现在进入核心部分——自定义着色器。我们将创建一个 ShaderMaterial通过顶点位置和自定义数据来生成热成像颜色。### 顶点着色器glsl// vertex.glslvarying float vTemperature;void main() { // 基于位置计算温度值模拟热源 vTemperature position.y position.x * 0.5; gl_Position projectionMatrix * modelViewMatrix * vec4(position, 1.0);}### 片元着色器glsl// fragment.glslvarying float vTemperature;void main() { // 颜色映射从蓝色到红色 vec3 color1 vec3(0.0, 0.0, 1.0); // 蓝色 vec3 color2 vec3(1.0, 0.0, 0.0); // 红色 // 根据温度插值 vec3 finalColor mix(color1, color2, vTemperature); gl_FragColor vec4(finalColor, 1.0);}### 完整的 React 组件jsx// ThermalApple.jsx - 热成像 Apple Logoimport React, { useMemo } from react;import * as THREE from three;import { useFrame } from react-three/fiber;export default function ThermalApple() { // 创建自定义着色器材质 const shaderMaterial useMemo(() { return new THREE.ShaderMaterial({ // 顶点着色器传递位置信息作为温度 vertexShader: varying float vTemperature; void main() { // 基于位置和时间的温度计算 vTemperature position.y * 0.5 position.x * 0.3 0.5; gl_Position projectionMatrix * modelViewMatrix * vec4(position, 1.0); } , // 片元着色器颜色映射 fragmentShader: varying float vTemperature; void main() { // 热成像色阶蓝 - 青 - 黄 - 红 vec3 colorLow vec3(0.0, 0.0, 1.0); // 蓝色 vec3 colorMid vec3(0.0, 1.0, 0.0); // 绿色 vec3 colorHigh vec3(1.0, 0.0, 0.0); // 红色 vec3 finalColor; if (vTemperature 0.5) { finalColor mix(colorLow, colorMid, vTemperature * 2.0); } else { finalColor mix(colorMid, colorHigh, (vTemperature - 0.5) * 2.0); } gl_FragColor vec4(finalColor, 1.0); } , // 传递 uniforms这里可以添加时间等动态数据 uniforms: {} }); }, []); return ( group {/* 主体部分应用热成像着色器 */} mesh position{[-1, 0, 0]} material{shaderMaterial} ringGeometry args{[0.8, 1.2, 64]} / /mesh mesh position{[1, 0, 0]} material{shaderMaterial} ringGeometry args{[0.8, 1.2, 64]} / /mesh {/* 叶子 */} mesh position{[0, 1.2, 0]} material{shaderMaterial} sphereGeometry args{[0.3, 32, 32]} / /mesh {/* 茎 */} mesh position{[0, 0.8, 0]} material{shaderMaterial} cylinderGeometry args{[0.1, 0.1, 0.5, 16]} / /mesh /group );}## 六、动态热成像效果为了让效果更生动我们可以添加时间变量让热成像图案动态变化。jsx// DynamicThermalApple.jsx - 动态热成像import React, { useMemo, useRef } from react;import * as THREE from three;import { useFrame } from react-three/fiber;export default function DynamicThermalApple() { const materialRef useRef(); // 创建包含时间 uniform 的着色器 const shaderMaterial useMemo(() { return new THREE.ShaderMaterial({ uniforms: { uTime: { value: 0 } }, vertexShader: varying float vTemperature; uniform float uTime; void main() { // 动态温度随时间变化的正弦波 vTemperature sin(position.x * 2.0 uTime) * 0.5 0.5; gl_Position projectionMatrix * modelViewMatrix * vec4(position, 1.0); } , fragmentShader: varying float vTemperature; void main() { vec3 color1 vec3(0.0, 0.0, 1.0); // 蓝 vec3 color2 vec3(1.0, 1.0, 0.0); // 黄 vec3 color3 vec3(1.0, 0.0, 0.0); // 红 vec3 finalColor; if (vTemperature 0.5) { finalColor mix(color1, color2, vTemperature * 2.0); } else { finalColor mix(color2, color3, (vTemperature - 0.5) * 2.0); } gl_FragColor vec4(finalColor, 1.0); } }); }, []); // 每帧更新时间 uniform useFrame((state) { if (materialRef.current) { materialRef.current.uniforms.uTime.value state.clock.elapsedTime; } }); return ( group mesh position{[-1, 0, 0]} ref{materialRef} material{shaderMaterial} ringGeometry args{[0.8, 1.2, 64]} / /mesh mesh position{[1, 0, 0]} material{shaderMaterial} ringGeometry args{[0.8, 1.2, 64]} / /mesh /group );}## 七、整合到主应用最后我们将所有组件整合到主应用中并添加一些交互元素jsx// App.jsx - 主应用import React from react;import { Canvas } from react-three/fiber;import { OrbitControls, Stats } from react-three/drei;import DynamicThermalApple from ./DynamicThermalApple;export default function App() { return ( div style{{ width: 100vw, height: 100vh, background: #1a1a2e }} Canvas camera{{ position: [0, 0, 6], fov: 60 }} {/* 环境光 */} ambientLight intensity{0.3} / {/* 点光源 */} pointLight position{[5, 5, 5]} intensity{0.8} / {/* 动态热成像 Apple Logo */} DynamicThermalApple / {/* 轨道控制器 */} OrbitControls enablePan{false} minDistance{3} maxDistance{10} / {/* 性能统计 */} Stats / /Canvas {/* UI 提示 */} div style{{ position: absolute, bottom: 20, left: 50%, transform: translateX(-50%), color: white, fontFamily: Arial, fontSize: 14, opacity: 0.7 }} 拖拽旋转 · 滚轮缩放 /div /div );}## 总结通过本文我们完成了从零到一的 React Three.js 热成像 Apple Logo 实现。整个过程涵盖了1.基础环境搭建使用react-three/fiber和react-three/drei集成 Three.js2.3D 模型构建组合基础几何体模拟 Apple Logo 形状3.着色器编程通过 GLSL 实现颜色映射从简单的线性渐变到动态热成像4.交互优化添加轨道控制器和性能统计热成像效果的核心在于着色器中的颜色映射算法。在实际项目中你可以- 使用更复杂的调色板如彩虹色阶- 导入真实的 3D 模型文件- 添加鼠标交互让温度随光标位置变化- 结合 WebRTC 实现实时热成像数据可视化这个项目展示了前端技术与计算机图形学的完美结合为数据可视化和创意编程提供了无限可能。欢迎在此基础上继续探索创造出更多惊艳的视觉效果。
