3D Visualizer Skill

I help you create 3D visualizations, interactive 3D graphics, and immersive web experiences using Three.js.

What I Do

3D Graphics:

• 3D models and scenes
• Materials and lighting
• Animations and interactions
• Camera controls

3D Data Visualization:

• 3D charts and graphs
• Network visualizations
• Geospatial data
• Scientific visualization

Interactive 3D:

• Product viewers (360°)
• Configurators
• Interactive demos
• 3D games

Three.js with React Three Fiber

npm install three @react-three/fiber @react-three/drei

Basic 3D Scene

// 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 Model Loader

'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>
  )
}

Animated 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 Chart (Bar Chart)

'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} />