堆栈内存溢出
  简体   繁体   English

TypeError：顶点未定义-Blender的three.js导出器

[英]TypeError: vertices is undefined - three.js exporter for Blender

 原文  2017-06-27 17:48:01  1   1    javascript/ json/ three.js/ export/ blender

问题描述

Having a problem loading the JSON file produced by the three.js exporter for Blender , that comes with three.js r.86. 加载由three.js r.86附带的three.js导出器为Blender生成的JSON文件时遇到问题。

Setup done without issues. 设置完成，没有问题。 To test this exporter, I open Blender, and I use the untitled Blender file that contains a cube: 要测试此导出器，请打开Blender，然后使用包含多维数据集的无标题 Blender文件：

截图Blender v2.78

Exporting it without any adjustments, it produces the following JSON file: 无需任何调整即可导出它，它会生成以下JSON文件： 

{
    "metadata":{
        "generator":"io_three",
        "normal":36,
        "position":36,
        "version":3,
        "type":"BufferGeometry"
    },
    "data":{
        "index":{
            "array":[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35],
            "itemSize":1,
            "type":"Uint16Array"
        },
        "attributes":{
            "normal":{
                "array":[-7.10543e-15,-1,2.98023e-08,-7.10543e-15,-1,2.98023e-08,-7.10543e-15,-1,2.98023e-08,7.10543e-15,1,-2.98023e-08,7.10543e-15,1,-2.98023e-08,7.10543e-15,1,-2.98023e-08,1,-2.38419e-07,7.10543e-15,1,-2.38419e-07,7.10543e-15,1,-2.38419e-07,7.10543e-15,-5.96046e-08,-2.98023e-07,1,-5.96046e-08,-2.98023e-07,1,-5.96046e-08,-2.98023e-07,1,-1,-1.49012e-07,-2.38419e-07,-1,-1.49012e-07,-2.38419e-07,-1,-1.49012e-07,-2.38419e-07,2.38419e-07,1.78814e-07,-1,2.38419e-07,1.78814e-07,-1,2.38419e-07,1.78814e-07,-1,-1.77636e-15,-1,2.98023e-08,-1.77636e-15,-1,2.98023e-08,-1.77636e-15,-1,2.98023e-08,1.5099e-14,1,-2.98023e-08,1.5099e-14,1,-2.98023e-08,1.5099e-14,1,-2.98023e-08,1,3.27825e-07,5.66244e-07,1,3.27825e-07,5.66244e-07,1,3.27825e-07,5.66244e-07,-5.0664e-07,1.49012e-07,1,-5.0664e-07,1.49012e-07,1,-5.0664e-07,1.49012e-07,1,-1,-1.19209e-07,-2.08616e-07,-1,-1.19209e-07,-2.08616e-07,-1,-1.19209e-07,-2.08616e-07,2.38419e-07,1.78814e-07,-1,2.38419e-07,1.78814e-07,-1,2.38419e-07,1.78814e-07,-1],
                "itemSize":3,
                "type":"Float32Array"
            },
            "position":{
                "array":[1,-1,-1,-1,-1,1,-1,-1,-1,-1,1,-1,0.999999,1,1,1,1,-1,1,1,-1,1,-1,1,1,-1,-1,0.999999,1,1,-1,-1,1,1,-1,1,-1,-1,1,-1,1,-1,-1,-1,-1,1,-1,-1,-1,1,-1,1,1,-1,1,-1,-1,1,-1,1,-1,-1,1,-1,1,-1,-1,1,1,0.999999,1,1,1,1,-1,0.999999,1,1,1,-1,1,0.999999,1,1,-1,1,1,-1,-1,1,-1,-1,1,-1,1,1,-1,1,-1,1,-1,-1,-1,-1,-1,-1,1,-1],
                "itemSize":3,
                "type":"Float32Array"
            }
        }
    }
}

I have uploaded the JSON file to a server, and with a basic setup tried to load it into a scene: 我已将JSON文件上传到服务器，并通过基本设置尝试将其加载到场景中： 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>My first three.js app</title>
        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <style>
            body { margin: 0; }
            canvas { width: 100%; height: 100% }
        </style>
    </head>
    <body>
        <script src="assets/js/three.js"></script>
        <script>

            /* Scene
             */
            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 geometry = new THREE.BoxGeometry( 1, 1, 1 );
            var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
            var cube = new THREE.Mesh( geometry, material );
            scene.add( cube );

            camera.position.z = 5;

            cube.rotation.x = 2;
            cube.rotation.y = 2;

            renderer.render(scene, camera);

            /* Load the JSON
             */
            var loader = new THREE.JSONLoader();

            loader.load(

                'https://www.example.com/blender-cube.json',

                function ( geometry, materials ) {

                    var material = materials[ 0 ];
                    var object = new THREE.Mesh( geometry, material );

                    scene.add( object );

                }
            );
        </script>
    </body>
</html>

With above code, I get the green cube extracted from an example page ⇗ , but when reaching to the Load the JSON portion ⇗ , the following error is displayed on the browser console: 通过上面的代码，我得到了从示例页面extracted提取的绿色立方体，但是当到达“ Load the JSON部分⇗时 ，浏览器控制台上显示以下错误：

TypeError: vertices is undefined TypeError：顶点未定义
three.js:33296.5 three.js所：33296.5

The mentioned error line is inside the parseModel( json, geometry ) function. 提到的错误行在parseModel( json, geometry )函数内部。

Seems to me that the three.js exporter for Blender is missing something when generating the JSON file. 在我看来，Blender的three.js导出器在生成JSON文件时缺少某些内容。 The function parseModel() is expecting a vertices property not present on the generated JSON file. 函数parseModel()期望生成的JSON文件上不存在vertices属性。

A working snippet, with a little tweak to the Load the JSON portion, to have the JSON file in a JavaScript variable: 一个有效的代码段，对“ Load the JSON部分进行了一些调整，以将JSON文件包含在JavaScript变量中： 

 /* Scene */ 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 geometry = new THREE.BoxGeometry(1, 1, 1); var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); var cube = new THREE.Mesh(geometry, material); scene.add(cube); camera.position.z = 5; cube.rotation.x = 2; cube.rotation.y = 2; renderer.render(scene, camera); /* Load the JSON */ var loader = new THREE.JSONLoader(); var blenderCubeObject = { "metadata": { "generator": "io_three", "normal": 36, "position": 36, "version": 3, "type": "BufferGeometry" }, "data": { "index": { "array": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35], "itemSize": 1, "type": "Uint16Array" }, "attributes": { "normal": { "array": [-7.10543e-15, -1, 2.98023e-08, -7.10543e-15, -1, 2.98023e-08, -7.10543e-15, -1, 2.98023e-08, 7.10543e-15, 1, -2.98023e-08, 7.10543e-15, 1, -2.98023e-08, 7.10543e-15, 1, -2.98023e-08, 1, -2.38419e-07, 7.10543e-15, 1, -2.38419e-07, 7.10543e-15, 1, -2.38419e-07, 7.10543e-15, -5.96046e-08, -2.98023e-07, 1, -5.96046e-08, -2.98023e-07, 1, -5.96046e-08, -2.98023e-07, 1, -1, -1.49012e-07, -2.38419e-07, -1, -1.49012e-07, -2.38419e-07, -1, -1.49012e-07, -2.38419e-07, 2.38419e-07, 1.78814e-07, -1, 2.38419e-07, 1.78814e-07, -1, 2.38419e-07, 1.78814e-07, -1, -1.77636e-15, -1, 2.98023e-08, -1.77636e-15, -1, 2.98023e-08, -1.77636e-15, -1, 2.98023e-08, 1.5099e-14, 1, -2.98023e-08, 1.5099e-14, 1, -2.98023e-08, 1.5099e-14, 1, -2.98023e-08, 1, 3.27825e-07, 5.66244e-07, 1, 3.27825e-07, 5.66244e-07, 1, 3.27825e-07, 5.66244e-07, -5.0664e-07, 1.49012e-07, 1, -5.0664e-07, 1.49012e-07, 1, -5.0664e-07, 1.49012e-07, 1, -1, -1.19209e-07, -2.08616e-07, -1, -1.19209e-07, -2.08616e-07, -1, -1.19209e-07, -2.08616e-07, 2.38419e-07, 1.78814e-07, -1, 2.38419e-07, 1.78814e-07, -1, 2.38419e-07, 1.78814e-07, -1], "itemSize": 3, "type": "Float32Array" }, "position": { "array": [1, -1, -1, -1, -1, 1, -1, -1, -1, -1, 1, -1, 0.999999, 1, 1, 1, 1, -1, 1, 1, -1, 1, -1, 1, 1, -1, -1, 0.999999, 1, 1, -1, -1, 1, 1, -1, 1, -1, -1, 1, -1, 1, -1, -1, -1, -1, 1, -1, -1, -1, 1, -1, 1, 1, -1, 1, -1, -1, 1, -1, 1, -1, -1, 1, -1, 1, -1, -1, 1, 1, 0.999999, 1, 1, 1, 1, -1, 0.999999, 1, 1, 1, -1, 1, 0.999999, 1, 1, -1, 1, 1, -1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, -1, 1, -1, -1, -1, -1, -1, -1, 1, -1], "itemSize": 3, "type": "Float32Array" } } } }; var model = loader.parse(blenderCubeObject); mesh = new THREE.Mesh(model.geometry, model.materials[0]); scene.add(mesh); 
 body { margin: 0; } canvas { width: 100%; height: 100% } 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/86/three.js"></script>

Any clue to what is happening or what I'm doing wrong ? 任何提示正在发生或我做错了什么？

1 个解决方案

解决方案1
 2 已采纳  2017-06-27 22:27:55

尝试将apply修改器中的类型更改为几何，而不是buffergeometry，看看是否有帮助。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 Blender three.js导出器打破了现场 - Blender three.js exporter breaks scene 使用Three.js（JSON）导出器在Three.js中加载Blender Animation - Load a Blender Animation in Three.js using the Three.js (JSON) exporter Three.js导入Blender模型。 未捕获的TypeError：无法读取未定义的属性“ x” - Three.js importing Blender Model. Uncaught TypeError: Cannot read property 'x' of undefined 未捕获（承诺）TypeError：无法读取 three.js 顶点的未定义属性（读取“长度”） - Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'length') for vertices of three.js THREE.js TypeError：Firefox中未定义“ global” - THREE.js TypeError: 'global' is undefined in Firefox Three.js - 未捕获TypeError：undefined不是函数 - Three.js - Uncaught TypeError: undefined is not a function Three.js geometry.vertices 的属性长度未定义 - Three.js property length of geometry.vertices is undefined Three.js-几何顶点 - Three.js - Geometry vertices THREE.js网格顶点 - THREE.js Mesh Vertices 导出的场景/网格中没有顶点属性（Blender到Babylon.js导出器） - No vertices property in exported scene / mesh ( Blender to Babylon.js exporter )
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM