collider calculation update

css/style.css

@@ -19,8 +19,8 @@ canvas {
   left:0;
   width:100vw;
   height:100vh;
-  background:#000000;
-  background: radial-gradient(circle,rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.9) 100%);
+  background:#ffffff;
+  background: radial-gradient(circle,rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0.9) 100%);
   opacity:1.0;
   z-index:10;
   display:flex;
@@ -33,7 +33,7 @@ canvas {
 }
 
 #instructions {
-  color:#fff;
+  color:#000000;
   text-align:center;
   position: relative;
   font-size: 40px;

js/Item.js

@@ -70,15 +70,27 @@ export class Item {
             const size = new THREE.Vector3();
             boundingBox.getSize(size);
 
-            // Store the offset from the pivot (base) to the visual center
-            this.centerOffset.set(0, size.y / 2, 0);
+            // Calculate the world center of the bounding box
+            const worldCenter = new THREE.Vector3();
+            boundingBox.getCenter(worldCenter);
 
-            const rbDesc = RigidBodyDesc.dynamic().setTranslation(this.object.position.x, this.object.position.y, this.object.position.z);
+            // Calculate the local center by subtracting the object's world position
+            this.centerOffset.subVectors(worldCenter, this.object.position);
+
+            let rbDesc;
+            if (this.content === null) {
+                rbDesc = RigidBodyDesc.kinematicPositionBased();
+            } else {
+                rbDesc = RigidBodyDesc.dynamic();
+            }
+
+            rbDesc.setTranslation(this.object.position.x, this.object.position.y, this.object.position.z);
             this.rb = this.rapierWorld.createRigidBody(rbDesc);
 
             const colDesc = ColliderDesc.cuboid(size.x / 2, size.y / 2, size.z / 2)
-                .setTranslation(0, this.centerOffset.y, 0); // Use the stored offset
+                .setTranslation(this.centerOffset.x, this.centerOffset.y, this.centerOffset.z); // Use the calculated local center offset
             this.coll = this.rapierWorld.createCollider(colDesc, this.rb);
+
             this.loadState = 'loaded';
         } catch (error) {
             console.error(`Failed to load model for tiem: ${this.name}`);
@@ -225,7 +237,7 @@ export class Item {
     }
 
     async _createContentDisplay() {
-        console.log(this.contentDisplay)
+        //console.log(this.contentDisplay)
         // Prevent creating a new display if the old one is still fading out.
         if (this.content instanceof AudioContent && this.content.isFadingOut) {
             return;

js/ModelLoader.js

@@ -85,8 +85,8 @@ export class ModelLoader {
                         canvas.width = 1024;
                         canvas.height = 1024;
                         const ctx = canvas.getContext('2d');
-                        ctx.fillStyle = '#fff';
-                        ctx.fillRect(0, 0, 512, 512);
+                        ctx.fillStyle = '#0044ffff';
+                        ctx.fillRect(0, 0, 1024,  1024);
                         finalTexture = new THREE.CanvasTexture(canvas);
                     }
                     

js/Player.js

@@ -75,7 +75,7 @@ export class Player {
         } else if(e.code == 'KeyF' && this.currentIntItem && !this.attachedItem){
             this.attachedItem = this.currentIntItem;
             this.attachedItem.isActive = true;
-            console.log("Attached item to player: ", this.attachedItem.object.name);
+            //console.log("Attached item to player: ", this.attachedItem.object.name);
         }
 
         if (e.code === 'Space' && this.attachedItem) {

js/main.js

@@ -23,7 +23,7 @@ import { ItemManager } from './ItemManager';
 let scene, renderer;
 let player;
 let rapierWorld, debugLines, itemManager;
-let debugRapier = false;
+let debugRapier = true;
 let isPaused = false;
 
 let socket;
@@ -86,17 +86,8 @@ async function init() {
   /* Load Items/Content */
   itemManager = new ItemManager("json/Items.json", scene, rapierWorld, player, interactableItems);
 
-  // const textContent = new TextContent("This is an example of dynamic text rendered onto a texture in Three.js. It can be used to display information about an object. This is an example of dynamic text rendered onto a texture in Three.js. It can be used to display information about an object. This is an example of dynamic text rendered onto a texture in Three.js. It can be used to display information about an object. This is an example of dynamic text rendered onto a texture in Three.js. It can be used to display information about an object. This is an example of dynamic text rendered onto a texture in Three.js. It can be used to display information about an object. This is an example of dynamic text rendered onto a texture in Three.js. It can be used to display information about an object.This is an example of dynamic text rendered onto a texture in Three.js. It can be used to display information about an object. This is an example of dynamic text rendered onto a texture in Three.js. It can be used to display information about an object. This is an example of dynamic text rendered onto a texture in Three.js. It can be used to display information about an object.");
-  // const imageContent = new ImageContent("images/test.webp");
-  // const videoContent = new VideoContent("videos/sintel.mp4");
-  // const audioContent = new AudioContent("sounds/Violet.mp3", player.audioListener);
-
-  // const item = new Item(rapierWorld, scene, player, false, new THREE.Vector3(0, 1, 0), 20, "test", '/models/init.glb', null, spawnedObjects, null);
-  // await item.loadModel();
-
-  // const intItem = new Item(rapierWorld, scene, player, true, new THREE.Vector3(50, 1, 0), 5, "intTest", './models/cone.glb', null, spawnedObjects, audioContent);
-  // await intItem.loadModel();
-  // interactableItems.push(intItem);
+  const item = new Item(rapierWorld, scene, player, true, new THREE.Vector3(0, 20, 0), 20, "test", '/models/init.glb', null, spawnedObjects, null);
+  await item.loadModel();
   
 
   instructions.innerHTML = "Click to play";

package.json

@@ -20,6 +20,7 @@
   "description": "",
   "devDependencies": {
     "@types/dat.gui": "^0.7.13",
-    "dat.gui": "^0.7.9"
+    "dat.gui": "^0.7.9",
+    "vite": "^7.1.7"
   }
 }

public/json/Items.json

@@ -20,7 +20,7 @@
             "contentType": "text",
             "file": "./texts/example2.md",
             "isCollider": true,
-            "position": { "x": 5, "y": 50, "z": 0 },
+            "position": { "x": -100, "y": 1, "z": 0 },
             "rotation": { "x": 0, "y": 0, "z": 0 },
             "scale": 10
         }