个人中心
gpt4 book ai didi

javascript - ThreeJS无法加载Json文件

转载 作者：行者123 更新时间：2023-12-02 00:10:38 25 4
gpt4 key购买 nike

首先，我已经读过this question没有帮助

我是如何做的:首先我将模型从 C4D 导出到 .ojb。然后我将 obj 导入 www.trheejs/editor

我填满了所有的空白

enter image description here

然后从树中选择我的对象并将其导出到 Threejs 对象，它保存一个 .json 文件

我的代码

<script>
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
var kiss = new THREE.Object3D(), loader = new THREE.JSONLoader(true);
loader.load( "brikk2.json", function ( geometry, materials ) {
    var mesh = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial( { color: 0xff0000, ambient: 0xff0000 } ) );
    scene.add( mesh );
}); 
           var render = function () {
        requestAnimationFrame(render);
        renderer.render(scene, camera);
    };
    render();
</script>

当我运行时，我收到这些错误消息

THREE.WebGLRenderer 67                             three.js:20806
THREE.WebGLRenderer: elementindex as unsigned integer not supported.         three.js:26942
XHR finished loading: "http://xxxxxx.xx/tst/mrdoob-three2/brikk2.json".     three.js:12018
    THREE.JSONLoader.loadAjaxJSON                  three.js:12018
    THREE.JSONLoader.load                          three.js:11942
    load                                           test.html:23
     (anonymous function)                          test.html:28
 Uncaught TypeError: Cannot read property 'length' of undefined             three.js:12087
    parseModel                                                      three.js:12087
    THREE.JSONLoader.parse                                          three.js:12028
    xhr.onreadystatechange                                          three.js:11969

我加载的 Json

{
"metadata": {
    "version": 4.3,
    "type": "Object",
    "generator": "ObjectExporter"
},
"geometries": [
    {
        "uuid": "213E28EF-E388-46FE-AED3-54695667E086",
        "name": "brikkG",
        "type": "Geometry",
        "data": {
            "vertices": [0.036304,-0.016031,-0.027174,0.036304,0.......


      ........ 232,1228,1139,1141,1140,1]
        }
    }],
"materials": [
    {
        "uuid": "F74C77E4-8371-41BC-85CA-31FC96916CC6",
        "name": "lego",
        "type": "MeshPhongMaterial",
        "color": 16721408,
        "ambient": 16777215,
        "emissive": 0,
        "specular": 16777215,
        "shininess": 30,
        "opacity": 1,
        "transparent": false,
        "wireframe": false
    }],
"object": {
    "uuid": "3BAAB8CA-1EB7-464A-8C6D-FC4BBB3C63C6",
    "name": "BrikkM",
    "type": "Mesh",
    "geometry": "213E28EF-E388-46FE-AED3-54695667E086",
    "material": "F74C77E4-8371-41BC-85CA-31FC96916CC6",
    "matrix": [1000,0,0,0,0,1000,0,0,0,0,1000,0,0,0,0,1]
      }
     }

json文件的结构

enter image description here

基本上我已经尝试了所有我读过的关于将 native json导入ThreeJS的内容，我尝试了来自treejs/editor或clara.io的文件仍然有相同的错误消息，我不再知道了，我花了3天尝试了所有我阅读的方式来解决这个问题。

如果我尝试创建像 CubeGeometry 这样的几何图形，它会毫无问题地渲染，但是当我尝试使用 native json 时，就不再起作用了

有人可以帮忙吗？

最佳答案

好的，我在这里找到了答案:http://helloenjoy.com/2013/from-unity-to-three-js/

原生 json 代码是完美的，只是用 JSONLoader 加载而不是用 ObjectLoader 加载(不要像我的实验之一那样与 OBJLoader 不匹配)。 JSONLoader 的意思是加载 json，但具有不同的格式/结构。 ObjectLoader 的意思是加载 native 格式，该格式也是用 json 编写的，但具有 native 结构/格式。

所以使用

 var loader = new THREE.ObjectLoader();
            loader.load( 'brikk2.json', function ( object ) {

                        scene.add( object );

            } );

并且它正在工作

完整的示例代码

<body>
    <script src="build/three.min.js"></script>
    <script>
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

    var renderer = new THREE.WebGLRenderer();
    renderer.setClearColor( 0xffffff, 1);
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );

    var ambient = new THREE.AmbientLight( 0x101030 );
            scene.add( ambient );
            var directionalLight = new THREE.DirectionalLight( 0xffeedd );
            directionalLight.position.set( 0, 0, 1 );
            scene.add( directionalLight );
             var loader = new THREE.ObjectLoader();
            loader.load( 'brikk2.js', function ( object ) {
                        scene.add( object );
            } );
        camera.position.z = 5;
        var render = function () {
            requestAnimationFrame(render);
            renderer.render(scene, camera);
        };
        render();
    </script>
</body>

编辑

我在最重要的问题中显示的最上面的代码是正确的，但它是用于几何加载的

loader = new THREE.JSONLoader();
 loader.load( 'ugeometry.json', function ( geometry ) {
          mesh = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { envMap: THREE.ImageUtils.loadTexture( 'environment.jpg', new THREE.SphericalReflectionMapping() ), overdraw: 0.5 } ) );
   scene.add( mesh );

所以回顾一下。

如果从 Threes/editor 或 Clara.io 保存 GEOMETRY，则使用 JSONLoader，如果保存为 OBJECT，则使用 ObjectLoader，如果保存为 SCENE，则它们应该是 SceneLoader(未验证)

关于javascript - ThreeJS无法加载Json文件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23855693/

25 4 0
文章推荐： google-apps-script - 谷歌应用程序脚本: Trying to setFormula for Spreadsheet cell
文章推荐： perl - 引用数组和顺序
文章推荐： kendo-ui - 在过滤过程中显示弹出 View
文章推荐： hdfs - Flume HDFS接收器: Remove timestamp from filename
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com