第八部分-周边生态与工具——39. 框架集成

39. 框架集成

1. 概述

框架集成将 Three.js 与前端框架（React、Vue、Angular、Svelte）结合，提供组件化的 3D 开发体验。React Three Fiber 是最流行的 Three.js React 渲染器。

┌─────────────────────────────────────────────────────────────┐ │ 框架集成生态 │ ├─────────────────────────────────────────────────────────────┤ │ │ │ React Three Fiber │ │ ├── 特点：React 组件化 │ │ ├── 语法：JSX 描述 3D 场景 │ │ ├── 生态：@react-three/fiber, @react-three/drei │ │ └── 适用：React 项目 │ │ │ │ Vue Three │ │ ├── 特点：Vue 3 组合式 API │ │ ├── 语法：模板 + 组件 │ │ ├── 生态：vue-three │ │ └── 适用：Vue 3 项目 │ │ │ │ Angular Three │ │ ├── 特点：Angular 指令 │ │ ├── 语法：模板指令 │ │ ├── 生态：angular-three │ │ └── 适用：Angular 项目 │ │ │ └─────────────────────────────────────────────────────────────┘

2. React Three Fiber

2.1 安装和导入

npminstallthree @react-three/fiber @react-three/drei

import { Canvas } from '@react-three/fiber'; import { OrbitControls, Box, Sphere } from '@react-three/drei'; function App() { return ( <Canvas> <ambientLight intensity={0.5} /> <directionalLight position={[5, 10, 7]} /> <Box position={[-1, 0, 0]}> <meshStandardMaterial color="#ff6600" /> </Box> <Sphere position={[1, 0, 0]}> <meshStandardMaterial color="#44aa88" /> </Sphere> <OrbitControls /> </Canvas> ); }

2.2 组件化

import { Canvas, useFrame } from '@react-three/fiber'; import { useRef, useState } from 'react'; function RotatingCube() { const meshRef = useRef(); const [hovered, setHovered] = useState(false); useFrame(() => { meshRef.current.rotation.x += 0.01; meshRef.current.rotation.y += 0.01; }); return ( <mesh ref={meshRef} onPointerOver={() => setHovered(true)} onPointerOut={() => setHovered(false)} > <boxGeometry args={[1, 1, 1]} /> <meshStandardMaterial color={hovered ? '#ff6600' : '#44aa88'} /> </mesh> ); } function App() { return ( <Canvas> <ambientLight intensity={0.5} /> <pointLight position={[10, 10, 10]} /> <RotatingCube /> </Canvas> ); }

2.3 加载模型

import { useGLTF } from '@react-three/drei'; function Model({ url }) { const { scene } = useGLTF(url); return <primitive object={scene} scale={0.5} />; } function App() { return ( <Canvas> <ambientLight intensity={0.5} /> <directionalLight position={[5, 10, 7]} /> <Model url="/models/character.glb" /> <OrbitControls /> </Canvas> ); }

2.4 动画和状态

import { Canvas, useFrame } from '@react-three/fiber'; import { useRef, useState } from 'react'; function AnimatedSphere() { const meshRef = useRef(); const [active, setActive] = useState(false); useFrame((state, delta) => { meshRef.current.rotation.y += 0.01; if (active) { meshRef.current.scale.x = 1 + Math.sin(state.clock.elapsedTime * 5) * 0.2; meshRef.current.scale.y = 1 + Math.sin(state.clock.elapsedTime * 5) * 0.2; meshRef.current.scale.z = 1 + Math.sin(state.clock.elapsedTime * 5) * 0.2; } }); return ( <mesh ref={meshRef} onClick={() => setActive(!active)} position={[0, 0, 0]} > <sphereGeometry args={[1, 64, 64]} /> <meshStandardMaterial color={active ? '#ff6600' : '#44aa88'} /> </mesh> ); }

3. Vue Three

3.1 安装和导入

npminstallthree @vue-three/core

<template> <Canvas> <ambientLight :intensity="0.5" /> <directionalLight :position="[5, 10, 7]" /> <mesh :position="[-1, 0, 0]"> <boxGeometry :args="[1, 1, 1]" /> <meshStandardMaterial color="#ff6600" /> </mesh> <mesh :position="[1, 0, 0]"> <sphereGeometry :args="[0.8, 64, 64]" /> <meshStandardMaterial color="#44aa88" /> </mesh> <OrbitControls /> </Canvas> </template> <script setup> import { Canvas, OrbitControls } from '@vue-three/core'; </script>

4. Angular Three

4.1 安装

npminstallthree angular-three

import{Component}from'@angular/core';import{NgtCanvas}from'angular-three';@Component({selector:'app-scene',template:`<ngt-canvas> <ngt-ambient-light [intensity]="0.5" /> <ngt-directional-light [position]="[5, 10, 7]" /> <ngt-mesh [position]="[-1, 0, 0]"> <ngt-box-geometry [args]="[1, 1, 1]" /> <ngt-mesh-standard-material color="#ff6600" /> </ngt-mesh> <ngt-mesh [position]="[1, 0, 0]"> <ngt-sphere-geometry [args]="[0.8, 64, 64]" /> <ngt-mesh-standard-material color="#44aa88" /> </ngt-mesh> <ngt-orbit-controls /> </ngt-canvas>`})exportclassSceneComponent{}

5. 完整示例

import React, { useState, useRef, Suspense } from 'react'; import { Canvas, useFrame } from '@react-three/fiber'; import { OrbitControls, useGLTF, Html, Text, Environment } from '@react-three/drei'; import * as THREE from 'three'; // 旋转立方体组件 function RotatingCube({ position, color }) { const meshRef = useRef(); const [hovered, setHovered] = useState(false); useFrame((state) => { meshRef.current.rotation.x += 0.01; meshRef.current.rotation.y += 0.01; }); return ( <mesh ref={meshRef} position={position} onPointerOver={() => setHovered(true)} onPointerOut={() => setHovered(false)} castShadow > <boxGeometry args={[1, 1, 1]} /> <meshStandardMaterial color={hovered ? '#ff6600' : color} metalness={0.5} roughness={0.3} /> </mesh> ); } // 旋转球体组件 function RotatingSphere({ position, color }) { const meshRef = useRef(); useFrame((state) => { meshRef.current.rotation.y += 0.01; meshRef.current.scale.x = 1 + Math.sin(state.clock.elapsedTime * 2) * 0.1; meshRef.current.scale.y = 1 + Math.sin(state.clock.elapsedTime * 2) * 0.1; meshRef.current.scale.z = 1 + Math.sin(state.clock.elapsedTime * 2) * 0.1; }); return ( <mesh position={position} ref={meshRef} castShadow> <sphereGeometry args={[0.8, 64, 64]} /> <meshStandardMaterial color={color} metalness={0.5} roughness={0.3} /> </mesh> ); } // 地面组件 function Ground() { return ( <mesh rotation={[-Math.PI / 2, 0, 0]} position={[0, -1, 0]} receiveShadow> <planeGeometry args={[10, 10]} /> <meshStandardMaterial color="#336699" side={THREE.DoubleSide} /> </mesh> ); } // 模型加载组件 function ModelViewer({ url, position, scale = 1 }) { const { scene } = useGLTF(url); return <primitive object={scene} position={position} scale={scale} />; } // 主应用 function App() { const [showModel, setShowModel] = useState(false); return ( <div style={{ width: '100vw', height: '100vh' }}> <Canvas shadows camera={{ position: [5, 5, 8], fov: 45 }}> {/* 光源 */} <ambientLight intensity={0.5} /> <directionalLight position={[5, 10, 7]} intensity={1} castShadow shadow-mapSize-width={1024} shadow-mapSize-height={1024} /> <pointLight position={[2, 3, 4]} intensity={0.5} /> {/* 辅助 */} <OrbitControls enableDamping /> <Environment preset="city" /> {/* 物体 */} <RotatingCube position={[-2, 0, 0]} color="#ff6600" /> <RotatingSphere position={[0, 0, 0]} color="#44aa88" /> <RotatingCube position={[2, 0, 0]} color="#88aaff" /> {/* 地面 */} <Ground /> {/* 3D 文字 */} <Text position={[0, 1.5, 0]} fontSize={0.5} color="#ffffff" anchorX="center" anchorY="middle" > React Three Fiber </Text> {/* 模型加载 */} {showModel && ( <Suspense fallback={null}> <ModelViewer url="/models/character.glb" position={[0, 0, 2]} scale={0.5} /> </Suspense> )} {/* HTML 覆盖层 */} <Html position={[0, -1.2, 0]}> <div style={{ background: 'rgba(0,0,0,0.7)', padding: '8px', borderRadius: '4px', color: 'white' }}> 3D 场景 </div> </Html> </Canvas> {/* UI 控制 */} <div style={{ position: 'absolute', bottom: '20px', left: '20px', background: 'rgba(0,0,0,0.7)', padding: '10px', borderRadius: '5px', color: 'white', zIndex: 100 }}> <button onClick={() => setShowModel(!showModel)} style={{ padding: '8px 16px', background: '#ff6600', border: 'none', borderRadius: '4px', color: 'white', cursor: 'pointer' }} > {showModel ? '隐藏' : '显示'}模型 </button> </div> </div> ); } export default App;

6. 框架对比

7. 总结