javascript 如何在three.js中导入json并渲染
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21952985/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to import json and rendering in three.js
提问by Omid Gharib
Hi everyone i write code for importing a json file and rendering it with three.js i export the json file from three.js editorit doesnt show any error in console
大家好，我编写了用于导入 json 文件并使用three.js 渲染它的代码我从three.js 编辑器导出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 file:
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]
}
i appreciate any help
我感谢任何帮助
回答by Shiva
The method you are using is right except for some minor things like, in loader.loadfunction's call back you are trying to access material also but its not included in the JSON .
您使用的方法是正确的，除了一些小问题，例如，在loader.load函数的回调中，您也尝试访问材料，但它未包含在 JSON 中。
Now I used your code and was successfully able to load the JSON object, so there is nothing wrong with that, except that you are setting camera position to 5 which just makes the loaded model out of the view.
现在我使用了您的代码并成功加载了 JSON 对象，因此没有任何问题，只是您将相机位置设置为 5，这只会使加载的模型脱离视图。
So you can reposition the model like this
所以你可以像这样重新定位模型
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 );
});
or set the cameraposition to some other position.
或将camera位置设置为其他位置。
You can also use OrbitControlsto instead.
您也可以使用OrbitControlsto 代替。
Including the above mentioned things I have created a sample code here, you can look are lines 138 and 62, to understand better.
包括上面提到的东西，我在这里创建了一个示例代码，你可以看看第 138 和 62 行，以便更好地理解。
