TypeError：顶点未定义 - Blender 的三个.js 导出器
Posted
技术标签:
【中文标题】TypeError：顶点未定义 - Blender 的三个.js 导出器【英文标题】：TypeError: vertices is undefined - three.js exporter for Blender 【发布时间】：2017-11-30 21:19:52 【问题描述】：加载由three.js r.86 附带的three.js exporter for Blender 生成的JSON 文件时出现问题。
设置完成没有问题。为了测试这个导出器，我打开了 Blender，并使用了 untitled Blender 文件，其中包含一个立方体：
在不做任何调整的情况下导出它，它会生成以下 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"
我已将 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>
使用上面的代码，我得到了从示例页面 ⇗ 中提取的绿色立方体，但是当到达 Load the JSON 部分 ⇗ 时，以下内容浏览器控制台显示错误：
类型错误：顶点未定义 三.js:33296.5
提到的错误行在parseModel( json, geometry ) 函数内。
在我看来，Blender 的 three.js 导出器在生成 JSON 文件时缺少一些东西。函数 parseModel() 期望生成的 JSON 文件中不存在 vertices 属性。
一个工作的 sn-p，对 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>关于正在发生的事情或我做错了什么的任何线索？
【问题讨论】：
【参考方案1】：尝试将 apply 修饰符中的类型更改为几何而不是 buffergeometry，看看是否有帮助。
【讨论】：
解决了vertices is undefined，但在JavaScript 代码上生成了一个新错误model.materials is undefined，我尝试访问索引0：mesh = new THREE.Mesh(model.geometry, model.materials[0]);。最后一个，我通过在导出设置上勾选“面材”来解决。我现在没有任何错误，但没有显示对象......另一个问题的主题。感谢您的帮助。
我通常选择所有的顶点、面、法线和 UV，也选择面材质。然后我通过 new THREE.Mesh(geometry, new THREE.MultiMaterial(materials)); 创建网格。这目前对我有用。如果有帮助，我可以发布一个有效的 json 文件吗？干杯。
我会按照您的指示试一试。谢谢。以上是关于TypeError：顶点未定义 - Blender 的三个.js 导出器的主要内容，如果未能解决你的问题，请参考以下文章