前言
基于WebGL架构的3D可视化平台—平面图导航(一)中已经完成了iframe面板与我们的3D场景的简单交互,下面我们继续完善并给iframe页加上鼠标悬停事件让iframe页的img标签和我们场景中的obj一起动起来。
实现
第一步,还是使用之前的场景接着上次的继续,先编写iframe页。给每一个img标签都加上onmouseover、onmouseout 事件。
Document
function onClick(viewPoint,target){
window.parent.onClick(viewPoint,target);
}
function onMouseOver(targetObj,viewPoint){
window.parent.onMouseOver(targetObj,viewPoint);
}
function onMouseOut(targetObj){
window.parent.onMouseOut(targetObj);
}
function initViewPoint(){
window.parent.initViewPoint();
}
第二步,房间里的物体不要要让他“飞起来”,还要给他加一个“底座”。这里叫他SurveillanceCamera类,在自己编写类的时候一定要注意,想要当前类生效一定要继承THING.Thing,并且THING.factory.registerClass(‘ClassName’, ClassName);
class SurveillanceCamera extends THING.Thing {
constructor(app) {
super(app);
this.app = app;
this.isFrustum = true;
this.opacity = 1;
this.color = 0xff00ff;
this.vertices = [];
this.near = 0.1;
this.camera = null;
this.node = new THREE.Object3D();
this._frustum = new THREE.Frustum();
this._projScreenMatrix = new THREE.Matrix4();
}
setup(param) {
super.setup(param);
this.fov = param['fov'];
this.aspect = param['aspect'];
this.far = param['far'];
this.alpha = param['alpha'];
this.lineAlpha = param['lineAlpha'];
this.setupComplete(param);
}
setupComplete(param) {
super.setupComplete(param);
this.build();
}
build() {
if (this.node.children.length > 0) {
this.node.children = [];
}
if (this.camera != null) {
this.camera = null;
}
var h = this.far * Math.tan(this.fov * 0.5 * 0.017453293);
var w = this.aspect * h;
var geometry = new THREE.Geometry();
this.vertices = [new THREE.Vector3(0, 0, 0), new THREE.Vector3(w, -h, -this.far), new THREE.Vector3(w, h, -this.far), new THREE.Vector3(-w, h, -this.far), new THREE.Vector3(-w, -h, -this.far)];
var faces = [new THREE.Face3(0, 1, 2), new THREE.Face3(0, 2, 3), new THREE.Face3(0, 3, 4), new THREE.Face3(0, 4, 1), new THREE.Face3(3, 4, 1), new THREE.Face3(3, 1, 2)];
geometry.vertices = this.vertices;
var line_mat = new THREE.LineBasicMaterial({
color: "#b4f5f8",
opacity: this.lineAlpha || 0.5,
})
var texture = THREE.ImageUtils.loadTexture("images/light2.png");
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
var frustum_mat = new THREE.MeshBasicMaterial({
color: "#0aa5ff",
opacity: this.alpha || 0.5,
transparent: true,
side: THREE.DoubleSide,
});
var line_mesh = new THREE.Line(geometry, line_mat);
var frustum_mesh = new THREE.Mesh(geometry, frustum_mat);
geometry.faces = faces;
this.node.add(frustum_mesh, line_mesh);
this.camera = new THREE.PerspectiveCamera(this.fov, this.aspect, this.near, this.far);
this.camera.position.set(this.position[0], this.position[1], this.position[2]);
this.camera.rotation.copy(this.node.rotation);
this.camera.updateMatrixWorld(true);
this._updateFrustum();
}
setPosition() {
this.camera.position.set(this.position[0], this.position[1], this.position[2]);
this.camera.updateMatrixWorld(true);
this._updateFrustum();
}
_updateFrustum() {
if (this.camera) {
this._projScreenMatrix.multiplyMatrices(this.camera.projectionMatrix, this.camera.matrixWorldInverse);
this._frustum.setFromMatrix(this._projScreenMatrix);
}
}
intersectsObject(object) {
this._updateFrustum();
return this._frustum.intersectsObject(object);
}
intersectsBox(box) {
this._updateFrustum();
return this._frustum.intersectsBox(box);
}
intersectsSphere(sphere) {
this._updateFrustum();
return this._frustum.intersectsSphere(sphere);
}
intersectsSprite(sprite) {
this._updateFrustum();
return this._frustum.intersectsSprite(sprite);
}
}
THING.factory.registerClass('SurveillanceCamera', SurveillanceCamera);
第三步,鼠标悬浮事件和鼠标离开事件,这里我们使用了之前创建的SurveillanceCamera类为obj加上了一个“底座”。
//鼠标悬浮事件
function onMouseOver(targetObj,viewPoint) {
if (currentModule != null)
return;
overModule = app.query(targetObj)[0];
overModule.style.boundingBox = true;
overModule.moveTo({
"offset": [0, 6, 0],
"time": 80,
});
sCamera = app.create({
type: 'SurveillanceCamera',
name: 'SurveillanceCamera_',
position:app.query(viewPoint)[0].position,
fov: 65,
aspect: 1.3,
far: 6,
});
sCamera.angleX = 90;
sCamera.style.opacity = 0.1;
}
//鼠标离开事件
function onMouseOut(targetObj) {
if (currentModule != null)
return;
if (sCamera) {
sCamera.destroy();
sCamera = null;
}
outModule = overModule;
outModule.style.boundingBox = false;
outModule.stopMoving();
outModule.position = [0, 0, 0];
outModule = null;
演示地址:EXAMPLE
总结
利用iframe与ThingJS进行交互完成了平面图导航功能,通过自制的HTML界面,嵌入ThingJS的面板中,形成一个可自定义的导航界面,通过偏移实现相应的视觉效果。
制作一个视锥,达到投放影像的效果,这里运用面向对象的方式是为了,能够更快捷的创建视锥,起到复用的作用。
在制作过程中,将物体悬浮的过程时出现了问题,发现如果快速的操作鼠标,物体不会达到预期的视觉效果,例如,鼠标快速的在两个导航图之间切换时,对应的两个物体会不断的上升,尽管将上升与还原的速度加快,也依然无法解决问题。最后解决的办法是:新添加一个变量,将上一次悬浮的物体记录下来,就是文中的 outModule,通过对 outModule 单独操作来解决影响问题。