在 Three.js 中渲染复杂模型答案

【问题标题】：Rendering Complicated Models in Three.js在 Three.js 中渲染复杂模型
【发布时间】：2020-03-29 12:40:21
【问题描述】：

如果某个摇滚明星能够真正快速地查看我的代码并告诉我为什么我无法渲染/查看我的 three.js 模型，我将永远欠你的债！我将发布整个脚本，但我认为一些初步信息很重要。基本上，我有成千上万的点看起来像这样：

472232.14363148 2943288.56768013 200.129142"
472237.03086105 2943289.62356560 200.119496"
472241.91809061 2943290.67945108 200.109851"
472246.80532018 2943291.73533656 200.100205"
...and so on...

还有一堆像这样的脸：

["1021 1020 1061", "640 754 641", "1534 1633 1535", "4701 27 26", "654 753 655", ...and so on...

当我提取所有数据并正确配置后，我将其推送到几何体并尝试将其添加到场景中，但没有成功。这是整个脚本：

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

    var camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
    camera.position.set( 0, 50, 50 );
    camera.lookAt( 0, 0, 0 );

    var scene = new THREE.Scene();

    var material = new THREE.MeshStandardMaterial( { color : 0x00cc00 } );

    var geometry = new THREE.Geometry();

    var points = bigData['LandXML']['Surfaces']['Surface']['Definition']['Pnts']['P']
    var faces = bigData['LandXML']['Surfaces']['Surface']['Definition']['Faces']['F']

  for(i=0;i<points.length;i++){
        var [point1,point2,point3] = points[i]['__text'].split(' ').map(Number)
        //point1 *= .00001
        //point2 *= .00001
        //point3 *= .00001
        geometry.vertices.push(new THREE.Vector3(point1,point2,point3))
    }

  for(i=0;i<faces.length;i++){
    console.log(faces[i]);
    var [face1,face2,face3] = faces[i].split(' ').map(Number)
    var face = new THREE.Face3(face1 - 1,face2 - 1, face3 - 1)
    geometry.faces.push(face)
  }

  scene.add( new THREE.Mesh( geometry, material ) );

您可以看到在 for 循环中的点，我将它们乘以 .00001 来缩放模型，因为否则数字会非常大，如果这有意义的话。我从每个面上减去 1，因为数据不是零索引的。无论如何，如果任何编码超级英雄花时间阅读本文并有一些见解，请帮助我！谢谢！

【问题讨论】：

组装几何体后，告诉它构建它的边界框 (geometry.computeBoundingBox();)。然后，检查框的角和中心的值 (geometry.boundingBox) 以确保您的相机甚至看在正确的位置。这不保证您的相机的近/远会捕捉到盒子里的东西。
@TheJim01 感谢您的意见，我很感激并会尝试一下。如果您想自己尝试，这里是该项目。再次，我真的很感谢你到目前为止的帮助。 s000.tinyupload.com/index.php?file_id=68384489612738199144
光在哪里？
@soju 我不知道我需要一个，你认为这有帮助吗？我以前从来没有用过三个.js 的灯...
你在哪里渲染你的场景？

标签： javascript html web three.js 3d

【解决方案1】：

所以，我在现场找到了你的模型，代码漏掉了那些部分：

您的模型坐标很大，但尺寸很小。分开后所有坐标 100.000 它的 boundingSphere 中心位于 (4.72; 29,432; 0,00192) 和 boundingSphere 半径 0,00480，所以你需要转换模型使其中心位于 (0;0;0) 或移动相机瞄准它的中心；
geometry.computeFaceNormals() 必须在构建面后调用为了使面部能够响应光照和阴影；
场景需要一些光线。在当前状态下它不会显示任何东西
需要在添加网格后进行渲染循环或至少一次调用。

这里是固定代码，另外我玩了相机距离并添加了简单的旋转动画。我还使用几何平移方法来进行适当的旋转：

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
    <meta charset="utf-8">
    <title>DXF Test</title>
</head>
<body>


<script src="three.min.js"></script>
<script type="text/javascript" src="JFM.js"></script>
<script>
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 2000);
    camera.position.set(0, 650, 650);
    camera.lookAt(0, 0, 0);

    var scene = new THREE.Scene();

    var material = new THREE.MeshStandardMaterial({color: 0x00cc00});

    var geometry = new THREE.Geometry();
    //geometry.vertices.push(new THREE.Vector3(4.72227256402, 29.4328751179, 0.00200138787));
    //geometry.vertices.push(new THREE.Vector3(3, 3, 0));
    //geometry.vertices.push(new THREE.Vector3(5, 6, 0));

    //var line = new THREE.Line( geometry, material );
    //scene.add( line );
    //renderer.render( scene, camera );

    var points = bigData['LandXML']['Surfaces']['Surface']['Definition']['Pnts']['P'];
    var faces = bigData['LandXML']['Surfaces']['Surface']['Definition']['Faces']['F'];

    console.log('Complete XML file');
    console.log(bigData);
    console.log('POINTS');
    console.log(points);
    console.log('FACES');
    console.log(faces);

    for (i = 0; i < points.length; i++) {
        var [point1, point2, point3] = points[i]['__text'].split(' ').map(Number);
        geometry.vertices.push(new THREE.Vector3(point1, point2, point3));
    }

    for (i = 0; i < faces.length; i++) {
        var [face1, face2, face3] = faces[i].split(' ').map(Number);
        var face = new THREE.Face3(face1 - 1, face3 - 1, face2 - 1);
        geometry.faces.push(face)
    }

    geometry.computeFaceNormals();
    geometry.computeBoundingSphere();
    // translate model so it's real center will be the same as mesh pivot
    geometry.translate(
        -geometry.boundingSphere.center.x,
        -geometry.boundingSphere.center.y,
        -geometry.boundingSphere.center.z
    );
    // compute bounding sphere again, because it was broken during translation
    geometry.computeBoundingSphere();

    var mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);

    var sunLight = new THREE.DirectionalLight(0xffffff);
    sunLight.position.set(200, 600, 1000);
    scene.add(sunLight);

    function animate() {
        requestAnimationFrame(animate);
        renderer.render(scene, camera);
        mesh.rotation.y += 0.01;
        mesh.rotation.x += 0.01;
    }

    animate();


</script>
</body>
</html>

如果你不喜欢翻译，你可以删除它，删除旋转并在computeBoundingSphere之后这样做：

camera.position.set(
          geometry.boundingSphere.center.x + geometry.boundingSphere.radius,
          geometry.boundingSphere.center.y + geometry.boundingSphere.radius,
          geometry.boundingSphere.center.z + geometry.boundingSphere.radius,
  );
  camera.lookAt(
          geometry.boundingSphere.center.x,
          geometry.boundingSphere.center.y,
          geometry.boundingSphere.center.z,
  );

希望它会有所帮助。

【讨论】：

这是一个更好的，在上传最后一个之前我没有意识到代码有多奇怪，这是项目，你可以自己复制它，非常感谢：s000.tinyupload.com/index.php?file_id=68384489612738199144
这里的人，我把它放在 github 上，以防你认为最后一个链接是粗略的。再次感谢。 github.com/charlespettis/xml2threejs
@CharlesPettis 我找到了解决方案，请阅读更新后的答案
我明天会先试试这个，但如果你试过了，它有效，那么谢谢你！！！我一直在为此绞尽脑汁，所以你就是那个男人。需要什么，给我发消息。