使用 geometry.vertices 和 geometry.faces 从 .obj 文件创建网格
Creating mesh from .obj file using geometry.vertices and geometry.faces
我正在尝试从.obj文件创建一个网格。我这样做而不是使用 obj 加载器,因为我使用不同的滑块变形形状,选择特定的面/顶点并在顶点之间绘制路径。
我目前在尝试渲染场景时遇到错误,这似乎与 obj 文件中的面孔有关。当我手动输入面时,我可以创建一个三角形没有问题。
这是我的代码
var camera, scene, renderer,
geometry, material, mesh;
init();
animate();
function init() {
var xhr = new XMLHttpRequest();
xhr.open('GET', '/img/originalMeanModel.obj', false);
xhr.send(null);
var text = xhr.responseText;
var lines = text.split("'n");
for (i=0; i<19343; i++){
lines[i] = lines[i].split(" ");
}
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 1, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.z = 20;
scene.add( camera );
var geometry = new THREE.Geometry()
/*
geometry.vertices.push( new THREE.Vector3( -0.01, 0.01, 0 ) );
geometry.vertices.push( new THREE.Vector3( -0.01, -0.01, 0 ) );
geometry.vertices.push( new THREE.Vector3( 0.01, -0.01, 0 ) );
*/
geometry.faces.push( new THREE.Face3( 0, 1, 2 ) );
for(i=0; i<6449; i++){
geometry.vertices.push(
new THREE.Vector3(
parseFloat(lines[i][1]),
parseFloat(lines[i][2]),
parseFloat(lines[i][3])) );
}
/*
geometry.faces.push( new THREE.Face3( 0, 1, 2 ) );
geometry.faces.push( new THREE.Face3( 600, 1, 3000 ) );
geometry.faces.push( new THREE.Face3( 3000, 6400, 70 ) );
*/
for(i=6449; i<19343; i++){
geometry.faces.push( new THREE.Face3( parseInt(lines[i][1]), parseInt(lines[i][2]), parseInt(lines[i][3]) ) );
}
console.log(geometry.faces);
console.log(geometry.vertices);
material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: false } );
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
renderer = new THREE.CanvasRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
}
function animate() {
// note: three.js includes requestAnimationFrame shim
requestAnimationFrame( animate );
render();
}
function render() {
renderer.render( scene, camera );
}
当我检查控制台时,面和顶点已按预期打印出来。我也打印了这个错误5700+次
Uncaught TypeError: Cannot read property 'visible' of undefined Three.js:71
projectScene Three.js:71
render Three.js:245
render threeDemo.php:115
animate threeDemo.php:106
threeDemo.php:106 是动画函数的这一行
render();
threeDemo.php:115 是渲染函数的这一行
renderer.render( scene, camera );
这是我尝试为其创建网格的obj文件的链接。 https://dl.dropbox.com/u/23384412/originalMeanModel.obj
有谁可以指出我正确的方向,将不胜感激。
提前谢谢。
您可以使用
两个OBJLoaders
来加载每个帧几何体。然后创建第三个Geometry
并使用帧几何中的顶点作为参考来创建线。
相关文章:
- 在下划线中使用_(obj).map(callback)和_.map(obj,callback)之间的区别
- Three.JS OBJ模型未显示
- ThreeJS访问加载的obj模型中的对象
- 无法在obj+mtl文件中加载纹理
- Php variable obj to js
- JSTree's data.rslt.obj.text()返回一个文本数组,而不是所需节点的文本
- 如何将Three.js场景中的几何体导出为已修改的OBJ
- 用Div内容创建obj
- Three.js:geometry.addEventListener不是函数
- Three.js.obj阴影不起作用
- 为什么无法根据谷歌地图地理编码geometry.bounds找到位置,但可以通过MongoDB中的geometry.vi
- 将.obj转换为.js文件
- TypeError: 使用 Jquery JSON 获取数据时无效的 'in' 操作数 obj
- 如何更改不是't〃;(obj)”;
- 作为语法的控制器没有将新的obj传递给数组
- TypeError Obj.root是未定义的ajax jquery
- Three.js透明对象和颜色更改(load.obj+.mtl)
- 灯箱:can't从iframe访问父javascript obj
- 测试变量存在性的Javascript多重赋值:var obj=obj||{}
- 使用 geometry.vertices 和 geometry.faces 从 .obj 文件创建网格