mcpField
3
3d-visualizer

3d-visualizer

github.com/daffy0208创意与媒体38665 次安装44 周前更新
代码仓库

关于 3d-visualizer

3d-visualizer 是用于借助 Three.js 创建 3D 场景、交互图形和 Web 体验的技能，面向构建可视化、产品查看器或 3D 原型的开发者，并提供 React Three Fiber 示例。

主要功能

  1. 01创建 3D 场景和模型
  2. 02设置材质、灯光和相机
  3. 03添加动画与交互
  4. 04构建 3D 图表和网络视图
  5. 05加载模型并优化性能

适用场景

  1. 01创建 360° 产品查看器
  2. 02可视化科学或地理空间数据
  3. 03制作交互式 3D 游戏原型

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/daffy0208/ai-dev-standards --skill 3d-visualizer

安装后在 Claude Code 中输入/3d-visualizer确认已加载。

附带文件manifest.yamlREADME.md

详细介绍

3D 可视化技能

我可以使用 Three.js 帮你创建 3D 可视化、交互式 3D 图形和沉浸式 Web 体验。

我能做什么

3D 图形：

  • 3D 模型和场景
  • 材质和灯光
  • 动画和交互
  • 摄像机控制

3D 数据可视化：

  • 3D 图表和绘图
  • 网络可视化
  • 地理空间数据
  • 科学可视化

交互式 3D：

  • 产品查看器（360°）
  • 配置器
  • 交互式演示
  • 3D 游戏

使用 React Three Fiber 的 Three.js

npm install three @react-three/fiber @react-three/drei
基础 3D 场景
// components/Scene3D.tsx
'use client'
import { Canvas } from '@react-three/fiber'
import { OrbitControls, Box, Sphere } from '@react-three/drei'

export function Scene3D() {
  return (
    <Canvas camera={{ position: [5, 5, 5], fov: 50 }}>
      {/* Lighting */}
      <ambientLight intensity={0.5} />
      <pointLight position={[10, 10, 10]} />

      {/* 3D Objects */}
      <Box position={[-2, 0, 0]} args={[1, 1, 1]}>
        <meshStandardMaterial color="hotpink" />
      </Box>

      <Sphere position={[2, 0, 0]} args={[0.7, 32, 32]}>
        <meshStandardMaterial color="cyan" metalness={0.8} roughness={0.2} />
      </Sphere>

      {/* Camera Controls */}
      <OrbitControls />
    </Canvas>
  )
}

3D 模型加载器

'use client'
import { useGLTF } from '@react-three/drei'
import { Canvas } from '@react-three/fiber'

function Model() {
  const { scene } = useGLTF('/models/product.glb')
  return <primitive object={scene} />
}

export function ProductViewer() {
  return (
    <Canvas>
      <ambientLight intensity={0.5} />
      <spotLight position={[10, 10, 10]} angle={0.15} />

      <Model />

      <OrbitControls
        enableZoom={true}
        enablePan={false}
        minPolarAngle={Math.PI / 4}
        maxPolarAngle={Math.PI / 2}
      />
    </Canvas>
  )
}

3D 动画

'use client'
import { useRef } from 'react'
import { useFrame } from '@react-three/fiber'
import { Mesh } from 'three'

function RotatingCube() {
  const meshRef = useRef<Mesh>(null)

  useFrame((state, delta) => {
    if (meshRef.current) {
      meshRef.current.rotation.x += delta
      meshRef.current.rotation.y += delta * 0.5
    }
  })

  return (
    <mesh ref={meshRef}>
      <boxGeometry args={[2, 2, 2]} />
      <meshStandardMaterial color="orange" />
    </mesh>
  )
}

export function AnimatedScene() {
  return (
    <Canvas>
      <ambientLight />
      <pointLight position={[10, 10, 10]} />
      <RotatingCube />
    </Canvas>
  )
}

3D 图表（柱状图）

'use client'
import { Canvas } from '@react-three/fiber'
import { OrbitControls, Text } from '@react-three/drei'

interface DataPoint {
  label: string
  value: number
  color: string
}

function Bar3D({ position, height, color, label }: {
  position: [number, number, number]
  height: number
  color: string
  label: string
}) {
  return (
    <group position={position}>
      <mesh position={[0, height / 2, 0]}>
        <boxGeometry args={[0.8, height, 0.8]} />
        <meshStandardMaterial color={color} />
      </mesh>

      <Text
        position={[0, -0.5, 0]}
        fontSize={0.3}
        color="black"
      >
        {label}
      </Text>
    </group>
  )
}

export function BarChart3D({ data }: { data: DataPoint[] }) {
  return (
    <Canvas camera={{ position: [5, 5, 8] }}>
      <ambientLight intensity={0.5} />
      <pointLight position={[10, 10, 10]} />

      {data.map((item, i) => (
        <Bar3D
          key={i}
          position={[i * 1.5 - (data.length * 1.5) / 2, 0, 0]}
          height={item.value}
          color={item.color}
          label={item.label}
        />
      ))}

      <OrbitControls />
    </Canvas>
  )
}

// Usage
const salesData = [
  { label: 'Jan', value: 4, color: '#3b82f6' },
  { label: 'Feb', value: 3, color: '#3b82f6' },
  { label: 'Mar', value: 6, color: '#3b82f6' },
  { label: 'Apr', value: 8, color: '#3b82f6' }
]

<BarChart3D data={salesData} />

交互式 3D 产品配置器

'use client'
import { useState } from 'react'
import { Canvas } from '@react-three/fiber'
import { OrbitControls } from '@react-three/drei'

const colors = {
  red: '#ef4444',
  blue: '#3b82f6',
  green: '#10b981',
  yellow: '#f59e0b'
}

function Product({ color }: { color: string }) {
  return (
    <mesh>
      <boxGeometry args={[2, 2, 2]} />
      <meshStandardMaterial color={color} metalness={0.5} roughness={0.3} />
    </mesh>
  )
}

export function ProductConfigurator() {
  const [selectedColor, setSelectedColor] = useState('blue')

  return (
    <div className="flex gap-4">
      <div className="w-2/3">
        <Canvas camera={{ position: [3, 3, 3] }}>
          <ambientLight intensity={0.5} />
          <spotLight position={[10, 10, 10]} />

          <Product color={colors[selectedColor]} />

          <OrbitControls />
        </Canvas>
      </div>

      <div className="w-1/3">
        <h3 className="font-bold mb-4">Choose Color</h3>
        <div className="grid grid-cols-2 gap-2">
          {Object.entries(colors).map(([name, hex]) => (
            <button
              key={name}
              onClick={() => setSelectedColor(name)}
              className={`p-4 rounded border-2 ${
                selectedColor === name ? 'border-black' : 'border-gray-300'
              }`}
              style={{ backgroundColor: hex }}
            >
              {name}
            </button>
          ))}
        </div>
      </div>
    </div>
  )
}

3D 网络图

'use client'
import { Canvas } from '@react-three/fiber'
import { Line } from '@react-three/drei'

interface Node {
  id: string
  position: [number, number, number]
}

interface Edge {
  from: string
  to: string
}

function NetworkGraph({ nodes, edges }: {
  nodes: Node[]
  edges: Edge[]
}) {
  const nodeMap = new Map(nodes.map(n => [n.id, n]))

  return (
    <>
      {/* Nodes */}
      {nodes.map((node) => (
        <mesh key={node.id} position={node.position}>
          <sphereGeometry args={[0.2]} />
          <meshStandardMaterial color="cyan" />
        </mesh>
      ))}

      {/* Edges */}
      {edges.map((edge, i) => {
        const from = nodeMap.get(edge.from)
        const to = nodeMap.get(edge.to)
        if (!from || !to) return null

        return (
          <Line
            key={i}
            points={[from.position, to.position]}
            color="white"
            lineWidth={1}
          />
        )
      })}
    </>
  )
}

export function Network3DVisualization() {
  const nodes = [
    { id: 'A', position: [0, 0, 0] },
    { id: 'B', position: [2, 1, 0] },
    { id: 'C', position: [-2, 1, 0] },
    { id: 'D', position: [0, 2, 1] }
  ]

  const edges = [
    { from: 'A', to: 'B' },
    { from: 'A', to: 'C' },
    { from: 'B', to: 'D' },
    { from: 'C', to: 'D' }
  ]

  return (
    <Canvas camera={{ position: [0, 0, 8] }}>
      <ambientLight />
      <pointLight position={[10, 10, 10]} />

      <NetworkGraph nodes={nodes} edges={edges} />

      <OrbitControls />
    </Canvas>
  )
}

性能优化技巧

实例化网格（多个对象）
'use client'
import { useRef, useMemo } from 'react'
import { useFrame } from '@react-three/fiber'
import * as THREE from 'three'

export function Particles({ count = 1000 }: { count?: number }) {
  const meshRef = useRef<THREE.InstancedMesh>(null)

  const particles = useMemo(() => {
    const temp = []
    for (let i = 0; i < count; i++) {
      const t = Math.random() * 100
      const factor = 20 + Math.random() * 100
      const speed = 0.01 + Math.random() / 200
      temp.push({ t, factor, speed, mx: 0, my: 0 })
    }
    return temp
  }, [count])

  useFrame((state) => {
    if (meshRef.current) {
      particles.forEach((particle, i) => {
        let { t, factor, speed, mx, my } = particle

        t = particle.t += speed
        const a = Math.cos(t) + Math.sin(t * 1) / 10
        const b = Math.sin(t) + Math.cos(t * 2) / 10
        const s = Math.cos(t)

        const dummy = new THREE.Object3D()
        dummy.position.set(
          (mx / 10) * a + Math.cos((t / 10) * factor) + (Math.sin(t * 1) * factor) / 10,
          (my / 10) * b + Math.sin((t / 10) * factor) + (Math.cos(t * 2) * factor) / 10,
          (my / 10) * b + Math.cos((t / 10) * factor) + (Math.sin(t * 3) * factor) / 10
        )
        dummy.scale.set(s, s, s)
        dummy.updateMatrix()
        meshRef.current!.setMatrixAt(i, dummy.matrix)
      })
      meshRef.current.instanceMatrix.needsUpdate = true
    }
  })

  return (
    <instancedMesh ref={meshRef} args={[undefined, undefined, count]}>
      <sphereGeometry args={[0.05, 16, 16]} />
      <meshPhongMaterial color="cyan" />
    </instancedMesh>
  )
}

何时使用我

非常适合：

  • 构建 3D 产品查看器
  • 创建数据可视化
  • 打造交互式 3D 体验
  • 科学可视化
  • 3D 游戏原型

我可以帮你：

  • 搭建 Three.js 项目
  • 加载 3D 模型
  • 创建交互式 3D 内容
  • 优化 3D 性能
  • 构建 3D 图表

我将创建的内容

🎨 3D Scenes
📦 Product Viewers
📊 3D Charts
🌐 Network Graphs
🎮 Interactive 3D
⚡ Performance-Optimized 3D

让我们用 3D 让你的数据和产品焕发生机！

评论

支持 Markdown