如何導入JSON和渲染three.js所

Question

大家

嗨，我寫的代碼導入json文件，並與three.js所渲染它，我從出口three.js editor JSON文件它並不顯示在控制檯中的任何錯誤

window.onload = function(){ 
var 
    shapeObjectUrl = "test.json", 
    scene = new THREE.Scene(), 
    camera = new  THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight, 0.1, 1000), 
    renderer = new THREE.WebGLRenderer(), 
    loader = new THREE.JSONLoader(); 

renderer.setSize(window.innerWidth, window.innerHeight); 
document.body.appendChild(renderer.domElement); 

loader.load(shapeObjectUrl, 
    function (geometry, materials) { 
     console.log(geometry, materials); 
     var mesh = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial()); 
     scene.add(mesh); 
     console.log(mesh); 
     render(); 
}); 

camera.position.z = 5; 

var render = function() { 
    requestAnimationFrame(render); 
    renderer.render(scene, camera); 
}; 

}; 

JSON文件：

{ 
"metadata": { 
    "version": 4, 
    "type": "geometry", 
    "generator": "GeometryExporter" 
}, 
"vertices": [0,50,20,14.14213562373095,50,14.142135623730951,20,50,1.2246063538223773e-15,14.142135623730951,50,-14.14213562373095,2.4492127076447545e-15,50,-20,-14.14213562373095,50,-14.142135623730955,-20,50,-3.673819061467132e-15,-14.142135623730955,50,14.142135623730947,-4.898425415289509e-15,50,20,0,-50,20,14.14213562373095,-50,14.142135623730951,20,-50,1.2246063538223773e-15,14.142135623730951,-50,-14.14213562373095,2.4492127076447545e-15,-50,-20,-14.14213562373095,-50,-14.142135623730955,-20,-50,-3.673819061467132e-15,-14.142135623730955,-50,14.142135623730947,-4.898425415289509e-15,-50,20,0,50,0,0,-50,0], 
"normals": [0.3826834323650897,0,0.9238795325112866,0,0,1,0.7071067811865475,0,0.7071067811865476,0.9238795325112866,0,0.3826834323650899,1,0,6.123031769111886e-17,0.9238795325112866,0,-0.38268343236508967,0.7071067811865476,0,-0.7071067811865475,0.3826834323650899,0,-0.9238795325112866,1.2246063538223773e-16,0,-1,-0.3826834323650895,0,-0.9238795325112868,-0.7071067811865474,0,-0.7071067811865476,-0.9238795325112866,0,-0.38268343236508984,-1,0,-1.836909530733566e-16,-0.9238795325112868,0,0.3826834323650895,-0.7071067811865478,0,0.7071067811865475,-0.38268343236508995,0,0.9238795325112866,-2.4492127076447545e-16,0,1,0,1,0,0,-1,0], 
"uvs": [[0,1,0,0,0.125,1,0.125,0,0.25,1,0.25,0,0.375,1,0.375,0,0.5,1,0.5,0,0.625,1,0.625,0,0.75,1,0.75,0,0.875,1,0.875,0,1,1,1,0]], 
"faces": [56,0,9,1,0,1,2,0,1,1,2,56,9,10,1,1,3,2,0,1,2,2,56,1,10,2,2,3,4,3,2,2,4,56,10,11,2,3,5,4,3,2,4,4,56,2,11,3,4,5,6,5,4,4,6,56,11,12,3,5,7,6,5,4,6,6,56,3,12,4,6,7,8,7,6,6,8,56,12,13,4,7,9,8,7,6,8,8,56,4,13,5,8,9,10,9,8,8,10,56,13,14,5,9,11,10,9,8,10,10,56,5,14,6,10,11,12,11,10,10,12,56,14,15,6,11,13,12,11,10,12,12,56,6,15,7,12,13,14,13,12,12,14,56,15,16,7,13,15,14,13,12,14,14,56,7,16,8,14,15,16,15,14,14,16,56,16,17,8,15,17,16,15,14,16,16,56,0,1,18,0,2,3,17,17,17,17,56,1,2,18,2,4,5,17,17,17,17,56,2,3,18,4,6,7,17,17,17,17,56,3,4,18,6,8,9,17,17,17,17,56,4,5,18,8,10,11,17,17,17,17,56,5,6,18,10,12,13,17,17,17,17,56,6,7,18,12,14,15,17,17,17,17,56,7,8,18,14,16,17,17,17,17,17,56,10,9,19,3,1,0,18,18,18,18,56,11,10,19,5,3,2,18,18,18,18,56,12,11,19,7,5,4,18,18,18,18,56,13,12,19,9,7,6,18,18,18,18,56,14,13,19,11,9,8,18,18,18,18,56,15,14,19,13,11,10,18,18,18,18,56,16,15,19,15,13,12,18,18,18,18,56,17,16,19,17,15,14,18,18,18,18] 
} 

我感謝所有幫助

Answer 1

您所使用的方法是正確的，除了像一些小事情，在loader.load函數的回調函數也嘗試訪問材質，但它未包含在JSON中。

現在我用你的代碼，是能夠成功加載JSON對象，所以沒有什麼錯，但要設置攝像機的位置，以5分的只是使加載的模型出來的觀點。

所以，你可以重新定位模型這樣

 var loader = new THREE.JSONLoader(); 
     loader.load('models/jsonModel.json', function (geometry) { 
     var mesh = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial()); 

         mesh.position.x =500; 
         mesh.position.y =100; 
         mesh.position.z =500; 
     scene.add(mesh); 

     }); 

或設置camera位置到其他位置。

您還可以使用OrbitControls，而不是。

包括我創建了一個示例代碼here，你可以看看上面提到的東西都是線138和62，更好地理解。