某三维项目需要在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。