三.JS专家注意！需要帮助映射点和面答案

【问题标题】：Attention Three.JS experts! Need help mapping points and faces三.JS专家注意！需要帮助映射点和面
【发布时间】：2019-12-04 05:16:56
【问题描述】：

来自这个伟大社区的任何帮助都是一种祝福。我最近一直试图弄清楚如何使用 Three.js 绘制来自 XML 文件的一组点和面。这些点看起来像这样：

<P id="1">472227.25640192 2943287.51179465 200.138787</P>
<P id="2">472232.14363148 2943288.56768013 200.129142</P>
<P id="3">472237.03086105 2943289.62356560 200.119496</P>

脸是这样的：

<F>1021 1020 1061</F>
<F>640 754 641</F>
<F>1534 1633 1535</F>

请记住，这些面孔和点有数千个，每个点都有 3 个数字。我已将 xml 转换为 json 并完成了所需的所有解析，但是当我尝试在 Three.js 中将一些点作为线条进行示例时，除了黑屏之外什么也没有。这是我尝试过的。有没有像我试图用three.js做的事情？有更好的选择吗？

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, 500 );
camera.position.set( 0, 0, 100 );
camera.lookAt( 0, 0, 0 );

var scene = new THREE.Scene();

var material = new THREE.LineBasicMaterial( { color: 0x0000ff } );

var geometry = new THREE.Geometry();
geometry.vertices.push(new THREE.Vector3( 472227.25640192, 2943287.51179465, 200.138787) );
geometry.vertices.push(new THREE.Vector3( 472232.14363148, 2943288.56768013, 200.129142) );
geometry.vertices.push(new THREE.Vector3( 472237.03086105, 2943289.62356560, 200.119496) );

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

谢谢，感谢任何帮助。

【问题讨论】：

您的坐标将线放在视口之外。

标签： javascript xml web three.js 3d

【解决方案1】：

您定义的顶点将线放在视口之外。例如，将坐标更改为

geometry.vertices.push(new THREE.Vector3(1, 2, 0));
geometry.vertices.push(new THREE.Vector3(3, 3, 0));
geometry.vertices.push(new THREE.Vector3(5, 6, 0));

你会看到这条线。

-或-

如果您使用的值与示例中的值一样大，请将相机 waaaaaay 移回 z 轴。（您还可以将值缩放为更易于管理的值）

【讨论】：