JSFiddle - React, Tailwind, and code Playground

by Sharxxy

HTML

<div id="ui">
  <h1>Web3D Studio</h1>
  <button id="addCube">Cube</button>
  <button id="addSphere">Sphere</button>
  <button id="addHumanoid">Humanoid</button>
  <button id="saveFrame">Save Frame</button>
  <button id="playAnim">Play Animation</button>
  <button id="addSound">Add Sound</button>
  <input type="file" id="soundInput" accept="audio/*" hidden>
  <button id="exportGLTF">Export GLTF</button>
</div>
<div id="container"></div>

CSS

body{margin:0;font-family:'Segoe UI';background:#121212;color:#fff;display:flex;flex-direction:column;height:100vh;}
#ui{padding:10px;background:#1f1f1f;display:flex;gap:10px;flex-wrap:wrap;}
button{padding:6px 12px;border:none;border-radius:4px;background:#333;color:#fff;cursor:pointer;transition:.2s;}
button:hover{background:#555;}
#container{flex:1;overflow:hidden;}

JavaScript

// Scene Setup
const container = document.getElementById('container');
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x121212);
const camera = new THREE.PerspectiveCamera(75, container.clientWidth/container.clientHeight, 0.1, 1000);
camera.position.z = 10;
const renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(container.clientWidth, container.clientHeight);
container.appendChild(renderer.domElement);
const controls = new THREE.OrbitControls(camera, renderer.domElement);

// Lights
const light = new THREE.DirectionalLight(0xffffff,1); light.position.set(5,5,5); scene.add(light);
const ambient = new THREE.AmbientLight(0x404040); scene.add(ambient);

// Objects & Animation
let objects=[], keyframes=[], frameIndex=0, isPlaying=false;
let audio = new Audio();

// Add cube
document.getElementById('addCube').onclick = ()=>{
  const cube = new THREE.Mesh(new THREE.BoxGeometry(), new THREE.MeshStandardMaterial({color:Math.random()*0xffffff}));
  cube.position.set(0,0,0); scene.add(cube); objects.push(cube);
}

// Add sphere
document.getElementById('addSphere').onclick = ()=>{
  const sphere = new THREE.Mesh(new THREE.SphereGeometry(0.5,32,32), new THREE.MeshStandardMaterial({color:Math.random()*0xffffff}));
  sphere.position.set(0,0,0); scene.add(sphere); objects.push(sphere);
}

// Add Humanoid (simple rig)
document.getElementById('addHumanoid').onclick = ()=>{
  const group = new THREE.Group();
  const body = new THREE.Mesh(new THREE.BoxGeometry(1,2,0.5), new THREE.MeshStandardMaterial({color:0x00ff00}));
  body.position.y=1; group.add(body);
  const head = new THREE.Mesh(new THREE.BoxGeometry(0.8,0.8,0.8), new THREE.MeshStandardMaterial({color:0xffd700}));
  head.position.y=2.4; group.add(head);
  const leftArm = new THREE.Mesh(new THREE.BoxGeometry(0.3,1.5,0.3), new THREE.MeshStandardMaterial({color:0xff0000}));
  leftArm.position.set(-0.8,1.25,0); group.add(leftArm);
  const rightArm...