deploy: 2-stage Dockerfile, npm build on HF

src/components/ModelManager.jsx

@@ -1,45 +1,68 @@
 /**
- * ModelManager.jsx
- * Renders all GLB models in the Three.js scene.
- * Fixes:
- *  - Animation detection: registers ALL clips from GLB immediately on load
- *  - Animation playback: auto-plays first clip, responds to animationPlaying state
- *  - Mixer update: driven by useFrame so clips actually animate
- *  - Transform sync: bidirectional (store ↔ TransformControls)
- *  - Clone: properly clones scene so multiple instances don't share geometry
+ * ModelManager.jsx — Fixed version
+ *
+ * Bug fixes:
+ * 1. TypeError "Cannot read properties of undefined (reading 'length')"
+ *    — animations array was undefined before GLTF fully loaded
+ * 2. Model selection jumps to wrong model
+ *    — TransformControls was passed groupRef (a ref object) not groupRef.current
+ *    — Fixed: use explicit attach ref pattern
+ * 3. Physics causes shaking/flipping
+ *    — Physics engine was writing back to store every frame, causing
+ *      a feedback loop: store update → useEffect → reset position → physics fight
+ *    — Fixed: when physics is ON for a body, skip the store→mesh sync useEffect
+ *    — PhysicsEngine syncs mesh; store only updated by user transforms
+ * 4. Physics auto-enabled on import
+ *    — Removed: physics registration no longer fires on model load
+ *    — Physics registration now only happens when user explicitly enables physics
+ * 5. City GLB moves on physics enable
+ *    — Default type is now 'static' for any model with no physics config set
+ *    — Fixed: bodies placed at exact mesh world position (no bounding box offset)
  */
-import { useEffect, useRef, useMemo } from 'react'
-import { useGLTF, useAnimations, TransformControls } from '@react-three/drei'
-import { useFrame }   from '@react-three/fiber'
-import * as THREE     from 'three'
-import useStore       from '../store/useStore'
-import { registerPhysicsObject, unregisterPhysicsObject } from './PhysicsEngine'
+import { useEffect, useRef, useMemo, useCallback } from 'react'
+import { useGLTF, TransformControls } from '@react-three/drei'
+import { useFrame } from '@react-three/fiber'
+import * as THREE   from 'three'
+import useStore     from '../store/useStore'
+
+// Physics imported lazily to avoid circular deps
+let _registerPhysics   = null
+let _unregisterPhysics = null
+async function getPhysicsFns() {
+  if (!_registerPhysics) {
+    const m = await import('./PhysicsEngine')
+    _registerPhysics   = m.registerPhysicsObject
+    _unregisterPhysics = m.unregisterPhysicsObject
+  }
+  return { register: _registerPhysics, unregister: _unregisterPhysics }
+}
 
 function ModelMesh({ model }) {
-  const groupRef     = useRef()
-  const mixerRef     = useRef(null)
-  const actionsRef   = useRef({})
+  const groupRef       = useRef()
+  const mixerRef       = useRef(null)
+  const actionsRef     = useRef({})
   const currentAnimRef = useRef(null)
+  const physicsActiveRef = useRef(false)  // is this body currently in physics world?
 
-  const { scene, animations } = useGLTF(model.url)
+  const { scene, animations: rawAnims } = useGLTF(model.url)
+  const animations = rawAnims || []  // guard against undefined
 
   const {
     selectedModelId, transformMode,
     updateModelTransform, setModelAnimations, setModelAnimPlaying,
     selectModel, currentFrame, keyframes,
     snapEnabled, snapTranslate, snapRotate, snapScale,
+    physicsEnabled, modelPhysics,
   } = useStore()
 
-  const isSelected  = selectedModelId === model.id
-  const isRenderMode = useStore.getState().isRenderMode || useStore.getState().isExporting
+  const isSelected   = selectedModelId === model.id
+  const isRenderMode = useStore(s => s.isRenderMode || s.isExporting)
 
-  // ── Clone scene using SkeletonUtils for correct bone cloning ──────────────
+  // ── Clone scene (manual skeleton rebind, no SkeletonUtils dep) ────────────
   const clonedScene = useMemo(() => {
-    // Deep clone preserving skeleton/skinned mesh properly
-    const clone = scene.clone(true)
-    // Re-bind skinned meshes to cloned skeleton
-    const srcBones = []
-    const dstBones = []
+    if (!scene) return null
+    const clone    = scene.clone(true)
+    const srcBones = [], dstBones = []
     scene.traverse(n => { if (n.isBone) srcBones.push(n) })
     clone.traverse(n => { if (n.isBone) dstBones.push(n) })
     clone.traverse(child => {
@@ -51,11 +74,8 @@ function ModelMesh({ model }) {
         child.skeleton = new THREE.Skeleton(newBones, child.skeleton.boneInverses)
         child.bind(child.skeleton, child.bindMatrix)
       }
-    })
-    clone.traverse(child => {
       if (child.isMesh) {
-        child.castShadow    = true
-        child.receiveShadow = true
+        child.castShadow = child.receiveShadow = true
         if (child.material) {
           child.material = Array.isArray(child.material)
             ? child.material.map(m => m.clone())
@@ -66,117 +86,99 @@ function ModelMesh({ model }) {
     return clone
   }, [scene])
 
-  // ── Set up AnimationMixer + register all clips ────────────────────────────
+  // ── AnimationMixer — set up on load ───────────────────────────────────────
   useEffect(() => {
-    if (!clonedScene) return
-
-    // Create mixer on the cloned scene root
+    if (!clonedScene || !animations.length) return
     const mixer = new THREE.AnimationMixer(clonedScene)
     mixerRef.current = mixer
+    const actionMap = {}
+    animations.forEach(clip => {
+      const action = mixer.clipAction(clip, clonedScene)
+      action.setLoop(THREE.LoopRepeat, Infinity)
+      action.clampWhenFinished = false
+      actionMap[clip.name] = action
+    })
+    actionsRef.current = actionMap
 
-    if (animations && animations.length > 0) {
-      const actionMap = {}
-      animations.forEach(clip => {
-        // Re-target clip to cloned scene bones
-        const action = mixer.clipAction(clip, clonedScene)
-        action.setLoop(THREE.LoopRepeat, Infinity)
-        action.clampWhenFinished = false
-        actionMap[clip.name] = action
-      })
-      actionsRef.current = actionMap
-
-      // Register animation names to store
-      const names = animations.map(a => a.name)
-      setModelAnimations(model.id, names)
-
-      // Auto-play first clip if model has no active animation set
-      const activeAnim = useStore.getState().models.find(m => m.id === model.id)?.activeAnimation
-      const firstClip  = activeAnim || names[0]
-      if (firstClip && actionMap[firstClip]) {
-        actionMap[firstClip].play()
-        currentAnimRef.current = firstClip
-      }
+    const names = animations.map(a => a.name)
+    setModelAnimations(model.id, names)
 
-      // Mark as playing
-      setModelAnimPlaying(model.id, true)
+    const curAnim = useStore.getState().models.find(m => m.id === model.id)?.activeAnimation
+    const first   = curAnim || names[0]
+    if (first && actionMap[first]) {
+      actionMap[first].play()
+      currentAnimRef.current = first
     }
+    setModelAnimPlaying(model.id, true)
 
     return () => {
       mixer.stopAllAction()
       mixer.uncacheRoot(clonedScene)
     }
-  }, [clonedScene, animations, model.id])
+  }, [clonedScene, animations.length, model.id])  // animations.length safe guard
 
-  // ── React to animation changes from store ─────────────────────────────────
+  // ── Animation switch ──────────────────────────────────────────────────────
   useEffect(() => {
     const mixer   = mixerRef.current
     const actions = actionsRef.current
     if (!mixer || !model.activeAnimation) return
-
-    const targetAnim = model.activeAnimation
-    if (currentAnimRef.current === targetAnim && model.animationPlaying) return
-
-    // Cross-fade to new animation
-    const prevAction = actions[currentAnimRef.current]
-    const nextAction = actions[targetAnim]
-
-    if (nextAction) {
-      if (prevAction && prevAction !== nextAction) {
-        prevAction.fadeOut(0.3)
-        nextAction.reset().fadeIn(0.3)
-      } else {
-        nextAction.reset()
-      }
-
-      if (model.animationPlaying) {
-        nextAction.play()
-      } else {
-        nextAction.play()
-        nextAction.paused = true
-      }
-
-      nextAction.setEffectiveTimeScale(model.animationSpeed || 1)
-      currentAnimRef.current = targetAnim
-    }
+    const target = model.activeAnimation
+    if (currentAnimRef.current === target) return
+    const prev = actions[currentAnimRef.current]
+    const next = actions[target]
+    if (!next) return
+    if (prev && prev !== next) { prev.fadeOut(0.3); next.reset().fadeIn(0.3) }
+    else next.reset()
+    if (model.animationPlaying) next.play()
+    else { next.play(); next.paused = true }
+    next.setEffectiveTimeScale(model.animationSpeed || 1)
+    currentAnimRef.current = target
   }, [model.activeAnimation, model.animationPlaying, model.animationSpeed])
 
-  // ── Play/pause toggle ─────────────────────────────────────────────────────
   useEffect(() => {
-    const actions = actionsRef.current
-    const cur     = currentAnimRef.current
-    if (!cur || !actions[cur]) return
-    actions[cur].paused = !model.animationPlaying
+    const cur = actionsRef.current[currentAnimRef.current]
+    if (cur) cur.paused = !model.animationPlaying
   }, [model.animationPlaying])
 
-  // ── Speed changes ─────────────────────────────────────────────────────────
   useEffect(() => {
-    const actions = actionsRef.current
-    Object.values(actions).forEach(a => {
-      a.setEffectiveTimeScale(model.animationSpeed || 1)
-    })
+    Object.values(actionsRef.current).forEach(a => a.setEffectiveTimeScale(model.animationSpeed || 1))
   }, [model.animationSpeed])
 
-  // ── Register with physics engine when model loads ──────────────────────────
+  // ── Tick mixer ────────────────────────────────────────────────────────────
+  useFrame((_, delta) => { mixerRef.current?.update(delta) })
+
+  // ── Physics registration — ONLY when user explicitly enables physics ───────
   useEffect(() => {
-    if (!groupRef.current) return
-    const s = useStore.getState()
-    if (!s.physicsEnabled) return
-    const props = s.modelPhysics[model.id] || {}
-    registerPhysicsObject(model.id, groupRef.current, {
-      mass:           props.mass           ?? 1,
-      type:           props.type           ?? 'dynamic',
-      linearDamping:  props.damping        ?? 0.3,
-      angularDamping: props.angularDamping ?? 0.5,
-      friction:       props.friction       ?? 0.4,
-      restitution:    props.restitution    ?? 0.2,
-      centerOfMassY:  props.centerOfMassY  ?? 0,
-      collisionShape: props.collisionShape ?? 'box',
-      ccdRadius:      props.ccdRadius      ?? 0,
+    if (!physicsEnabled || !groupRef.current) {
+      physicsActiveRef.current = false
+      return
+    }
+    // Register this body
+    getPhysicsFns().then(({ register, unregister }) => {
+      if (!groupRef.current) return
+      const props = modelPhysics[model.id] || {}
+      register(model.id, groupRef.current, {
+        mass:           props.mass           ?? 1,
+        type:           props.type           ?? 'static',   // default STATIC — safe
+        linearDamping:  props.damping        ?? 0.3,
+        angularDamping: props.angularDamping ?? 0.5,
+        friction:       props.friction       ?? 0.4,
+        restitution:    props.restitution    ?? 0.2,
+        centerOfMassY:  props.centerOfMassY  ?? 0,
+        collisionShape: props.collisionShape ?? 'box',
+        ccdRadius:      props.ccdRadius      ?? 0,
+      })
+      physicsActiveRef.current = true
     })
-    return () => unregisterPhysicsObject(model.id)
-  }, [model.id, model.url, useStore.getState().physicsEnabled])
+    return () => {
+      getPhysicsFns().then(({ unregister }) => {
+        unregister(model.id)
+        physicsActiveRef.current = false
+      })
+    }
+  }, [physicsEnabled, model.id, JSON.stringify(modelPhysics[model.id])])
 
-  // ── Apply material overrides from store ──────────────────────────────────
+  // ── Material overrides ────────────────────────────────────────────────────
   useEffect(() => {
     if (!clonedScene) return
     const mat = model.materialOverride
@@ -184,23 +186,18 @@ function ModelMesh({ model }) {
       if (!child.isMesh || !child.material) return
       const mats = Array.isArray(child.material) ? child.material : [child.material]
       mats.forEach(m => {
-        if (mat?.color !== undefined)     m.color?.set(mat.color)
+        if (mat?.color     !== undefined) m.color?.set(mat.color)
         if (mat?.roughness !== undefined) m.roughness = mat.roughness
         if (mat?.metalness !== undefined) m.metalness = mat.metalness
-        if (mat?.opacity !== undefined)   { m.opacity = mat.opacity; m.transparent = mat.opacity < 1 }
+        if (mat?.opacity   !== undefined) { m.opacity = mat.opacity; m.transparent = mat.opacity < 1 }
         if (mat?.wireframe !== undefined) m.wireframe = !!mat.wireframe
-        if (!mat) {
-          // Reset - use original material stored at load
-          m.wireframe = false
-          if (m.opacity !== undefined) { m.opacity=1; m.transparent=false }
-        }
+        if (!mat) { m.wireframe = false; m.opacity = 1; m.transparent = false }
         m.needsUpdate = true
       })
     })
   }, [model.materialOverride, clonedScene])
 
-  // ── Tick mixer ───────────────────────────────────────────────────────────
-  // ── Shadow settings ──────────────────────────────────────────────────────
+  // ── Shadow settings ───────────────────────────────────────────────────────
   useEffect(() => {
     if (!clonedScene) return
     clonedScene.traverse(child => {
@@ -211,33 +208,32 @@ function ModelMesh({ model }) {
     })
   }, [model.castShadow, model.receiveShadow, clonedScene])
 
-  useFrame((_, delta) => {
-    mixerRef.current?.update(delta)
-  })
-
-  // ── Sync position from store (and keyframe interpolation) ────────────────��
+  // ── Sync store position → mesh
+  //    SKIPPED when physics engine is actively driving this body
   useEffect(() => {
     if (!groupRef.current) return
-    const store = useStore.getState()
+    if (physicsActiveRef.current) return   // physics owns the transform
+
+    const store       = useStore.getState()
     const interpolated = store.interpolateAtFrame(model.id, currentFrame)
-    const src = interpolated || model
+    const src          = interpolated || model
     groupRef.current.position.set(...src.position)
     groupRef.current.rotation.set(...src.rotation)
     groupRef.current.scale.set(...src.scale)
   }, [currentFrame, keyframes, model.position, model.rotation, model.scale])
 
-  // ── Handle TransformControls drag ─────────────────────────────────────────
-  const onTransformChange = () => {
+  // ── TransformControls drag → store ────────────────────────────────────────
+  const onTransformChange = useCallback(() => {
     if (!groupRef.current) return
-    const p = groupRef.current.position
-    const r = groupRef.current.rotation
+    const p  = groupRef.current.position
+    const r  = groupRef.current.rotation
     const sc = groupRef.current.scale
     updateModelTransform(model.id, 'position', [p.x,  p.y,  p.z])
     updateModelTransform(model.id, 'rotation', [r.x,  r.y,  r.z])
     updateModelTransform(model.id, 'scale',    [sc.x, sc.y, sc.z])
-  }
+  }, [model.id, updateModelTransform])
 
-  if (!model.visible) return null
+  if (!model.visible || !clonedScene) return null
 
   return (
     <>
@@ -247,25 +243,28 @@ function ModelMesh({ model }) {
       >
         <primitive object={clonedScene} />
 
-        {/* Selection indicator — hidden during render */}
+        {/* Selection ring — hidden during render */}
         {isSelected && !isRenderMode && (
           <mesh rotation={[-Math.PI/2, 0, 0]}>
-            <ringGeometry args={[0.85, 1.0, 48]} />
-            <meshBasicMaterial color="#4f8eff" transparent opacity={0.7}
+            <ringGeometry args={[0.9, 1.05, 64]} />
+            <meshBasicMaterial color="#4f8eff" transparent opacity={0.6}
               side={THREE.DoubleSide} depthWrite={false} />
           </mesh>
         )}
       </group>
 
-      {isSelected && !isRenderMode && (
+      {/* TransformControls — fix: pass ref.current via key trick so it
+          always attaches to the correct mesh when selection changes */}
+      {isSelected && !isRenderMode && groupRef.current && (
         <TransformControls
-          object={groupRef}
+          key={model.id}           // force remount when selected model changes
+          object={groupRef.current}
           mode={transformMode}
-          onObjectChange={onTransformChange}
-          size={0.75}
+          onChange={onTransformChange}
           translationSnap={snapEnabled ? snapTranslate : null}
-          rotationSnap={snapEnabled ? (snapRotate * Math.PI/180) : null}
+          rotationSnap={snapEnabled ? (snapRotate * Math.PI / 180) : null}
           scaleSnap={snapEnabled ? snapScale : null}
+          size={0.8}
         />
       )}
     </>
@@ -274,6 +273,7 @@ function ModelMesh({ model }) {
 
 export default function ModelManager() {
   const models = useStore(s => s.models)
+  if (!models?.length) return null
   return (
     <>
       {models.map(model => (

src/components/PhysicsEngine.jsx

@@ -126,14 +126,10 @@ function makeBody(mesh, props = {}) {
     )))
   }
 
-  // Place at mesh world position (accounting for bounding box center)
+  // Place at mesh world position exactly — no offsets that cause drift
   const wp = new THREE.Vector3()
   mesh.getWorldPosition(wp)
-  body.position.set(
-    wp.x + cx.x,
-    wp.y + cx.y + size.y/2 + centerOfMassY,
-    wp.z + cx.z,
-  )
+  body.position.set(wp.x, wp.y + size.y/2, wp.z)
   const wq = new THREE.Quaternion()
   mesh.getWorldQuaternion(wq)
   body.quaternion.set(wq.x, wq.y, wq.z, wq.w)
@@ -266,17 +262,12 @@ function Ticker() {
       accum.current -= FIXED
     }
 
-    // Sync physics → Three.js meshes → store
+    // Sync physics → Three.js meshes ONLY (no store writeback - causes feedback loop)
     bodies.forEach((body, id) => {
       const mesh = meshes.get(id)
       if (!mesh || body.type === CANNON.Body.STATIC) return
       mesh.position.set(body.position.x, body.position.y, body.position.z)
       mesh.quaternion.set(body.quaternion.x, body.quaternion.y, body.quaternion.z, body.quaternion.w)
-      // Write back to store so UI reflects real position
-      useStore.getState().updateModelTransform(id, 'position', [body.position.x, body.position.y, body.position.z])
-      useStore.getState().updateModelTransform(id, 'rotation', [
-        mesh.rotation.x, mesh.rotation.y, mesh.rotation.z,
-      ])
     })
   })
 

src/store/useStore.js

@@ -352,7 +352,7 @@ const useStore = create(
           state.fps          = data.fps          || 30
           state.lightingPreset=data.lightingPreset||'studio'
           state.skybox       = data.skybox       || { type:'preset', value:null, bgColor:'#080810', showBg:false }
-          state.physicsEnabled=data.physicsEnabled||false
+          state.physicsEnabled = false  // always OFF on load — user enables manually
           state.gravity      = data.gravity      ?? -9.82
           state.modelPhysics = data.modelPhysics || {}
           state.undoStack    = []