ageent preview & select in KF editor

2025-10-16 20:39:09 +00:00
parent 078f60ef51
commit 3912523b0a
14 changed files with 223 additions and 111 deletions
@@ -0,0 +1,76 @@
+import * as THREE from '/app/thirdparty/Three/three.module.js'
+import { OrbitControls } from '/app/thirdparty/Three/OrbitControls.module.js'
+import * as TWEEN from '/app/thirdparty/Three/tween.module.js'
+
+export class AgentPreview{
+
+    constructor(canvasEl, agentDefs){
+        Object.assign(this, app.helpers.helpers3D)
+        this.agentDefs = app.Assets.Store.json.agentDefs
+        this.canvasEl = canvasEl
+        this.agentDefs = agentDefs
+        this.currentAgentObj = null
+        this.renderer = null
+        this._animation = false
+        this.initScene()
+    }
+
+    initScene(){
+        // Scene
+        this.scene = new THREE.Scene()
+
+        // Camera
+        this.camera = new THREE.PerspectiveCamera(75, this.canvasEl.clientWidth / this.canvasEl.clientHeight, 0.1, 1000)
+        this.camera.position.set(3, 3, 5)
+        this.camera.lookAt(0, 0, 0)
+        this.camera.layers.enable(1)
+        this.camera.layers.enable(2)
+
+        // 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))
+
+        this.renderer = new THREE.WebGLRenderer({ antialias: true, canvas: this.canvasEl })
+    }
+
+    startRendering(){
+        //this.renderer.addControls()       
+        this.renderer.render(this.scene, this.camera)
+    }
+
+    setAgent(atype){
+        if(this.currentAgentObj && (this.scene.children.includes(this.currentAgentObj))){
+            this.scene.remove(this.currentAgentObj)
+        }
+        this.currentAgentObj = this.agentFromJSON('previewedAgent', this.agentDefs[atype])
+        this.currentAgentObj.position.set(0, 0, 0)
+        this.scene.add(this.currentAgentObj)
+
+        this.cameraAutoFrame(this.currentAgentObj, this.camera)
+    }
+
+    set animation(value){
+        this._animation = value
+        if(value) this._animate()
+    }
+
+    get animation(){
+        return(this._animation)
+    }
+
+    _animate = () => {  // to avoid havind to bind(this) in requestAnimationFrame, because one bound fn per frame = continuous GC load
+        if(!this.animation) return
+        requestAnimationFrame(this._animate)
+        this.currentAgentObj.rotation.x += 0.005
+        this.currentAgentObj.rotation.y += 0.01
+        this.renderer.render(this.scene, this.camera)
+    }
+}
+
+// Make this module available to common JS
+if(!app.LoadedModules) app.LoadedModules = {}
+app.LoadedModules.AgentPreview = AgentPreview
+