Javascript 使用three.js测量STL文件点之间的距离

我试图让用户点击两个不同的点，并获得它们之间的距离

咔哒声似乎是在随机位置发生的，因此计算是错误的

当使用OBJ加载器并且我们使用OBJ文件时，计算是正确的，但是如果我使用STL加载器使用STL文件，它只会显示不正确

代码笔链接：

JS代码：

<script type="text/javascript" src="https://dl.dropboxusercontent.com/s/qooungyrgltucai/three.js"></script>
<script type="text/javascript" src="https://dl.dropboxusercontent.com/s/ddt89ncslm4o7ie/Detector.js"></script>
<script type="text/javascript" src="https://dl.dropboxusercontent.com/s/mrhumrr2bxwt9nt/OBJLoader.js"></script>
<script type="text/javascript" src="https://dl.dropboxusercontent.com/s/n5sjyymajykna51/TGALoader.js"></script>
<script type="text/javascript" src="https://dl.dropboxusercontent.com/s/y4r5bmq2037jacg/OrbitControls.js"></script>
<script type="text/javascript" src="https://dl.dropboxusercontent.com/s/h18h48v52739df4/STLLoader.js"></script>
<script>
var container;
var camera, controls, scene, renderer, model;

init();
animate();

function init() {
    container = document.createElement('div');
    document.body.appendChild(container);

    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.z = 5;

    controls = new THREE.OrbitControls(camera);

    // scene
    scene = new THREE.Scene();

    var ambient = new THREE.AmbientLight(0x404040); //0x101030
    scene.add(ambient);

    var directionalLight = new THREE.DirectionalLight(0xffffff);
    directionalLight.position.set(1, 1, 1).normalize();
    scene.add(directionalLight);

    // Loading manager
    var manager = new THREE.LoadingManager();
    manager.onProgress = function (item, loaded, total) {
        console.log(item, loaded, total);
    };

    var onProgress = function (xhr) {
        if (xhr.lengthComputable) {
            var percentComplete = xhr.loaded / xhr.total * 100;
            console.log(Math.round(percentComplete, 2) + '% downloaded');
        }
    };

    var onError = function (xhr) {
        console.log('Error: ' + xhr);
    };

    // Model
    //model = new THREE.Object3D();
    //scene.add(model);

    var material = new THREE.MeshPhongMaterial({
        color: 0xffffff,
        needsUpdate: true
    });

    window.model ='';



    // Added an if else here, STL code:

    var loader = new THREE.STLLoader();
                loader.load( 'https://dl.dropboxusercontent.com/s/t57h7xketafodui/5a9b75e521aaf-DI_PIPE_FBG_holder.stl', function ( geometry ) {

                    var material = new THREE.MeshPhongMaterial( { color: 0xff5533, specular: 0x111111, shininess: 200 } );
                    var mesh = new THREE.Mesh( geometry, material );

                    mesh.position.set( 0, - 0.25, 0.6 );
                    mesh.rotation.set( 0, - Math.PI / 2, 0 );
                    mesh.scale.set( 0.05, 0.05, 0.05 );

                    mesh.castShadow = true;
                    mesh.receiveShadow = true;

                    scene.add( mesh );

                window.model = scene;

                } ); 



    // This OBJ Loader will load if user requests an OBJ file. 
        var loader = new THREE.OBJLoader(manager);
    var object = loader.load('https://dl.dropboxusercontent.com/s/pn3yw6w5962o5r8/BIGIPIGI.obj', function (Object) {

        Object.castShadow = true;
        Object.position.x = 0;
        Object.position.y = -1;
        Object.position.z = 0;

        Object.traverse(function (child) {
            if (child instanceof THREE.Mesh) {
                child.material = material;
            }
        });
        console.log(Object);
                window.model = Object;
        scene.add(Object);
    }, onProgress, onError);
        // Object

    renderer = new THREE.WebGLRenderer();
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    container.appendChild(renderer.domElement);

    document.addEventListener('mousedown', onDocumentMouseDown, false);
    window.addEventListener('resize', onWindowResize, false);
}

function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    renderer.setSize(window.innerWidth, window.innerHeight);
}

// Measurement Code

var pointA = new THREE.Vector3( 0, 1, 0 );
var pointB = new THREE.Vector3();

var markerA = new THREE.Mesh( new THREE.SphereGeometry( 0.1, 16, 16 ), new THREE.MeshBasicMaterial( { color: 0xFF5555, depthTest: false, depthWrite: false } ) );
var markerB = markerA.clone();
scene.add( markerA );
scene.add( markerB );

var line;

function getIntersections( event ) {
  var vector = new THREE.Vector2();

  vector.set(
    ( event.clientX / window.innerWidth ) * 2 - 1,
    - ( event.clientY / window.innerHeight ) * 2 + 1 );

  var raycaster = new THREE.Raycaster();
  raycaster.setFromCamera( vector, camera );    

  var intersects = raycaster.intersectObjects( window.model.children );

  return intersects;

}

function getLine( vectorA, vectorB ) {

  var geometry = new THREE.Geometry();
  geometry.vertices.push( vectorA );
  geometry.vertices.push( vectorB );
  var material = new THREE.LineBasicMaterial({
    color: 0xFFFF00,
    depthWrite: false,
    depthTest: false
  });
  line = new THREE.Line( geometry, material );
  return line;

}

function onDocumentMouseDown( event ) {

  var intersects = getIntersections( event );

  if( intersects.length > 0 ){

    if ( ! pointB.equals( pointA ) ) {
      pointB = intersects[ 0 ].point;
    } else {
      pointB = pointA;
    }
    pointA = intersects[ 0 ].point;
    markerA.position.copy( pointA );
    markerB.position.copy( pointB );

    var distance = pointA.distanceTo( pointB );

    if ( line instanceof THREE.Line ) {
      scene.remove( line );
    }
    if ( distance > 0 ) {
      console.log( "distance", distance );
      alert( "distance: "+distance );
            line = getLine( pointA, pointB );
      scene.add(line);
    }

  }

}

function animate() {
    requestAnimationFrame(animate);
    render();
}

function render() {
    renderer.render(scene, camera);
}</script>

var容器；
摄像机、控件、场景、渲染器、模型；
init（）；
制作动画（）；
函数init（）{
container=document.createElement（'div'）；
文件.正文.附件（容器）；
摄像头=新的三个透视摄像头（75，window.innerWidth/window.innerHeight，0.11000）；
摄像机位置z=5；
控制装置=新的三个控制装置（摄像机）；
//场面
场景=新的三个。场景（）；
var AmbientLight=new-THREE.AmbientLight（0x404040）；//0x101030
场景。添加（环境光）；
var方向灯=新的三个方向灯（0xffffff）；
directionalLight.position.set（1,1,1）.normalize（）；
场景。添加（方向光）；
//加载管理器
var-manager=new-THREE.LoadingManager（）；
manager.onProgress=功能（项目、已加载、总计）{
控制台日志（项目、已加载、总计）；
};
var onProgress=函数（xhr）{
if（xhr.长度可计算）{
var percentComplete=xhr.loaded/xhr.total*100；
log（Math.round（完成百分比，2）+'%download'）；
}
};
var onError=函数（xhr）{
log（'Error:'+xhr）；
};
//模型
//model=new THREE.Object3D（）；
//场景。添加（模型）；
var材质=新的3.0网格材质({
颜色：0xffffff，
needsUpdate:对
});
window.model=''；
//在此处添加了if-else，STL代码：
var loader=new THREE.STLLoader（）；
loader.load（'https://dl.dropboxusercontent.com/s/t57h7xketafodui/5a9b75e521aaf-DI_PIPE_FBG_holder.stl，函数（几何）{
var material=新的三点网格材质（{颜色：0xff5533，镜面反射：0x111111，光泽度：200}）；
var mesh=新的三个网格（几何体、材质）；
网格位置设置（0，-0.25,0.6）；
mesh.rotation.set（0，-Math.PI/2，0）；
网目刻度设置（0.05,0.05,0.05）；
mesh.castShadow=true；
mesh.receiveShadow=true；
场景。添加（网格）；
window.model=场景；
} ); 
//如果用户请求OBJ文件，将加载此OBJ加载程序。
var装入器=新的三个。对象装入器（管理器）；
var object=loader.load（'https://dl.dropboxusercontent.com/s/pn3yw6w5962o5r8/BIGIPIGI.obj，函数（对象）{
Object.castShadow=true；
Object.position.x=0；
Object.position.y=-1；
Object.position.z=0；
遍历（函数（子对象）{
if（三个.Mesh的子实例）{
child.material=material；
}
});
console.log（对象）；
window.model=对象；
场景。添加（对象）；
}，onProgress，onError）；
//反对
renderer=new THREE.WebGLRenderer（）；
renderer.setPixelRatio（window.devicePixelRatio）；
renderer.setSize（window.innerWidth、window.innerHeight）；
container.appendChild（renderer.domeElement）；
文件。添加的文件列表（“mousedown”，onDocumentMouseDown，false）；
addEventListener（'resize'，onWindowResize，false）；
}
函数onWindowResize（）{
camera.aspect=window.innerWidth/window.innerHeight；
camera.updateProjectMatrix（）；
renderer.setSize（window.innerWidth、window.innerHeight）；
}
//测量代码
var pointA=新的三个向量3（0,1,0）；
var pointB=new THREE.Vector3（）；
var markerA=新的三点网格（新的三点球面测量法（0.1,16,16），新的三点网格基本材质（{color:0xFF5555，depthTest:false，depthWrite:false}）；
var markerB=markerA.clone（）；
场景。添加（markerA）；
场景。添加（markerB）；
var线；
函数（事件）{
var vector=new THREE.Vector2（）；
向量集(
（event.clientX/window.innerWidth）*2-1，
-（event.clientY/window.innerHeight）*2+1）；
var raycaster=new THREE.raycaster（）；
raycaster.setFromCamera（矢量，摄像机）；
var intersects=raycaster.intersectObjects（window.model.children）；
返回交叉点；
}
函数getLine（vectorA，vectorB）{
var geometry=new THREE.geometry（）；
几何。顶点。推（矢量）；
几何。顶点。推（矢量b）；
var材料=新的三线基本材料({
颜色：0xFFFF00，
depthWrite:false，
深度测试：错误
});
直线=新的三条直线（几何、材料）；
回流线；
}
函数onDocumentMouseDown（事件）{
var intersects=getcrossions（事件）；
如果（相交长度>0）{
如果（！pointB.等于（pointA））{
pointB=与[0]相交。点；
}否则{
点B=点A；
}
pointA=与[0]相交。点；
markerA.position.copy（pointA）；
标记B位置复制（点B）；
变量距离=点A.距离到（点B）；
if（三行中的行实例）{
场景。删除（行）；
}
如果（距离>0）{
控制台日志（“距离”，距离）；
警报（“距离：+距离）；
line=getLine（点A、点B）；
场景。添加（行）；
}
}
}
函数animate（）{
请求动画帧（动画）；
render（）；
}
函数render（）{
渲染器。渲染（场景、摄影机）；
}

尝试在CSS部分添加：

body{
  overflow: hidden;
  margin: 0;
}

---

出于好奇，是什么让你认为结果不正确？不正确的标准是什么？有机会看到OBJ和STL模型之间的比较结果吗？我有上面的codepen链接，它允许您访问页面并查看正在加载的STL文件。点击不到正确的位置。试着点击一个c