如何在three.js中导入json和渲染

Hi everyone i write code for importing a json file and rendering it with three.js i export the json file from three.js editor it 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:

{
"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

我感谢任何帮助

1 个解决方案

#1

The method you are using is right except for some minor things like, in loader.load function'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 camera position to some other position.

或将相机位置设置到其他位置。

You can also use OrbitControls to instead.

您也可以使用OrbitControls代替。

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行,以便更好地理解。

1 个解决方案

#1

更多相关文章

随机推荐