JIT
creating a 3d model studio with user interface and editing options
Log in
@donotknow
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>3D Model Studio</title> <style> body { margin: 0; overflow: hidden; font-family: sans-serif; } canvas { display: block; } #ui { position: absolute; top: 10px; left: 10px; background: rgba(255,255,255,0.8); padding: 10px; border-radius: 4px; max-width: 250px; overflow-y: auto; max-height: 95vh; } #ui input[type="file"], #ui input[type="color"] { display: block; margin-bottom: 10px; width: 100%; } #userModels, #gltfModels, #spGltfModels, #modules, #betaEditor { margin-top: 10px; } #userModels h3, #gltfModels h3, #spGltfModels h3, #modules h3, #betaEditor h3 { margin: 5px 0; } #userModels button, #gltfModels button, #spGltfModels button, #modules button, #betaEditor button { display: block; width: 100%; margin-bottom: 5px; padding: 5px; font-size: 14px; } #panels { position: absolute; top: 10px; right: 10px; background: rgba(255,255,255,0.8); padding: 10px; border-radius: 4px; max-width: 300px; max-height: 95vh; overflow-y: auto; } #panels h3 { margin: 5px 0; } #panels textarea { width: 100%; height: 100px; margin-bottom: 10px; font-family: monospace; font-size: 12px; } </style> <script type="importmap"> { "imports": { "three": "https://cdn.jsdelivr.net/npm/three@0.166/build/three.module.js", "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.166/examples/jsm/" } } </script> </head> <body> <div id="ui"> <input type="file" id="fileInput" accept=".gltf,.glb" /> <input type="color" id="colorPicker" value="#ff0000" /> <input type="color" id="gltfColorPicker" value="#00ff00" /> <button id="resetBtn">Reset Scene</button> <div id="userModels"> <h3>User Models</h3> <button data-model="cube">Add Cube</button> <button data-model="sphere">Add Sphere</button> <button data-model="torus">Add Torus</button> <button data-model="cone">Add Cone</button> <button data-model="cylinder">Add Cylinder</button> <button data-model="hexagon">Add Hexagon</button> <button data-model="pentagon">Add Pentagon</button> <button data-model="rectangle">Add Rectangle</button> </div> <div id="gltfModels"> <h3>GLTF Models</h3> <button data-gltf="https://cdn.jsdelivr.net/gh/KhronosGroup/glTF-Sample-Models@master/2.0/Duck/glTF-Binary/Duck.glb">Duck</button> <button data-gltf="https://cdn.jsdelivr.net/gh/KhronosGroup/glTF-Sample-Models@master/2.0/Avocado/glTF-Binary/Avocado.glb">Avocado</button> <button data-gltf="https://cdn.jsdelivr.net/gh/KhronosGroup/glTF-Sample-Models@master/2.0/CesiumMan/glTF-Binary/CesiumMan.glb">CesiumMan</button> <button data-gltf="https://cdn.jsdelivr.net/gh/KhronosGroup/glTF-Sample-Models@master/2.0/BoomBox/glTF-Binary/BoomBox.glb">BoomBox</button> <button data-gltf="https://cdn.jsdelivr.net/gh/KhronosGroup/glTF-Sample-Models@master/2.0/DamagedHelmet/glTF-Binary/DamagedHelmet.glb">Damaged Helmet</button> <button data-gltf="https://cdn.jsdelivr.net/gh/KhronosGroup/glTF-Sample-Models@master/2.0/Fox/glTF-Binary/Fox.glb">Fox</button> <button data-gltf="https://cdn.jsdelivr.net/gh/KhronosGroup/glTF-Sample-Models@master/2.0/FlightHelmet/glTF-Binary/FlightHelmet.glb">Flight Helmet</button> </div> <div id="spGltfModels"> <h3>SP GLTF Models</h3> <button data-gltf="https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/BrainStem/glTF-Binary/BrainStem.glb">BrainStem</button> <button data-gltf="https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/Monster/glTF-Binary/Monster.glb">Monster</button> <button data-gltf="https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/SciFiHelmet/glTF-Binary/SciFiHelmet.glb">SciFi Helmet</button> <button data-gltf="https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/WaterBottle/glTF-Binary/WaterBottle.glb">Water Bottle</button> </div> <div id="modules"> <h3>Three.js Modules</h3> <button data-module="OrbitControls">OrbitControls</button> <button data-module="GLTFLoader">GLTFLoader</button> <button data-module="DRACOLoader">DRACOLoader</button> <button data-module="RGBELoader">RGBELoader</button> <button data-module="EffectComposer">EffectComposer</button> <button data-module="OutlinePass">OutlinePass</button> <button data-module="SSAOPass">SSAOPass</button> <button data-module="UnrealBloomPass">UnrealBloomPass</button> </div> <div id="betaEditor"> <h3>Beta Model Editor</h3> <button id="betaAddCube">Add Beta Cube</button> <button id="betaAddSphere">Add Beta Sphere</button> <button id="betaClear">Clear Beta Models</button> </div> </div> <div id="panels"> <h3>UI BETA Core</h3> <textarea id="uiBetaCore">// UI Beta Core Scripts</textarea> <button id="runUiBetaCore">Run UI Beta Core</button> <h3>Style Editor (CSS)</h3> <textarea id="styleEditor">/* Enter CSS here */</textarea> <button id="applyStyle">Apply Style</button> <h3>Script Editor (JS)</h3> <textarea id="scriptEditor">// Enter JavaScript here</textarea> <button id="runScript">Run Script</button> <h3>HTML Editor</h3> <textarea id="htmlEditor"><!-- Enter HTML here --></textarea> <button id="applyHTML">Apply HTML</button> </div> <script type="module" src="main.js"></script> </body> </html> .
DeepSeek V3

I'll help you set up the 3D Model Studio project. Here's the complete setup with the main JavaScript file:

Updated files
v1
@mimopppjl
Hi I want take for me one gallery make up ....and I want the gallery is so beautiful
DeepSeek V3

I'll create a beautiful 3D makeup gallery for you. Here's the enhanced version with a makeup theme:

Updated files
v2
@mimopppjl
Send the code
DeepSeek V3

I'll provide the code for the 3D makeup gallery. Here's the complete implementation:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>3D Makeup Gallery</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
      font-family: 'Arial', sans-serif;
    }
    canvas {
      display: block;
    }
    #info {
      position: absolute;
      bottom: 20px;
      width: 100%;
      text-align: center;
      color: #333;
      font-size: 18px;
      pointer-events: none;
      text-shadow: 0 0 5px white;
    }
    #controls {
      position: absolute;
      top: 20px;
      right: 20px;
      background: rgba(255, 255, 255, 0.8);
      padding: 15px;
      border-radius: 10px;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
    button {
      background: linear-gradient(to bottom, #ffb6c1, #ff69b4);
      border: none;
      color: white;
      padding: 8px 15px;
      margin: 5px;
      border-radius: 20px;
      cursor: pointer;
      font-weight: bold;
      box-shadow: 0 2px 5px rgba(0,0,0,0.2);
      transition: all 0.3s;
    }
    button:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    }
  </style>
</head>
<body>
  <div id="info">✨ Beautiful Makeup Gallery ✨<br>Drag to rotate | Scroll to zoom</div>
  <div id="controls">
    <button id="changeColor">Change Colors</button>
    <button id="addProduct">Add Product</button>
  </div>
  <script type="module">
    import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.166/build/three.module.js';
    import { OrbitControls } from 'https://cdn.jsdelivr.net/npm/three@0.166/examples/jsm/controls/OrbitControls.js';

    // Scene setup with elegant background
    const scene = new THREE.Scene();
    scene.background = new THREE.Color(0xf0e6ff);

    // Camera with better positioning
    const camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.set(0, 1.5, 5);

    // Enhanced renderer with better antialiasing
    const renderer = new THREE.WebGLRenderer({ 
      antialias: true,
      powerPreference: "high-performance"
    });
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.shadowMap.enabled = true;
    renderer.shadowMap.type = THREE.PCFSoftShadowMap;
    document.body.appendChild(renderer.domElement);

    // Soft controls
    const controls = new OrbitControls(camera, renderer.domElement);
    controls.enableDamping = true;
    controls.dampingFactor = 0.05;
    controls.minDistance = 2;
    controls.maxDistance = 10;

    // Elegant lighting setup
    const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
    scene.add(ambientLight);

    const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
    directionalLight.position.set(3, 10, 5);
    directionalLight.castShadow = true;
    directionalLight.shadow.mapSize.width = 1024;
    directionalLight.shadow.mapSize.height = 1024;
    scene.add(directionalLight);

    // Soft spotlight for highlighting
    const spotLight = new THREE.SpotLight(0xfff0f0, 1, 10, Math.PI/6, 0.5);
    spotLight.position.set(0, 3, 3);
    spotLight.castShadow = true;
    scene.add(spotLight);

    // Makeup product display area
    const displayPlatform = new THREE.Mesh(
      new THREE.CylinderGeometry(3, 3, 0.1, 64),
      new THREE.MeshStandardMaterial({ 
        color: 0xffffff,
        metalness: 0.1,
        roughness: 0.2
      })
    );
    displayPlatform.rotation.x = -Math.PI / 2;
    displayPlatform.position.y = -0.5;
    displayPlatform.receiveShadow = true;
    scene.add(displayPlatform);

    // Mirror for makeup visualization
    const mirrorGeometry = new THREE.PlaneGeometry(2, 1.5);
    const mirror = new THREE.Mesh(
      mirrorGeometry,
      new THREE.MeshStandardMaterial({
        color: 0x333333,
        metalness: 0.9,
        roughness: 0.1
      })
    );
    mirror.position.set(0, 1.2, -1.5);
    mirror.rotation.y = Math.PI;
    scene.add(mirror);

    // Makeup products array
    const makeupProducts = [
      { name: "Lipstick", color: 0xff6b81, position: [-1, 0, 0], scale: 0.5 },
      { name: "Eyeshadow", color: 0x9b59b6, position: [0, 0, 1], scale: 0.4 },
      { name: "Mascara", color: 0x000000, position: [1, 0, 0], scale: 0.3 },
      { name: "Blush", color: 0xffb8b8, position: [0, 0, -1], scale: 0.4 },
      { name: "Foundation", color: 0xf5d0b3, position: [-0.5, 0, 0.5], scale: 0.4 },
      { name: "Highlighter", color: 0xf9e79f, position: [0.5, 0, 0.5], scale: 0.3 }
    ];

    // Create makeup products
    makeupProducts.forEach(product => {
      const geometry = new THREE.CylinderGeometry(0.3 * product.scale, 0.3 * product.scale, 0.8 * product.scale, 32);
      const material = new THREE.MeshStandardMaterial({ 
        color: product.color,
        metalness: 0.2,
        roughness: 0.3
      });
@bopbrand70
Creat Job portal..Job posting option ...job display in home page ...using json..and job datas should saved
DeepSeek V3

Here's a comprehensive job portal setup with job posting and display functionality using JSON for data storage:

Updated files
v3
@bopbrand70
Creat a job portal and job posting option job should display in home page ..
DeepSeek V3
@bopbrand70
Creat Job portal ..job posting option
DeepSeek V3

Here's a complete job portal with job posting functionality and display on the homepage:

This job portal includes:

  1. A clean, responsive design
  2. Modal form for posting new jobs
  3. Local storage for persisting job data
  4. Job cards display on homepage
  5. Form validation
  6. Interactive UI elements

The jobs are stored in the browser's localStorage, so they'll persist between sessions. The interface allows users to:

  • View all posted jobs on the homepage
  • Open a modal to post new jobs
  • See job details including title, company, location, type, salary and description
Updated files
v4
@bopbrand70
creat job portal home page website
DeepSeek V3
@bopbrand70
creat job portal home page website use boostrap
DeepSeek V3
@bopbrand70
DeepSeek V3
@bopbrand70
DeepSeek V3
@bopbrand70
DeepSeek V3