@kite3d/engine 0.15.0

package/src/plugins/HtmlUiComponent.ts

@@ -0,0 +1,320 @@
+import {
+    ComponentDefn,
+    ComponentJSON,
+    IObject3D,
+    IObject3DEventMap,
+    ISceneEventMap,
+    literalStrings,
+    Object3DComponent,
+    Vector3,
+    ViewerEventMap
+} from "threepipe"
+
+export const uiPositionMode = ['world', 'screen', 'viewport'] as const
+export type UiPositionMode = typeof uiPositionMode[number]
+
+export class HtmlUiComponent extends Object3DComponent {
+    static ComponentType = 'HtmlUiComponent'
+    static StateProperties: ComponentDefn['StateProperties'] = [
+        'enabled',
+        {
+            key: 'htmlData',
+            type: 'string',
+            uiConfig: {
+                multiline: true,
+                rows: 5,
+                autoResize: true,
+            }
+        },
+        'width',
+        'height',
+        'scrollable',
+        'interactable',
+        {
+            key: 'positionMode',
+            type: literalStrings(uiPositionMode),
+        },
+        'offsetX',
+        'offsetY',
+        'zIndex',
+        'visible',
+        'appendToBody'
+    ]
+
+    declare element: HTMLDivElement
+
+    enabled = true
+
+    // HTML content
+    htmlData = '<div>Hello World</div>'
+
+    // Size properties
+    width = -1 // in pixels
+    height = -1 // in pixels
+
+    // Behavior properties
+    scrollable = false
+    interactable = true
+    visible = true
+    appendToBody = false // false = append to viewer.container (default), true = append to document.body
+
+    // Position properties
+    positionMode: UiPositionMode = 'world' // world follows 3D object, screen is fixed, viewport is relative to viewport
+    offsetX = 0 // pixel offset from calculated position
+    offsetY = 0 // pixel offset from calculated position
+    zIndex = 1000 // CSS z-index
+
+    private _worldPosition = new Vector3()
+    private _animationFrameId?: number
+
+    constructor() {
+        super()
+
+        this.onStateChange('htmlData', (v) => {
+            if (!this.element) return
+            this.element.innerHTML = v
+            // this.object.setDirty?.({source: 'HtmlUiComponent'})
+        })
+
+        this.onStateChange('width', (v) => {
+            if (!this.element) return
+            this.element.style.width = v < 0 ? 'auto' : `${v}px`
+            this.object.setDirty?.({source: 'HtmlUiComponent'})
+        })
+
+        this.onStateChange('height', (v) => {
+            if (!this.element) return
+            this.element.style.height = v < 0 ? 'auto' : `${v}px`
+            this.object.setDirty?.({source: 'HtmlUiComponent'})
+        })
+
+        this.onStateChange('scrollable', (v) => {
+            if (!this.element) return
+            this.element.style.overflow = v ? 'auto' : 'hidden'
+            this.object.setDirty?.({source: 'HtmlUiComponent'})
+        })
+
+        this.onStateChange('interactable', (v) => {
+            if (!this.element) return
+            this.element.style.pointerEvents = v ? 'auto' : 'none'
+            this.object.setDirty?.({source: 'HtmlUiComponent'})
+        })
+
+        this.onStateChange('visible', (v) => {
+            if (!this.element) return
+            this.element.style.display = v ? 'block' : 'none'
+            this.object.setDirty?.({source: 'HtmlUiComponent'})
+        })
+
+        this.onStateChange('positionMode', () => {
+            if (!this.element) return
+            this._updateElementPosition()
+            this.object.setDirty?.({source: 'HtmlUiComponent'})
+        })
+
+        this.onStateChange('offsetX', () => {
+            if (!this.element) return
+            this._updateElementPosition()
+            this.object.setDirty?.({source: 'HtmlUiComponent'})
+        })
+
+        this.onStateChange('offsetY', () => {
+            if (!this.element) return
+            this._updateElementPosition()
+            this.object.setDirty?.({source: 'HtmlUiComponent'})
+        })
+
+        this.onStateChange('zIndex', (v) => {
+            if (!this.element) return
+            this.element.style.zIndex = `${v}`
+            this.object.setDirty?.({source: 'HtmlUiComponent'})
+        })
+
+        this.onStateChange('appendToBody', (v) => {
+            if (!this.element) return
+            // Remove from current parent
+            if (this.element.parentNode) {
+                this.element.parentNode.removeChild(this.element)
+            }
+            // Append to new container
+            const container = v ? document.body : (this.ctx?.viewer?.container || document.body)
+            container.appendChild(this.element)
+            this.object.setDirty?.({source: 'HtmlUiComponent'})
+        })
+    }
+
+    private _objectUpdate = (e: IObject3DEventMap['objectUpdate'] | ISceneEventMap['mainCameraUpdate']) => {
+        if (e.source === 'HtmlUiComponent') return
+        const changeKey = e?.change ?? e?.key
+        const update = !changeKey || changeKey === 'position' || changeKey === 'transform' || changeKey === 'quaternion' || changeKey === 'visible' || changeKey === 'controls'
+        if (update && this.positionMode === 'world') {
+            this._updateElementPosition()
+        }
+    }
+
+    init(object: IObject3D, state: ComponentJSON['state']) {
+        super.init(object, state)
+
+        // Create the HTML element
+        this.element = document.createElement('div')
+        this.element.className = 'threepipe-html-ui'
+
+        // Apply initial styles
+        this.element.style.position = 'absolute'
+        this.element.style.width = this.width < 0 ? 'auto' : `${this.width}px`
+        this.element.style.height = this.height < 0 ? 'auto' : `${this.height}px`
+        this.element.style.overflow = this.scrollable ? 'auto' : 'hidden'
+        this.element.style.pointerEvents = this.interactable ? 'auto' : 'none'
+        this.element.style.zIndex = `${this.zIndex}`
+        this.element.style.display = this.visible ? 'block' : 'none'
+        this.element.style.boxSizing = 'border-box'
+
+        // Set HTML content
+        this.element.innerHTML = this.htmlData
+
+        // Add to document or viewer container
+        const container = this.appendToBody ? document.body : (this.ctx?.viewer?.container || document.body)
+        container.appendChild(this.element)
+
+        // Listen for object updates
+        object.addEventListener('objectUpdate', this._objectUpdate)
+        this.ctx.viewer.scene.addEventListener('mainCameraUpdate', this._objectUpdate)
+
+        // Start position tracking for world-positioned elements
+        this._updateElementPosition()
+    }
+
+    destroy(): Record<string, any> {
+        // Stop position tracking
+        this._stopPositionTracking()
+
+        // Remove event listener
+        this.object.removeEventListener('objectUpdate', this._objectUpdate)
+        this.ctx.viewer.scene.removeEventListener('mainCameraUpdate', this._objectUpdate)
+
+        // Remove element from DOM
+        if (this.element && this.element.parentNode) {
+            this.element.parentNode.removeChild(this.element)
+        }
+        this.element = null as any
+
+        return super.destroy()
+    }
+
+    private _stopPositionTracking() {
+        if (this._animationFrameId !== undefined) {
+            cancelAnimationFrame(this._animationFrameId)
+            this._animationFrameId = undefined
+        }
+    }
+
+    preFrame({resized}: ViewerEventMap["preFrame"]): boolean | void {
+        if(!this.element || !this.enabled) return
+        //   world - on camera change, canvas size change, object transform change
+        //   screen - no change
+        //   viewport - on canvas size change
+        if(this.positionMode === 'screen') return
+        if(!resized && this.positionMode === 'viewport') return
+        if(!resized && this.positionMode === 'world') return // todo: tracked separately
+        this._updateElementPosition()
+    }
+
+    private _updateElementPosition() {
+        if (!this.element) return
+
+        switch (this.positionMode) {
+            case 'world':
+                this._updateWorldPosition()
+                break
+            case 'screen':
+                this._updateScreenPosition()
+                break
+            case 'viewport':
+                this._updateViewportPosition()
+                break
+        }
+    }
+
+    private _updateWorldPosition() {
+        // Get the world position of the object
+        this.object.getWorldPosition(this._worldPosition)
+
+        // Project to screen space
+        const camera = this.ctx?.viewer?.scene?.mainCamera
+        if (!camera) return
+
+        const canvas = this.ctx?.viewer?.canvas
+        if (!canvas) return
+
+        // Clone position and project it
+        const projected = this._worldPosition.clone()
+        projected.project(camera)
+
+        // Convert to screen coordinates
+        const x = (projected.x * 0.5 + 0.5) * canvas.clientWidth
+        const y = (projected.y * -0.5 + 0.5) * canvas.clientHeight
+
+        // Apply position with offset
+        this.element.style.left = `${x + this.offsetX}px`
+        this.element.style.top = `${y + this.offsetY}px`
+        this.element.style.transform = 'translate(-50%, -50%)' // Center on point
+    }
+
+    private _updateScreenPosition() {
+        // Fixed screen position
+        this.element.style.left = `${this.offsetX}px`
+        this.element.style.top = `${this.offsetY}px`
+        this.element.style.transform = 'none'
+    }
+
+    private _updateViewportPosition() {
+        // Viewport-relative position (percentage-based)
+        const canvas = this.ctx?.viewer?.canvas
+        if (!canvas) return
+
+        const x = (this.offsetX / 100) * canvas.clientWidth
+        const y = (this.offsetY / 100) * canvas.clientHeight
+
+        this.element.style.left = `${x}px`
+        this.element.style.top = `${y}px`
+        this.element.style.transform = 'none'
+    }
+
+    /**
+     * Update the HTML content programmatically
+     */
+    setHtml(html: string) {
+        this.htmlData = html
+    }
+
+    /**
+     * Set the position
+     */
+    setPosition(x: number, y: number) {
+        this.offsetX = x
+        this.offsetY = y
+    }
+
+    /**
+     * Set the size
+     */
+    setSize(width: number, height: number) {
+        this.width = width
+        this.height = height
+    }
+
+    /**
+     * Show the element
+     */
+    show() {
+        this.visible = true
+    }
+
+    /**
+     * Hide the element
+     */
+    hide() {
+        this.visible = false
+    }
+}
+

package/src/plugins/cannon/Cannon3DBodyComponent.ts

@@ -0,0 +1,227 @@
+import { Body, Vec3, Quaternion as CQuaternion } from "cannon-es"
+import {
+    ComponentDefn,
+    ComponentJSON, EntityComponentPlugin,
+    IObject3D,
+    IObject3DEventMap,
+    literalStrings,
+    Object3DComponent, Quaternion, Vector3
+} from "threepipe"
+import {Cannon3DShapeComponent} from "./Cannon3DShapeComponent.ts";
+import {CannonMaterial2, CannonPhysicsPlugin} from "./CannonPhysicsPlugin.ts";
+
+export const physicsBodyType = ['static', 'dynamic', 'kinematic'] as const
+export type PhysicsBodyType = typeof physicsBodyType[number]
+
+export class Cannon3DBodyComponent extends Object3DComponent {
+    static ComponentType = 'Cannon3DBodyComponent'
+    static StateProperties: ComponentDefn['StateProperties'] = ['mass', {
+        key: 'type',
+        type: literalStrings(physicsBodyType),
+    }, 'isTrigger', 'material']
+
+    declare body: Body
+
+    mass = 1
+    type: PhysicsBodyType = 'dynamic'
+    isTrigger = false
+    material: CannonMaterial2 = new CannonMaterial2()
+
+    private _typeToCannon(type: PhysicsBodyType) {
+        if (type === 'static') return Body.STATIC
+        else if (type === 'dynamic') return Body.DYNAMIC
+        else if (type === 'kinematic') return Body.KINEMATIC
+        return Body.STATIC
+    }
+
+    updateMassProperties(){
+        if (!this.body) return
+        try {
+            this.body.updateMassProperties()
+        }catch (e) {
+            console.error('[Cannon3DBodyComponent] updateMassProperties error', e)
+        }
+    }
+    updateBoundingRadius(){
+        if (!this.body) return
+        try {
+            this.body.updateBoundingRadius()
+        }catch (e) {
+            console.error('[Cannon3DBodyComponent] updateBoundingRadius error', e)
+        }
+    }
+
+
+    constructor() {
+        super()
+        this.onStateChange('mass', (v)=>{
+            if (!this.body) return
+            this.body.mass = v
+            this.updateMassProperties()
+            this.object.setDirty?.({source: 'Cannon3DBodyComponent'})
+        })
+        this.onStateChange('type', (v)=>{
+            if (!this.body) return
+            this.body.type = this._typeToCannon(v)
+            this.updateMassProperties()
+            this.object.setDirty?.({source: 'Cannon3DBodyComponent'})
+        })
+        this.onStateChange('isTrigger', (v)=>{
+            if (!this.body) return
+            this.body.isTrigger = v
+            this.object.setDirty?.({source: 'Cannon3DBodyComponent'})
+        })
+        this.onStateChange('material', (v)=>{
+            if (!this.body) return
+            this.body.material = v
+            this.uiConfig?.uiRefresh?.()
+            this.object.setDirty?.({source: 'Cannon3DBodyComponent'})
+        })
+    }
+
+    private _objectUpdate = (e: IObject3DEventMap['objectUpdate'])=>{
+        if (e.source === 'Cannon3DBodyComponent' || e.source === 'CannonPhysicsPlugin') return
+        const changeKey = e?.change ?? e?.key
+        const update = !changeKey || changeKey === 'position' || changeKey === 'transform' || changeKey === 'quaternion'
+        if (update) this.resetTransform(changeKey)
+    }
+
+    init(object: IObject3D, state: ComponentJSON['state']) {
+        super.init(object, state)
+        const cannon = this.ctx.plugin(CannonPhysicsPlugin)
+        this.body = new Body()
+        this.body.material = this.material
+        this.body.mass = this.mass
+        this.body.type = this._typeToCannon(this.type)
+        this.body.isTrigger = this.isTrigger
+        this.updateMassProperties()
+        this.resetTransform()
+        object.addEventListener('objectUpdate', this._objectUpdate)
+        cannon.addBody(this)
+
+        object.traverseModels && object.traverseModels(m=>{
+            EntityComponentPlugin.GetComponents(m, Cannon3DShapeComponent).forEach(sh=>{
+                this.addShape(sh, false)
+            })
+        }, {widgets: false, visible: false})
+        if (this.shapeRefs.length) {
+            this.refreshShapes()
+        }
+
+    }
+
+    destroy(): Record<string, any> {
+        this.shapeRefs.forEach(shape=>{
+            this.removeShape(shape, false)
+        })
+        this.refreshShapes(false)
+
+        this.object.removeEventListener('objectUpdate', this._objectUpdate)
+        const cannon = this.ctx.plugin(CannonPhysicsPlugin)
+        cannon.removeBody(this)
+        this.body = null as any
+        return super.destroy()
+    }
+
+    // update({time}: IAnimationLoopEvent) {
+    //
+    // }
+
+    resetTransform(changeKey?: string) {
+        // const changeKey = e?.change ?? e?.key
+        if (!changeKey || changeKey === 'position' || changeKey === 'transform')
+            this.body.position.set(...this.object.getWorldPosition(new Vector3()).toArray())
+        if (!changeKey || changeKey === 'quaternion' || changeKey === 'transform')
+            this.body.quaternion.set(...(this.object.getWorldQuaternion(new Quaternion()).toArray() as [number, number, number, number]))
+        this.body.angularVelocity.set(0, 0, 0)
+        this.body.velocity.set(0, 0, 0)
+    }
+
+    // static IsCompatible(_object: IObject3D) { return true }
+
+    shapeRefs: Cannon3DShapeComponent[] = []
+    addShape(shape: Cannon3DShapeComponent, refresh = true) {
+        if (!this.shapeRefs.includes(shape)) {
+            if (shape.bodyRef && shape.bodyRef !== this) {
+                // ignore
+                return
+            }
+            this.shapeRefs.push(shape)
+            shape.bodyRef = this
+            if (refresh) this.refreshShapes()
+        }
+    }
+    removeShape(shape: Cannon3DShapeComponent, refresh = true) {
+        const index = this.shapeRefs.indexOf(shape)
+        if (index !== -1) {
+            if (shape.bodyRef === this) shape.bodyRef = undefined
+            this.shapeRefs.splice(index, 1)
+            if (refresh) this.refreshShapes()
+        }
+    }
+    refreshShapes(update = true) {
+        let changed = false
+        for (const s of this.body.shapes) {
+            if (!this.shapeRefs.find(sh=>sh.result.shape === s)) {
+                const index = this.body.shapes.indexOf(s)
+                if (index !== -1) {
+                    this.body.shapes.splice(index, 1)
+                    this.body.shapeOffsets.splice(index, 1)
+                    this.body.shapeOrientations.splice(index, 1)
+                    s.body = null
+                    changed = true
+                }
+            }
+        }
+        const bodyObj = this.object
+        bodyObj.updateMatrixWorld(true)
+        const bodyWorldPos = bodyObj.getWorldPosition(new Vector3())
+        const bodyWorldQuat = bodyObj.getWorldQuaternion(new Quaternion())
+        for (const s of this.shapeRefs) {
+            // s.bodyRef = this
+            if (!this.body.shapes.includes(s.result.shape)) {
+                const shape = s.result.shape
+                this.body.shapes.push(shape)
+                const offset = new Vec3()
+                const quat = new CQuaternion()
+                if(s.result.offset){
+                    offset.x += s.result.offset.x
+                    offset.y += s.result.offset.y
+                    offset.z += s.result.offset.z
+                }
+                if(s.result.orientation){
+                    quat.x = s.result.orientation.x
+                    quat.y = s.result.orientation.y
+                    quat.z = s.result.orientation.z
+                    quat.w = s.result.orientation.w
+                }
+                const shapeObj = s.object
+                if(bodyObj !== shapeObj){
+                    shapeObj.updateMatrixWorld(true)
+                    const worldPos = shapeObj.getWorldPosition(new Vector3())
+                    offset.x += worldPos.x - bodyWorldPos.x
+                    offset.y += worldPos.y - bodyWorldPos.y
+                    offset.z += worldPos.z - bodyWorldPos.z
+                    const worldQuat = shapeObj.getWorldQuaternion(new Quaternion())
+                    const relQuat = worldQuat.multiply(bodyWorldQuat.invert())
+                    // todo we need to multiply here
+                    quat.x = relQuat.x
+                    quat.y = relQuat.y
+                    quat.z = relQuat.z
+                    quat.w = relQuat.w
+                }
+                this.body.shapeOffsets.push(offset)
+                this.body.shapeOrientations.push(quat)
+                shape.body = this.body
+                changed = true
+            }
+        }
+        if (update && changed) {
+            this.updateMassProperties()
+            this.updateBoundingRadius()
+
+            this.body.aabbNeedsUpdate = true
+            this.object.setDirty?.({source: 'Cannon3DBodyComponent'})
+        }
+    }
+}