使用Three.js和cannon.js創建一個房間

Question

我剛剛開始使用Three.js和cannon.js，我一直試圖創建一個簡單的房間，但沒有成功。我正在關閉this example，我一直在嘗試添加牆壁和天花板。什麼是最簡單的方法來做到這一點？現在我有

   // wall? 
      wallGeometry = new THREE.PlaneGeometry(300, 300); 
      wallGeometry.applyMatrix(new THREE.Matrix4().makeRotationX(Math.PI)); 
      wallMesh = new THREE.Mesh(wallGeometry, material); 
      wallMesh.castShadow = false; 
      wallMesh.receiveShadow = true; 
      scene.add(wallMesh); 

但它亮起來奇怪，我沒有碰到它....如果我嘗試添加它通過cannon.js我得到一個無形的牆，但無法看到它。任何人都可以指向正確的方向嗎？

Answer 1

THREE.js本身沒有包含物理因素，所以當你創建任何對象的時候，它不會讓你自己碰到它們。你必須自己編寫這些功能或使用另一個庫（因爲你已經試圖用cannon.js）。

接下來 - 默認情況下，THREE js將只爲您的場景創建一個環境光線。如果你想要動態的閃電和陰影，所有的燈光必須由你提供，而你想要對燈光做出反應的物體必須使用MeshLambertMaterial或MeshPhongMaterial，對於陰影，你必須設置幾個特性並使用特定類型的燈光。

在你的例子中，你似乎沒有在任何地方定義牆體材料 - 這可能是牆壁不可見的原因。

檢查這些偷的，你需要的代碼段（和它看起來像你將需要大量的:-)

http://threejs.org/examples/

http://stemkoski.github.io/Three.js/index.html