Three.js加载显示PCD文件的一次难忘Bug

某三维项目需要在Web页面上同时展示两个三维点云数据，点云格式为.pcd格式，参照通用的做法，主要设置以下三部分代码：

一、html的模型显示区：

<div class="centerBlank">
	<div class="up" style="position:relative;">
	<!--左上侧区域 -->
	<div class="left" >
	</div>
				
	<!--右上侧区域 -->
	<!--显示txt区 -->
	<div class="right" id="txtDisplayDiv" style="position:absolute; left:625px; top:0px; width:600px;height:600px;z-index:0;background-color:#FFED97;">
	</div>
	</div>
	<div class="down" style="position:relative;">
	<!--左下侧区域 -->
	<!--显示pcd模型区 -->
	<div class="left" id="pcdDisplayDiv" style="position:absolute; left:5px; top:10px; width:600px;height:600px;z-index:0;background-color:#FFED97;">
	</div>
	<!--右下侧区域 -->
	<div class="right">
					
	</div>
	</div>
</div>

上面的代码将整个Body区域分成了左上半区、右上半区、左下半区、右下半区四个部分，其中右上部分的txtDisplayDiv和左下部分的pcdDisplayDiv是要展示模型的区域。

二、采用Three.js加载模型代码

function PCDViewer(pcdPath, elementID_PCD) {
	var elem = document.getElementById(elementID_PCD)
	var camera = new THREE.PerspectiveCamera(70, elem.clientWidth/elem.clientHeight, 0.1, 50000);
	var renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
	renderer.setClearColor(new THREE.Color(0x87CEEB))
	renderer.setSize(elem.clientWidth, elem.clientHeight);
	elem.appendChild(renderer.domElement);
			
	var scene = new THREE.Scene();
	scene.add(new THREE.HemisphereLight(0xffffff, 1.5));
			
	var loader = new THREE.PCDLoader();
	loader.load(pcdPath, function ( points ) {
		points.material.size = 0.5;
		scene.add( points );

		var middle = new THREE.Vector3();
		points.geometry.computeBoundingBox();
		points.geometry.boundingBox.getCenter(middle);
		console.log(middle)
		points.applyMatrix(new THREE.Matrix4().makeTranslation(-middle.x, -middle.y, -middle.z ));
			
		var largestDimension = Math.max(points.geometry.boundingBox.max.x,
			    points.geometry.boundingBox.max.y, 
			    points.geometry.boundingBox.max.z);
		camera.position.z = largestDimension * 1.2;
				
		var animate = function () {
			renderer.render(scene, camera);
			requestAnimationFrame(animate);
		}; 
				
		animate();
	});
};

上面的代码使用了PCDLoader()来加载并显示pcd模型

三、命令调用模块

//以下是测试按钮
function myFunction() {
	PCDViewer("140JYWX.pcd", "txtDisplayDiv");//右上能够显示
	PCDViewer("‪140JYWX.pcd", "pcdDisplayDiv");//左下无法显示
};

正如代码里写的注释所言，奇怪的事请发生了，点击按钮之后，右上侧能够加载并显示模型，但是左下侧怎么也显示不出来。

显示效果如图：

这个问题困扰了我整整一天，没有解决，为什么同样的代码，调用起来一个成功，一个确是失败呢？

浏览器的报错如下，浏览器的意思是找不到这个资源，但是我在浏览器中手动输入140JYWX.pcd这个文件，是能够正常访问的。

问题到底出在了哪里，我百思而不得。

最后，感谢一位朋友解决了我的问题，他告诉我

    PCDViewer("140JYWX.pcd", "txtDisplayDiv");
    PCDViewer("‪140JYWX.pcd", "pcdDisplayDiv");

这两行代码虽然看起来完全一样，但是实际编码是不一样的，这从浏览器的报错能够看出来，名字前面是乱码，这是不正常的。天啊，一语惊醒了我，原来，我以为浏览器报错%E2%80%AA140JYWX.pcd，其中的“%E2%80%AA”是浏览器为了加密所自动加上的……

最后这位朋友还给我看了一下tortoisegit的界面

能明显看的出来，更改后的代码，看上去和更改之前一模一样，但是软件的火眼金睛还是能够看出区别来的！

最后，改过了Bug，程序正常显示：

谨以此文纪念我为这个Bug付出的焦虑的一天，以及感谢朋友JZY。