P42/P42_UI
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Three 160, importmap only towards CDN, no more Sparc imports for Three components, kicke outdated outliner, replaced by custom simpler highliter

Browse Source
This commit is contained in:
STEINNI
2025-11-17 17:19:35 +00:00
parent 640d565d57
commit aa5b77f65b
13 changed files with 135 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/images/Logo-Emergence-bck.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 42 KiB

app/assets/sfx/intro.js
+3 -3
View File
@@ -37,7 +37,7 @@ class Intro{
new Promise((resolve, reject) => {
new THREE.TextureLoader()
.setPath('/app/assets/images/')
.load('Logo-Emergence.png', resolve, undefined, reject)
.load('Logo-Emergence-bck.png', resolve, undefined, reject)
})
@@ -135,7 +135,7 @@ class Intro{
attenuationColor: new THREE.Color(0x88ffcc),
attenuationDistance: 2,
color: 0x88ffcc,
depthWrite: false,
depthWrite: true,
depthTest: true,
transparent: true,
})
@@ -221,7 +221,7 @@ class Intro{
}
if (!this.planeEE) {
const geo = new THREE.PlaneGeometry(planeWidth, planeHeight)
this.matEE = new THREE.MeshBasicMaterial({ map: this.backgroundTextureEE, transparent: false, alphaTest: 0.001, depthWrite:true, depthTest:true })
this.matEE = new THREE.MeshBasicMaterial({ map: this.backgroundTextureEE, transparent: false, depthWrite:true, depthTest:true })
this.matEE.defines = this.matEE.defines || {}
this.matEE.defines.USE_UV = ""
this.matEE.onBeforeCompile = shader => {
app/controllers/editors/EditorsController.json
+1 -4
View File
@@ -31,10 +31,7 @@
"/helpers/validators",
"/helpers/activeAttributes",
"/helpers/helpers3D.module",
"/helpers/formBuilder",
"/thirdparty/Three/three.module",
"/thirdparty/Three/OrbitControls.module",
"/thirdparty/Three/tween.module"
"/helpers/formBuilder"
],
"assets": {
"styles": [
app/controllers/live/DashboardsController.js
+3 -2
View File
@@ -4,6 +4,7 @@ class DashboardsController extends WindozController {
super(params)
this.arenaConfig = app.Assets.Store.json.arenaConfig
this.eventsMapping = app.Assets.Store.json.eventsMapping
console.log('=============>DashboardsController constructor')
}
@@ -16,7 +17,7 @@ class DashboardsController extends WindozController {
const models = {
agents : new AgentsModel('/agents')
}
console.log('=============>spaceViewer 0')
const ttb = new app.LoadedModules.Threetobus({
eventsMapping: this.eventsMapping,
sceneSize: this.arenaConfig.arenaSize,
@@ -34,7 +35,7 @@ class DashboardsController extends WindozController {
//TODO: eventsMapping: address child by suffix in assignations
console.log('=============>spaceViewer 1')
this.loadWindow(
'visualisers/SpaceView',
{
app/controllers/live/DashboardsController.json
+1 -4
View File
@@ -22,10 +22,7 @@
"/helpers/basicDialogs",
"/helpers/validators",
"/helpers/activeAttributes",
"/helpers/helpers3D.module",
"/thirdparty/Three/three.module",
"/thirdparty/Three/OrbitControls.module",
"/thirdparty/Three/tween.module",
"/helpers/helpers3D.module",
"/thirdparty/Threetobus/threetobus.module"
],
"assets": {
app/controllers/system/systemController.json
-3
View File
@@ -45,9 +45,6 @@
"json": [
{ "id": "user-roles", "name": "global/user-roles.json" },
{ "id": "user-messages", "name": "system/user-messages.json" }
],
"html": [
{ "id":"toto", "name": "toto.html"}
]
}
}
app/helpers/helpers3D.module.js
+68 -32
View File
@@ -1,9 +1,10 @@
import * as THREE from '/app/thirdparty/Three/three.module.js'
import { EffectComposer } from '/app/thirdparty/Three/postprocessing/EffectComposer.module.js'
import { RenderPass } from '/app/thirdparty/Three/postprocessing/RenderPass.module.js'
import { OutlinePass } from '/app/thirdparty/Three/postprocessing/OutlinePass.module.js'
import { ShaderPass } from '/app/thirdparty/Three/postprocessing/ShaderPass.module.js'
import { GammaCorrectionShader } from '/app/thirdparty/Three/shaders/GammaCorrectionShader.module.js'
import * as THREE from 'three'
// import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.module.js'
// import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.module.js'
// import { OutlinePass } from 'three/examples/jsm/postprocessing/OutlinePass.module.js'
// import { ShaderPass } from 'three/examples/jsm/shaders/GammaCorrectionShader.module.js'
// import { GammaCorrectionShader } from 'three/examples/jsm/shaders/GammaCorrectionShader.module.js'
if(!app.helpers) app.helpers = {}
/**
@@ -75,10 +76,6 @@ app.helpers.helpers3D = {
// 2️. Update camera aspect ratio
this.camera.aspect = width / height
this.camera.updateProjectionMatrix()
// 3️. Update postprocessing chain
if (this.composer) this.composer.setSize(width, height)
if (this.outlinePass) this.outlinePass.setSize(width, height)
}
return needResize
},
@@ -122,32 +119,71 @@ app.helpers.helpers3D = {
const top = center.clone().addScaledVector(up, height / 2 + offset)
return top
},
init3DHighlighter(options){
if (!this.composer) {
this.composer = new EffectComposer(this.renderer)
this.composer.addPass(new RenderPass(this.scene, this.camera))
}
if (!this.outlinePass) {
this.outlinePass = new OutlinePass(
new THREE.Vector2(this.canvasEl.innerWidth, this.canvasEl.innerHeight),
this.scene, this.camera
)
outlineMaterial: new THREE.MeshBasicMaterial({
color: 0xffff00,
side: THREE.BackSide,
transparent: true,
opacity: 0.5,
depthTest: true,
depthWrite: false,
stencilWrite: true,
stencilFunc: THREE.AlwaysStencilFunc,
stencilRef: 1,
stencilMask: 0xff,
stencilFail: THREE.KeepStencilOp,
stencilZFail: THREE.KeepStencilOp,
stencilZPass: THREE.ReplaceStencilOp
}),
this.outlinePass.edgeStrength = options.edgeStrength || 3
this.outlinePass.visibleEdgeColor.set(options.visibleEdgeColor || 0xffffff)
this.outlinePass.edgeGlow = options.edgeGlow || 0
this.outlinePass.edgeThickness = options.edgeThickness || 1
this.outlinePass.pulsePeriod = options.pulsePeriod || 0
normalStencilMat: new THREE.MeshBasicMaterial({
color: 0xffffff,
stencilWrite: true,
stencilRef: 0,
stencilFunc: THREE.NotEqualStencilFunc,
stencilFail: THREE.KeepStencilOp,
stencilZFail: THREE.KeepStencilOp,
stencilZPass: THREE.KeepStencilOp
}),
this.composer.addPass(this.outlinePass)
this.highlighted3DObjects = []
this.outlinePass.selectedObjects = this.highlighted3DObjects
highlight3DObj(obj, scene) {
// Scaled up Mesh to stencil
obj.traverse(child => {
if (child.isMesh) {
const inflated = new THREE.Mesh(child.geometry, this.outlineMaterial)
inflated.position.copy(child.getWorldPosition(new THREE.Vector3()))
inflated.quaternion.copy(child.getWorldQuaternion(new THREE.Quaternion()))
inflated.scale.copy(child.getWorldScale(new THREE.Vector3())).multiplyScalar(1.05)
this.composer.addPass(new ShaderPass(GammaCorrectionShader))
}
scene.add(inflated)
child._outlineMesh = inflated
}
})
// Normal Mesh render only if stencil != 1
obj.traverse(child => {
if (child.isMesh) {
child._savedMaterial = child.material
child.material = this.normalStencilMat
}
})
},
clearHighlight3DObj(obj,scene) {
obj.traverse(child => {
if (child._outlineMesh) {
scene.remove(child._outlineMesh)
child._outlineMesh.geometry.dispose()
child._outlineMesh.material.dispose()
delete child._outlineMesh
}
if (child._savedMaterial) {
child.material = child._savedMaterial
delete child._savedMaterial
}
})
},
makePivotAtGeomCenter(object, scene) {
app/thirdparty/buildoz/buildoz.js
Vendored
+3 -5
View File
@@ -260,10 +260,8 @@ class BZslidePane extends Buildoz {
}
this.dragMove = this.dragMove.bind(this)
this.dragEnd = this.dragEnd.bind(this)
this._observer = new MutationObserver(muts => { // Fill with innerHTML or other DOM manip should not allow coating to be removed
console.log('mutation...')
this.coat()
})
// Fill with innerHTML or other DOM manip should not allow coating to be removed
this._observer = new MutationObserver(muts => { this.coat() })
}
connectedCallback(){
@@ -277,7 +275,7 @@ class BZslidePane extends Buildoz {
this._observer.disconnect()
}
coat(){ console.log('coat')
coat(){
if(this.handle && this.querySelector(this.dispatchEvent.handle)) return
this._observer.disconnect()
if(this.querySelector(this.dispatchEvent.handle)) this.querySelector(this.dispatchEvent.handle).remove()
app/views/editors/KeyframeView.html
+11 -1
View File
@@ -122,7 +122,17 @@
<article eiccard class="kfArena">
<section>
<canvas data-output="kfArenaCanvas"></canvas>
<bz-slidepane side="bottom" data-output="console"></bz-slidepane>
<bz-slidepane side="bottom" data-output="console">
<div class="inner-console">
<div class="results">
JS 3D Console. for help, type "help"
</div>
<div class="cols-2 commandline">
<textarea type="text" data-output="commands"></textarea>
<button class="icon-play" data-trigger="execCommand"></button>
</div>
</div>
</bz-slidepane>
</section>
</article>
<article eiccard class="agent-properties">
app/views/editors/KeyframeView.js
+18 -14
View File
@@ -63,17 +63,22 @@ class KeyframeView extends WindozDomContent {
this.outputs.btnSaveKF.disabled = true
this.outputs.kfName.addEventListener('keyup', this.updateKfButtons.bind(this))
this.currentlySelectedAid = null
this.output('console',`
<div class="inner-console">
<div class="results">
JS 3D Console. for help, type "help"
</div>
<div class="cols-2 commandline">
<textarea type="text" style=""></textarea>
<button class="icon-play" data-trigger="execCommand"></button>
</div>
</div>
`)
// this.output('console',`
// <div class="inner-console">
// <div class="results">
// JS 3D Console. for help, type "help"
// </div>
// <div class="cols-2 commandline">
// <textarea type="text" style="" data-output="commands"></textarea>
// <button class="icon-play" data-trigger="execCommand"></button>
// </div>
// </div>
// `)
}
async execCommand(event){
console.log('cmd:', this.ouputs.caommands)
}
async onChangeAgent(event){
@@ -86,7 +91,6 @@ class KeyframeView extends WindozDomContent {
this.currentAgentType = await this.models.agents.getProperties(this.outputs.agentsSelector.value)
this.fillAgentProperties('', this.currentAgentType.atp_props)
// Deselect any on-scene selection
this.kfArena.highlighted3DObjects.length = 0
this.currentlySelectedAid = null
}
}
@@ -105,13 +109,13 @@ class KeyframeView extends WindozDomContent {
onclickAgent(obj3D){
const aid = obj3D.name
this.kfArena.highlighted3DObjects.length = 0 //truncate but keep the ref !
if(this.currentlySelectedAid == aid){ // Deselect
this.kfArena.clearHighlight3DObj(obj3D, this.kfArena.scene)
this.currentlySelectedAid = null
} else { // Select
this.currentlySelectedAid = aid
if(this.kfArena.agents[aid]) {
this.kfArena.highlighted3DObjects.push(obj3D)
this.kfArena.highlight3DObj(obj3D, this.kfArena.scene)
this.fillAgentProperties(aid, this.kfArena.agents[aid].props, this.kfArena.agents[aid].values)
this.notUserChange = true
this.outputs.agentsSelector.value = this.kfArena.agents[aid].type
app/views/editors/modules/agentPreview.module.js
+1 -1
View File
@@ -1,4 +1,4 @@
import * as THREE from '/app/thirdparty/Three/three.module.js'
import * as THREE from 'three' //'/app/thirdparty/Three/three.module.js'
export class AgentPreview{
app/views/editors/modules/kfArena.module.js
+12 -15
View File
@@ -1,6 +1,6 @@
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'
import * as THREE from 'three' // '/app/thirdparty/Three/three.module.js'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js' // '/app/thirdparty/Three/OrbitControls.module.js'
import * as TWEEN from 'three/examples/jsm/libs/tween.module.js' //'/app/thirdparty/Three/tween.module.js'
export class kfArena{
@@ -56,15 +56,13 @@ export class kfArena{
this.axes.layers.set(2)
this.scene.add(this.axes)
this.renderer = new THREE.WebGLRenderer({ antialias: true, canvas: this.canvasEl })
this.init3DHighlighter({
edgeStrength: 3,
visibleEdgeColor: 0xffff00,
edgeGlow: 1,
edgeThickness: 4,
pulsePeriod: 2,
})
this.canvasEl.addEventListener('click', this.onSceneClick.bind(this))
this.renderer = new THREE.WebGLRenderer({ antialias: true, canvas: this.canvasEl, stencil: true })
// this.renderer.physicallyCorrectLights = true
// this.renderer.outputColorSpace = THREE.SRGBColorSpace
// this.renderer.toneMapping = THREE.ACESFilmicToneMapping
// this.renderer.toneMappingExposure = 1
this.canvasEl.addEventListener('click', this.onSceneClick.bind(this))
}
startRendering(){
@@ -74,9 +72,8 @@ export class kfArena{
render() {
TWEEN.update()
this.resizeRendererToDisplaySize()
if(this.composer) this.composer.render()
else this.renderer.render(this.scene, this.camera)
const resized = this.resizeRendererToDisplaySize()
this.renderer.render(this.scene, this.camera)
requestAnimationFrame(this.render.bind(this))
}
index.html
+14 -3
View File
@@ -8,14 +8,25 @@
<script type="importmap">
{
"imports": {
"three": "https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.module.js",
"three": "https://unpkg.com/three@0.160.0/build/three.module.js",
"three/examples/jsm/loaders/FontLoader.js": "https://unpkg.com/three@0.160.0/examples/jsm/loaders/FontLoader.js",
"three/examples/jsm/geometries/TextGeometry.js": "https://unpkg.com/three@0.160.0/examples/jsm/geometries/TextGeometry.js",
"three/examples/jsm/loaders/RGBELoader.js": "https://unpkg.com/three@0.160.0/examples/jsm/loaders/RGBELoader.js"
}
"three/examples/jsm/loaders/RGBELoader.js": "https://unpkg.com/three@0.160.0/examples/jsm/loaders/RGBELoader.js",
"three/examples/jsm/controls/OrbitControls.js": "https://unpkg.com/three@0.160.0/examples/jsm/controls/OrbitControls.js",
"three/examples/jsm/libs/tween.module.js": "https://unpkg.com/three@0.160.0/examples/jsm/libs/tween.module.js"
}
}
</script>
<script type="module" src="/app/assets/sfx/intro.js"></script>
<!--
"three/examples/jsm/postprocessing/EffectComposer.module.js": "https://unpkg.com/three@0.160.0/examples/jsm/postprocessing/EffectComposer.js",
"three/examples/jsm/postprocessing/RenderPass.module.js": "https://unpkg.com/three@0.160.0/examples/jsm/postprocessing/RenderPass.js",
"three/examples/jsm/postprocessing/OutlinePass.module.js": "https://unpkg.com/three@0.160.0/examples/jsm/postprocessing/OutlinePass.js",
"three/examples/jsm/postprocessing/ShaderPass.module.js": "https://unpkg.com/three@0.160.0/examples/jsm/postprocessing/ShaderPass.js",
"three/examples/jsm/shaders/GammaCorrectionShader.module.js": "https://unpkg.com/three@0.160.0/examples/jsm/shaders/GammaCorrectionShader.js"
-->
</head>
<body>