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

Posted 2023-02-27

【中文标题】如何在three.js中导入json和渲染

【英文标题】：how to import json and rendering in three.js

【发布时间】：2014-03-24 01:30:31

【问题描述】：

大家好，我编写了用于导入 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]

感谢您的帮助

【问题讨论】：

只是想知道，您想在自己的threejs代码的threejs编辑器中显示导出的对象。？

【参考方案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行，更好理解。

【讨论】：

@user3340330 ：非常欢迎您 :) 。如果您发现答案有帮助，您甚至可以投票。 :)

我将相机位置设置为 1000，网格位置设置为 0 0 0 但它没有出现。我复制了原始海报的 json 模型。场景渲染但网格不显示。

@SWA：这是一个非常古老的答案，模型或 Three.js API 可能也发生了变化。请查看官方文档，如果仍然无效，您也可以提出一个新问题。

@Shiva，我在这里有一个新的讨论***.com/questions/43112309/…。也许你对此有想法