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

奥米德·加里卜(Omid Gharib)

大家好,我编写了用于导入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文件:

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

我感谢任何帮助

湿婆神

除了一些次要的事情外,您使用的方法是正确的,例如,在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代替。

包括上述内容,我在这里创建了一个示例代码,您可以看一下138和62行,以更好地理解。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在打字稿中导入Three.js GLTFExporter?

如何在three.js中导入字符串值(x,y,z)以生成几何?

如何在Vue中导入和导出

如何在React中导入json文件

如何在 Coffeescript 中导入 js 文件?

如何不在主要js和存储中导入Vue

如何在 Kotlin/JS 中导入和使用异步 JS 函数?

如何在没有noImplicityAny和没有allowJs的情况下在TS中导入JS

如何在JS / React中导出和导入自定义帮助程序?

如何在 Ionic 4 中导入自定义 css 和 js

如何在JS中的另一个函数中导入和使用函数

如何在three.js中使用Three.Triangle()

如何在 Threejs 的主 JS 文件中导入 JS 文件

如何在渲染函数(React JS)中导出变量?

如何在 Angular 2+ 和 ES2015 模块中导入和使用 zone.js

我如何在angular2中导入@ types / three

如何在Python中导入odeint和arange?

如何在Aurelia中导入和使用RobinHerbots的Inputmask

如何在Angular中导入和使用字体?

如何在JSFiddle中导入核心元素和纸张元素

如何在Python脚本中导入和使用csvkit

如何在PHPStorm中导出和导入运行/调试配置?

如何在Jinja模板中导入和调用Python函数?

如何在rmarkdown块中导入和运行python文件?

如何在Python中导入Scipy和Numpy?

如何在vuejs项目中导入和使用luxon?

如何通过 Json 和 Power Query 在 Excel 中导入 .Net DateTime 和 TimeSpan

如何在JavaScript文件中导入json文件?

如何在 ubuntu 上的 mongodb 中导入 .json 文件?