look ma, theres 3D now

2025-09-25 20:47:58 +00:00
parent 7c6047462f
commit 73e2b5a762
11 changed files with 78778 additions and 61 deletions
@@ -0,0 +1,140 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <title>Three.js + OrbitControls (importmap)</title>
+  <style>
+    body { margin: 0; overflow: hidden; }
+    canvas { display: block; }
+  </style>
+</head>
+<body>
+  <!-- Import map tells browser where "three" lives -->
+  <script type="importmap">
+  {
+    "imports": {
+      "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js"
+    }
+  }
+  </script>
+
+  <script type="module">
+    import * as THREE from "three"
+    import { OrbitControls } from "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/jsm/controls/OrbitControls.js"
+
+    // Scene
+    const scene = new THREE.Scene()
+    scene.background = new THREE.Color(0x202080)
+
+    // Camera
+    const perspCam = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
+    perspCam.position.set(3, 3, 5)
+
+    const aspect = window.innerWidth / window.innerHeight
+    const frustumSize = 10 
+    const cam2d = new THREE.OrthographicCamera(
+    -frustumSize * aspect / 2,
+    frustumSize * aspect / 2,
+    frustumSize / 2,
+    -frustumSize / 2,
+    0.1,
+    1000
+    ) 
+
+    cam2d.position.set(0, 100, 0)
+
+    cam2d.lookAt(0, 0, 0)
+
+    let activeCam = perspCam
+
+    // Renderer
+    const renderer = new THREE.WebGLRenderer({ antialias: true })
+    renderer.setSize(window.innerWidth, window.innerHeight)
+    document.body.appendChild(renderer.domElement)
+
+    // Cube
+    const geometry = new THREE.BoxGeometry()
+    const material = new THREE.MeshStandardMaterial({ color: 'red' })
+    const cube = new THREE.Mesh(geometry, material)
+    scene.add(cube)
+    cube.position.x+=2
+
+
+    // Light
+    const light = new THREE.DirectionalLight(0xffffff, 1)
+    light.position.set(5, 5, 5)
+    light.intensity = 2
+    scene.add(light)
+    this.scene.add(new THREE.AmbientLight(0xffffff, 0.4))
+
+    const snowman = new THREE.Group()
+
+    // Bottom sphere
+    const bottom = new THREE.Mesh(
+    new THREE.SphereGeometry(1, 32, 32),
+    new THREE.MeshStandardMaterial({ color: 'white' })
+    )
+    snowman.add(bottom)
+
+    // Middle sphere
+    const middle = new THREE.Mesh(
+    new THREE.SphereGeometry(0.7, 32, 32),
+    new THREE.MeshStandardMaterial({ color: 'white' })
+    )
+    middle.position.y = 1.3
+    snowman.add(middle)
+
+    // Head
+    const head = new THREE.Mesh(
+    new THREE.SphereGeometry(0.5, 32, 32),
+    new THREE.MeshStandardMaterial({ color: 'white' })
+    )
+    head.position.y = 2.3
+    snowman.add(head)
+    scene.add(new THREE.AmbientLight(0xffffff, 0.5) )
+    // Add the group to the scene
+    scene.add(snowman)
+
+    // Optional: expose to console
+    window.snowman = snowman
+
+    // Controls
+    const controls = new OrbitControls(perspCam, renderer.domElement)
+
+    // Resize handler
+    window.addEventListener('resize', () => {
+      perspCam.aspect = window.innerWidth / window.innerHeight
+      perspCam.updateProjectionMatrix()
+      renderer.setSize(window.innerWidth, window.innerHeight)
+    })
+
+    // Animation loop
+    function animate() {
+      requestAnimationFrame(animate)
+      cube.rotation.x += 0.01
+      cube.rotation.y += 0.01
+      controls.update()
+      renderer.render(scene, activeCam)
+    }
+
+    window.addEventListener('keydown', (e) => {
+    if (e.key.toLowerCase() === 'o') {
+        activeCam = (activeCam === perspCam ? cam2d : perspCam)
+        console.log('Switched to', activeCam.isPerspectiveCamera ? 'Perspective' : 'Orthographic')
+    }
+    })
+
+    animate()
+
+    window.THREE = THREE
+    window.scene = scene
+    window.renderer = renderer
+    window.cube = cube
+    window.light = light
+    light.intensity = 2
+
+
+
+  </script>
+</body>
+</html>