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 } /
< / 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 } /
Interactive 3D Product Configurator '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
) } Network Graph 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
) } Performance Tips Instanced Mesh (Many Objects) '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
) } When to Use Me Perfect for: Building 3D product viewers Creating data visualizations Interactive 3D experiences Scientific visualization 3D game prototypes I'll help you: Set up Three.js projects Load 3D models Create interactive 3D Optimize 3D performance Build 3D charts What I'll Create 🎨 3D Scenes 📦 Product Viewers 📊 3D Charts 🌐 Network Graphs 🎮 Interactive 3D ⚡ Performance-Optimized 3D Let's bring your data and products to life in 3D!