Question

我尝试在Chrome浏览器中渲染当您打开新项目时由Blender v2.74加载的默认3D立方体模板。我使用threejs v1.4.0附加组件将其导出为json。我使用的是Three.js修订版71。

参考以下文档，我尝试加载当前存储在数据库中的这个json模型。（http://threejs.org/docs/#Reference/Loaders/JSONLoader）

一切似乎都很好，但它失败并出现以下错误：

未捕获的TypeError：无法读取属性＆＃39;属性＆＃39;未定义的

未捕获的TypeError：无法读取属性＆＃39;透明＆＃39;未定义的

生成的json是：

{
    "faces": [33,0,1,2,3,0,1,2,3,33,4,7,6,5,4,5,6,7,33,0,4,5,1,0,4,7,1,33,1,5,6,2,1,7,6,2,33,2,6,7,3,2,6,5,3,33,4,0,3,7,4,0,3,5],
    "name": "CubeGeometry",
    "metadata": {
        "faces": 6,
        "uvs": 0,
        "normals": 8,
        "type": "Geometry",
        "vertices": 8,
        "generator": "io_three",
        "version": 3
    },
    "normals": [0.577349,-0.577349,-0.577349,0.577349,-0.577349,0.577349,-0.577349,-0.577349,0.577349,-0.577349,-0.577349,-0.577349,0.577349,0.577349,-0.577349,-0.577349,0.577349,-0.577349,-0.577349,0.577349,0.577349,0.577349,0.577349,0.577349],
    "vertices": [1,-1,-1,1,-1,1,-1,-1,1,-1,-1,-1,1,1,-1,0.999999,1,1,-1,1,1,-1,1,-1],
    "uvs": []
}

用于加载json的代码是：

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

camera.position.z = 5;

// instantiate a loader
var loader = new THREE.JSONLoader();

// load a resource
loader.load(
    // resource URL
   $scope.parentScope.apiRootUrl + "/" + $scope.selectedItem.model3D,
    // Function when resource is loaded
    function (geometry, materials) {
        var material = new THREE.MeshFaceMaterial(materials);
        var object = new THREE.Mesh(geometry, material);
        scene.add(object);
    }
);

var render = function () {
    requestAnimationFrame(render);

    renderer.render(scene, camera);
};

render();

Answer 1

您的JSON模型在init（）方法之后正确加载，并且当调用window.requestAnimationFrame（update）时，它会更新并且您的错误消失了。

threejs blend json export +无法读取属性＆＃39; type＆＃39;未定义的

1 个答案: