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

baseplane, root-object offset, saveKF & resetKF buttons...

Browse Source
This commit is contained in:
STEINNI
2025-10-21 15:55:22 +00:00
parent 36776162ec
commit aa76bfe9c0
6 changed files with 67 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/assets/styles/app.css
+1 -1
View File
@@ -357,7 +357,7 @@ input{
border: none;
}
button[eicbutton][rounded] {
div.window > section button[eicbutton][rounded] {
min-height: 2em;
padding: 0;
color: #DDD;
app/helpers/helpers3D.module.js
+11 -2
View File
@@ -8,10 +8,9 @@ if(!app.helpers) app.helpers = {}
app.helpers.helpers3D = {
agentFromJSON(id, desc){
let obj
let obj, wrapper
if(desc.type === 'Mesh') {
const geom = new THREE[desc.geometry.type](...(desc.geometry.args || []))
const matType = desc.material.type
const matProps = { ...desc.material }
for (const key in matProps) {
@@ -26,7 +25,16 @@ app.helpers.helpers3D = {
}
const mat = new THREE[matType](matProps)
obj = new THREE.Mesh(geom, mat)
if(desc.translate){
wrapper = new THREE.Object3D()
wrapper.add(obj)
obj.position.x = desc.translate[0]
obj.position.y = desc.translate[1]
obj.position.z = desc.translate[2]
}
} else if(desc.type === 'Group') {
obj = new THREE.Group()
} else {
@@ -45,6 +53,7 @@ app.helpers.helpers3D = {
obj.add(this.agentFromJSON(childId, childDesc))
})
}
if(wrapper) obj=wrapper
obj.name = id
return obj
},
app/thirdparty/Threetobus/threetobus.module.js
Vendored
+12
View File
@@ -173,6 +173,18 @@ export class Threetobus{
this.axes.layers.set(2)
this.scene.add(this.axes)
}
// Base plane
const planeGeo = new THREE.PlaneGeometry(100, 100)
const planeMat = new THREE.MeshBasicMaterial({
color: 0xaaaacc,
opacity: 0.3,
transparent: true, // needed for opacity < 1 to take effect
side: THREE.DoubleSide
})
this.basePlane = new THREE.Mesh(planeGeo, planeMat)
this.basePlane.rotation.x = -Math.PI / 2 // lay it flat (like the grid)
this.basePlane.position.y=-0.01 // to avoid artefacts on objets bases
this.scene.add(this.basePlane)
// Cameras
this.cameras.camPerspective = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
app/views/editors/KeyframeView.html
+26 -7
View File
@@ -14,21 +14,36 @@
.kf-editor canvas[data-output="kfArenaCanvas"]{ width:100%; height:100%; }
.kf-editor article.agent-preview section, .kf-editor article.agent-properties section{
display: grid;
grid-template-rows: auto 2em;
grid-template-rows: 2em auto 2em;
height: 100%;
}
.kf-editor article.kfArena section{
padding: 0;
height: 100%;
overflow: hidden;
}
.kf-editor article.agent-preview section div.actions button{
.kf-editor article.agent-properties section div.agent-actions{
border: 1px solid #574;
border-radius: 5px;
background-color: #231;
box-shadow: 0px 0px 7px #0B69;
height: 2em;
padding: 0 5px 0 5px;
}
.kf-editor article.agent-properties section div.agent-actions button{
color: #DDD;
padding: 0 0 0 0;
min-height: 0.5em;
min-height: 1.2em;
}
.kf-editor article.agent-properties section div.kf-actions button{
color: #DDD;
padding: 0 0 0 0;
min-height: 2em;
}
.kf-editor button[data-trigger="onAddAgent"] { background-color: #473; }
.kf-editor button[data-trigger="onRemoveAgent"] { background-color: #A00; }
.kf-editor button[data-trigger="onSaveKF"] { background-color: #367; }
.kf-editor button[data-trigger="onResetKF"] { background-color: #A00; }
.kf-editor section[data-output="agentProperties"] label{ font-size: 0.9em; }
.kf-editor section[data-output="agentProperties"] div.cols-2 { grid-template-columns: 4fr 3fr; }
@@ -51,10 +66,14 @@
<article eiccard class="agent-properties">
<header><h1>Agent properties</h1></header>
<section>
<div class="agent-actions cols-2">
<button eicbutton rounded data-output="btnAddAgent" data-trigger="onAddAgent">Create agent</button>
<button eicbutton rounded data-output="btnRemoveAgent" data-trigger="onRemoveAgent" >Remove agent</button>
</div>
<div data-output="agentProperties"></div>
<div class="actions cols-2">
<button eicbutton rounded data-output="btnAddAgent" data-trigger="onAddAgent">Add</button>
<button eicbutton rounded data-output="btnRemoveAgent" data-trigger="onRemoveAgent" >Remove</button>
<div class="kf-actions cols-2">
<button eicbutton rounded data-output="btnSaveKF" data-trigger="onSaveKF">Save KF</button>
<button eicbutton rounded data-output="btnResetKF" data-trigger="onResetKF">Reset KF</button>
</div>
</section>
</article>
app/views/editors/KeyframeView.js
+1 -1
View File
@@ -44,9 +44,9 @@ class KeyframeView extends WindozDomContent {
this.kfArena = new app.LoadedModules.kfArena(this.outputs.kfArenaCanvas, this.agentSprites)
this.kfArena.startRendering()
this.outputs.btnAddAgent.disabled = true
this.outputs.btnRemoveAgent.disabled = true
this.outputs.btnSaveKF.disabled = true
}
async onChangeAgent(event){
app/views/editors/modules/kfArena.module.js
+14 -1
View File
@@ -33,10 +33,23 @@ export class kfArena{
this.scene.add(light)
this.scene.add(new THREE.AmbientLight(0xffffff, 0.4))
this.grid = new THREE.GridHelper(this.sceneSize.x, this.sceneSize.y, 0x8888AA, 0x8888AA)
this.grid = new THREE.GridHelper(this.sceneSize.x, this.sceneSize.x, 0x8888AA, 0x8888AA)
this.grid.layers.set(1)
this.scene.add(this.grid)
// Base plane
const planeGeo = new THREE.PlaneGeometry(100, 100)
const planeMat = new THREE.MeshBasicMaterial({
color: 0xaaaacc,
opacity: 0.3,
transparent: true, // needed for opacity < 1 to take effect
side: THREE.DoubleSide
})
this.basePlane = new THREE.Mesh(planeGeo, planeMat)
this.basePlane.rotation.x = -Math.PI / 2 // lay it flat (like the grid)
this.basePlane.position.y=-0.01 // to avoid artefacts on objets bases
this.scene.add(this.basePlane)
this.axes = new THREE.AxesHelper(this.sceneSize.x/2, this.sceneSize.y/2)
this.axes.layers.set(2)
this.scene.add(this.axes)