javascript - 无法将从 Blender 导出的对象加载到 Three.js 中？

Question

我使用 Blender 的时间比我编码的时间还要长，当我得知可以使用 Three.js 在浏览器中加载和操作混合时，我感到非常兴奋。我查找了教程，导出了一个简单的 icosphere，然后插入了我的 .json 文件。唉，在查看了许多不同的页面和示例之后，尽管无法在代码中找到任何可见的错误，但我似乎仍然无法让它出现在浏览器中。我用它制作了一个 codepen 项目(这是我能找到的在线获取 json 文件的唯一方法)。

https://codepen.io/redheadedmandy/project/editor/ZjNEQG#0

以下是调用 .json 文件的代码片段:

function initMesh() {
    function addModelToScene(geometry, materials) {
        var material = new THREE.MeshFaceMaterial(materials);
        model = new THREE.Mesh(geometry, material);
        model.scale.set(1, 1, 1);
        model.position.set(50, 0, 0);
        scene.add(model);

        var loader = new THREE.JSONLoader();
        loader.load("casvusnion.json", addModelToScene);
    }
}

如果任何人都可以发现问题，或者对问题可能是什么有建议，我将非常感谢您的帮助!

Answer 1

试试这个:

function initMesh() {

    var loader = new THREE.JSONLoader();
    loader.load("casvusnion.json", addModelToScene);

    function addModelToScene(geometry, materials) {

        var material = new THREE.MeshFaceMaterial(materials);
        model = new THREE.Mesh(geometry, material);
        model.scale.set(1, 1, 1);
        model.position.set(50, 0, 0);
        scene.add(model);

    }

}

并检查浏览器的控制台日志中是否有警告和错误消息。

还有你的相机

camera = new THREE.PerspectiveCamera(70, WIDTH / HEIGHT, 1, 10);
camera.position.set(0, 3.5, 5);
camera.lookAt(scene.position);

和你的模型

model.position.set(50, 0, 0);

看起来模型的位置距离相机的视野很远。

最后，您的项目是只读的，因此其他人不可能更改其中的某些内容。