agent def + windows fixes + 2d view + 3d view

2025-09-26 21:02:32 +00:00
parent 73e2b5a762
commit dd860b45a9
5 changed files with 177 additions and 107 deletions
@@ -5,79 +5,109 @@ export class Threetobus{

    constructor(canvasEl){
        this.canvasEl = canvasEl
+        this.cameras = {}
    }

-    init(){
+    initScene(){
        // Scene
-            this.scene = new THREE.Scene()
-            //scene.background = new THREE.Color(0x202080)
+        this.scene = new THREE.Scene()
+
+        // Cameras
+        this.cameras.persp1 = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
+        this.cameras.persp1.position.set(3, 3, 5)
+        const aspect = window.innerWidth / window.innerHeight
+        const frustumSize = 10 
+        this.cameras.cam2Dtop = new THREE.OrthographicCamera(
+            -frustumSize * aspect / 2,
+            frustumSize * aspect / 2,
+            frustumSize / 2,
+            -frustumSize / 2,
+            0.1,
+            1000
+        ) 
+        this.cameras.cam2Dtop.position.set(0, 100, 0)
+        this.cameras.cam2Dtop.lookAt(0, 0, 0)
+        //this.camera = this.cameras.persp1
+
+        // Lights
+        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))
+
+        // Renderer
+        this.renderer = new THREE.WebGLRenderer({ antialias: true, canvas: this.canvasEl })
+
+    }
+
+    startRendering(){
+        //controls
+        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)
+        }) 
        
-            // Camera
-            this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
-            this.camera.position.set(3, 3, 5)
+        this.render()
+    }

-            // Renderer
-            this.renderer = new THREE.WebGLRenderer({ antialias: true, canvas: this.canvasEl })
+    changeCamera(camName){
+        if(camName in this.cameras){
+            this.camera = this.cameras[camName]
+        }
+    }

-            //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)
+    buildFromJSON(desc){
+        let obj
+        if(desc.type === 'Mesh') {
+            const geom = new THREE[desc.geometry.type](...(desc.geometry.args || []))
+            const mat = new THREE[desc.material.type]( desc.material.color ? { color: desc.material.color } : {}  )
+            obj = new THREE.Mesh(geom, mat)
+        } else if(desc.type === 'Group') {
+            obj = new THREE.Group()
+        } else {
+            throw new Error("Unknown type: " + desc.type)
+        }
+        
+        // Apply transforms
+        if(desc.position) obj.position.set(...desc.position)
+        if(desc.rotation) obj.rotation.set(...desc.rotation)
+        if(desc.scale) obj.scale.set(...desc.scale)
+                    
+        // Recursively add children
+        if(desc.children) {
+            desc.children.forEach(childDesc => {
+                obj.add(this.buildFromJSON(childDesc))
            })
-            this.animate()
-
-            this._render()
-
        }
+        
+        return obj
+    }

-        _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
+    _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))
+    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)
-        }
                        
 }