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,87 @@
+import * as THREE from './three.module.js';
+import { OrbitControls } from './OrbitControls.module.js';
+
+export class Threetobus{
+
+    constructor(canvasEl){
+        this.canvasEl = canvasEl
+    }
+
+    init(){
+        // Scene
+            this.scene = new THREE.Scene()
+            //scene.background = new THREE.Color(0x202080)
+        
+            // Camera
+            this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
+            this.camera.position.set(3, 3, 5)
+
+            // Renderer
+            this.renderer = new THREE.WebGLRenderer({ antialias: true, canvas: this.canvasEl })
+
+            //renderer.setSize(window.innerWidth, window.innerHeight)
+
+            // Cube
+            const geometry = new THREE.BoxGeometry()
+            const material = new THREE.MeshStandardMaterial({ color: 'red' })
+            this.cube = new THREE.Mesh(geometry, material)
+            this.scene.add(this.cube)
+            this.cube.position.x+=2
+
+
+            // Light
+            const light = new THREE.DirectionalLight(0xffffff, 1)
+            light.position.set(5, 5, 5)
+            light.intensity = 2
+            this.scene.add(light)
+            this.scene.add(new THREE.AmbientLight(0xffffff, 0.4))
+
+            this.controls = new OrbitControls(this.camera, this.renderer.domElement)
+            this.renderer.render(this.scene, this.camera)
+
+            window.addEventListener('resize', () => {
+                this.camera.aspect = window.innerWidth / window.innerHeight
+                this.camera.updateProjectionMatrix()
+                renderer.setSize(window.innerWidth, window.innerHeight)
+            })
+            this.animate()
+
+            this._render()
+
+        }
+
+        _resizeRendererToDisplaySize() {
+            const canvas = this.renderer.domElement
+            const width = canvas.clientWidth
+            const height = canvas.clientHeight
+            if (canvas.width !== width || canvas.height !== height) {
+                this.renderer.setSize(width, height, false)
+                return true
+            }
+            return false
+        }
+
+        _render() {
+            if (this._resizeRendererToDisplaySize()) {
+                this.camera.aspect = this.renderer.domElement.clientWidth / this.renderer.domElement.clientHeight
+                this.camera.updateProjectionMatrix()
+            }
+            this.renderer.render(this.scene, this.camera)
+            requestAnimationFrame(this._render.bind(this))
+        }
+
+
+        animate() {
+            requestAnimationFrame(this.animate.bind(this))
+            this.cube.rotation.x += 0.01
+            this.cube.rotation.y += 0.01
+            this.controls.update()
+            this.renderer.render(this.scene, this.camera)
+        }
+                        
+}
+
+
+// Make this module available to common JS
+if(!app.LoadedModules) app.LoadedModules = {}
+app.LoadedModules.Threetobus = Threetobus