javascript - 使用 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)。

下一步 - 默认情况下，三个 js 只会为您的场景创建一个环境光。如果您想要动态闪电和阴影，您必须提供所有灯光，并且您想要对灯光使用react的对象必须使用 MeshLambertMaterial 或 MeshPhongMaterial，对于阴影，您必须设置几个属性并使用特定类型的灯光。

在您的示例中，您似乎没有在任何地方定义墙壁 Material - 这可能就是墙壁不可见的原因。

检查这些并窃取你需要的代码片段(看起来你需要很多 :-)

http://threejs.org/examples/

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