|
@@ -2,397 +2,459 @@ var MathLight = {};
|
|
|
MathLight.RADIANS_PER_DEGREE = Math.PI / 180;
|
|
|
MathLight.DEGREES_PER_RADIAN = 180 / Math.PI;
|
|
|
|
|
|
-window.initOverlay = function(THREE) {
|
|
|
- var _planeGeometry = new THREE.PlaneGeometry(
|
|
|
- settings.overlay.width,
|
|
|
- settings.overlay.height,
|
|
|
- 1,
|
|
|
- 1
|
|
|
- );
|
|
|
- var _boxGeometry = new THREE.BoxBufferGeometry(
|
|
|
- settings.overlay.width,
|
|
|
- settings.overlay.height,
|
|
|
- settings.overlay.depth
|
|
|
- );
|
|
|
- //ie的mesh 加了polygonOffset也是会重叠。所以去掉前面的face: (但是突然ie又播放不了videoTexture)
|
|
|
- var newIndex = [..._boxGeometry.index.array];
|
|
|
- newIndex.splice(4 * 6, 6);
|
|
|
- _boxGeometry.setIndex(
|
|
|
- new THREE.BufferAttribute(new Uint16Array(newIndex), 1)
|
|
|
- );
|
|
|
-
|
|
|
- var _boxMat = new THREE.MeshBasicMaterial({
|
|
|
- //MeshStandardMaterial
|
|
|
- color: "#eeeeee",
|
|
|
- transparent: !0,
|
|
|
- opacity: 0.8,
|
|
|
- });
|
|
|
-
|
|
|
- var overlayGroup = new THREE.Object3D();
|
|
|
- player.model.add(overlayGroup);
|
|
|
- overlayGroup.name = "overlayGroup";
|
|
|
- player.overlayGroup = overlayGroup;
|
|
|
-
|
|
|
- var Overlay = function(info) {
|
|
|
- THREE.Object3D.call(this);
|
|
|
- this.sid = info.sid;
|
|
|
- if (info.media) this.preDeal(info);
|
|
|
- this.build(info);
|
|
|
- this.name = "overlay_" + this.sid;
|
|
|
- };
|
|
|
- Overlay.prototype = Object.create(THREE.Object3D.prototype);
|
|
|
-
|
|
|
- Overlay.prototype.build = function(info) {
|
|
|
- var plane = new THREE.Mesh(
|
|
|
- _planeGeometry,
|
|
|
- new THREE.MeshBasicMaterial({
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+var initOverlay = function(THREE) {
|
|
|
+ var _planeGeometry = new THREE.PlaneGeometry(settings.overlay.width,settings.overlay.height,1,1)
|
|
|
+ var _boxGeometry = new THREE.BoxBufferGeometry(settings.overlay.width,settings.overlay.height,settings.overlay.depth)
|
|
|
+ //ie的mesh 加了polygonOffset也是会重叠。所以去掉前面的face: (但是突然ie又播放不了videoTexture)
|
|
|
+ var newIndex = [..._boxGeometry.index.array]
|
|
|
+ newIndex.splice(4 * 6, 6)
|
|
|
+ _boxGeometry.setIndex(new THREE.BufferAttribute(new Uint16Array(newIndex),1))
|
|
|
+
|
|
|
+ var _boxMat = new THREE.MeshBasicMaterial({
|
|
|
//MeshStandardMaterial
|
|
|
- color: "#00c8af",
|
|
|
- opacity: 0.4,
|
|
|
+ color: "#eeeeee",
|
|
|
transparent: !0,
|
|
|
- polygonOffset: true,
|
|
|
- //是否开启多边形偏移 //ie不开启时blank也不会闪烁
|
|
|
- polygonOffsetFactor: -0.9,
|
|
|
- //多边形偏移因子
|
|
|
- polygonOffsetUnits: -4.0,
|
|
|
- //多边形偏移单位
|
|
|
- })
|
|
|
- );
|
|
|
- plane.renderOrder = 3;
|
|
|
- this.add(plane);
|
|
|
- this.plane = plane;
|
|
|
- if (info.hasBox) {
|
|
|
- this.addBox(true);
|
|
|
+ opacity: 0.8
|
|
|
+ })
|
|
|
+
|
|
|
+ var overlayGroup = new THREE.Object3D;
|
|
|
+ player.model.add(overlayGroup);
|
|
|
+ overlayGroup.name = "overlayGroup"
|
|
|
+ player.overlayGroup = overlayGroup;
|
|
|
+
|
|
|
+ var Overlay = function(info) {
|
|
|
+ THREE.Object3D.call(this);
|
|
|
+ this.sid = info.sid;
|
|
|
+ if (info.media)
|
|
|
+ this.preDeal(info)
|
|
|
+ this.build(info);
|
|
|
+ this.name = "overlay_" + this.sid;
|
|
|
}
|
|
|
- overlayGroup.add(this);
|
|
|
-
|
|
|
- if (info.media) {
|
|
|
- if (info.media.includes("video")) {
|
|
|
- //var id = "video"+ this.sid id="${ id }"
|
|
|
- var video = $(
|
|
|
- `<video controls="controls" loop autoplay x5-playsinline="" webkit-playsinline="true" playsinline="true" controlslist="nodownload"></video>`
|
|
|
- )[0];
|
|
|
-
|
|
|
- video.setAttribute("crossOrigin", "Anonymous");
|
|
|
- //要在src设置好前解决跨域
|
|
|
- $(video).on("contextmenu", function() {
|
|
|
- return false;
|
|
|
- });
|
|
|
- //禁止右键点击出
|
|
|
-
|
|
|
- video.src = manage.dealURL(info.file);
|
|
|
- info.media = video;
|
|
|
- info.type = "video";
|
|
|
+ Overlay.prototype = Object.create(THREE.Object3D.prototype);
|
|
|
+
|
|
|
+ Overlay.prototype.build = function(info) {
|
|
|
+
|
|
|
+ var plane = new THREE.Mesh(_planeGeometry,new THREE.MeshBasicMaterial({
|
|
|
+ //MeshStandardMaterial
|
|
|
+ color: "#00c8af",
|
|
|
+ opacity: 0.4,
|
|
|
+ transparent: !0,
|
|
|
+ polygonOffset: true,
|
|
|
+ //是否开启多边形偏移 //ie不开启时blank也不会闪烁
|
|
|
+ polygonOffsetFactor: -0.9,
|
|
|
+ //多边形偏移因子
|
|
|
+ polygonOffsetUnits: -4.0,
|
|
|
+ //多边形偏移单位
|
|
|
+ }))
|
|
|
+ plane.renderOrder = 3
|
|
|
+ this.add(plane);
|
|
|
+ this.plane = plane;
|
|
|
+ if (info.hasBox) {
|
|
|
+ this.addBox(true)
|
|
|
+ }
|
|
|
+ overlayGroup.add(this);
|
|
|
|
|
|
- /* video.addEventListener('loadeddata', ()=>{
|
|
|
+ if (info.media) {
|
|
|
+ if (info.media.includes('video')) {
|
|
|
+ //var id = "video"+ this.sid id="${ id }"
|
|
|
+ var video = $(`<video controls="controls" loop autoplay x5-playsinline="" webkit-playsinline="true" playsinline="true" controlslist="nodownload"></video>`)[0]
|
|
|
+
|
|
|
+ video.setAttribute("crossOrigin", 'Anonymous')
|
|
|
+ //要在src设置好前解决跨域
|
|
|
+ $(video).on('contextmenu', function() {
|
|
|
+ return false;
|
|
|
+ });
|
|
|
+ //禁止右键点击出
|
|
|
+
|
|
|
+ video.src = manage.dealURL(info.file);
|
|
|
+ info.media = video;
|
|
|
+ info.type = "video"
|
|
|
+
|
|
|
+ /* video.addEventListener('loadeddata', ()=>{
|
|
|
console.log(this.sid + " loaded!!!")
|
|
|
}) */
|
|
|
- video.volume = 0;
|
|
|
- video.muted = true;
|
|
|
- plane.material.opacity = 1;
|
|
|
- } else if (info.media.includes("photo")) {
|
|
|
- /* var img = new Image();
|
|
|
+
|
|
|
+ video.oncanplaythrough = function() {
|
|
|
+ plane.material.map.needsUpdate = !0
|
|
|
+ if(video.shouldPlay){
|
|
|
+ video.play()
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ video.volume = 0
|
|
|
+ video.muted = true
|
|
|
+ plane.material.opacity = 1;
|
|
|
+ } else if (info.media.includes('photo')) {
|
|
|
+ /* var img = new Image();
|
|
|
|
|
|
img.src = manage.dealURL(info.file) //"https://4dkk.4dage.com/images/images"+Config.projectNum+"/overlay"+this.sid+".jpg?m="+new Date().getTime()
|
|
|
info.media = img
|
|
|
*/
|
|
|
|
|
|
- info.type = "photo";
|
|
|
- plane.material.opacity = 0.1;
|
|
|
- }
|
|
|
+ info.type = "photo"
|
|
|
+ plane.material.opacity = 0.1;
|
|
|
+
|
|
|
+ /* this.animateInfo = {
|
|
|
+ cellXcount : 4,
|
|
|
+ cellYcount : 2,
|
|
|
+ loop : true,
|
|
|
+ duration : 1000
|
|
|
+ }
|
|
|
+ */
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ plane.material.color = new THREE.Color(1,1,1)
|
|
|
+ }
|
|
|
+ if (info.width == void 0)
|
|
|
+ info.width = settings.overlay.width;
|
|
|
+ if (info.height == void 0)
|
|
|
+ info.height = settings.overlay.height;
|
|
|
+ this.setFromInfo(info)
|
|
|
+ this.fileSrc = info.file
|
|
|
|
|
|
- plane.material.color = new THREE.Color(1, 1, 1);
|
|
|
}
|
|
|
- if (info.width == void 0) info.width = settings.overlay.width;
|
|
|
- if (info.height == void 0) info.height = settings.overlay.height;
|
|
|
- this.setFromInfo(info);
|
|
|
- this.fileSrc = info.file;
|
|
|
- };
|
|
|
-
|
|
|
- Overlay.prototype.setFromInfo = function(info) {
|
|
|
- //1 恢复到编辑之前 2 初始加载
|
|
|
- var plane = this.plane;
|
|
|
- this.transformAtPanos = info.transformAtPanos || {};
|
|
|
- //在每个漫游点独立设置的position。
|
|
|
- //var curPanoTransform = player.currentPano && this.transformAtPanos[player.currentPano.id] || {}
|
|
|
- var curPanoTransform = this.transformAtPanos[this.getTransformSid()] || {};
|
|
|
-
|
|
|
- info.depth && this.scale.setZ(info.depth / settings.overlay.depth);
|
|
|
-
|
|
|
- this.posCustom = info.pos ? info.pos.clone() : this.position.clone();
|
|
|
- //没有单独设置position的漫游点使用的position
|
|
|
- this.position.copy(curPanoTransform.pos || this.posCustom);
|
|
|
-
|
|
|
- this.quaCustom = info.qua ? info.qua.clone() : this.quaternion.clone();
|
|
|
- this.quaternion.copy(curPanoTransform.qua || this.quaCustom);
|
|
|
-
|
|
|
- this.widthCustom = info.width;
|
|
|
- this.heightCustom = info.height;
|
|
|
- this.width = curPanoTransform.width || this.widthCustom;
|
|
|
- this.height = curPanoTransform.height || this.heightCustom;
|
|
|
- var a = this.getScaleBySize(this.width, this.height);
|
|
|
- this.scale.setX(a.x);
|
|
|
- this.scale.setY(a.y);
|
|
|
-
|
|
|
- if (info.type) {
|
|
|
- if (!plane.material.map) {
|
|
|
- if (info.type == "video") {
|
|
|
- plane.material.map = new THREE.VideoTexture(info.media);
|
|
|
- this.hasRequestLoad = true;
|
|
|
-
|
|
|
- plane.material.map.wrapS = plane.material.map.wrapT =
|
|
|
- THREE.ClampToEdgeWrapping;
|
|
|
- plane.material.map.minFilter = THREE.LinearFilter;
|
|
|
- plane.material.map.magFilter = THREE.LinearFilter;
|
|
|
- plane.material.map.generateMipmaps = true;
|
|
|
- } else {
|
|
|
- this._loadDones = [];
|
|
|
- /* plane.material.map = Texture.load(info.file,()=>{
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ Overlay.prototype.setFromInfo = function(info) {
|
|
|
+ //1 恢复到编辑之前 2 初始加载
|
|
|
+ var plane = this.plane;
|
|
|
+ var transformAtPanos = {}
|
|
|
+ for(var i in info.transformAtPanos){
|
|
|
+ transformAtPanos[i] = {
|
|
|
+ width : info.transformAtPanos[i].width,
|
|
|
+ height : info.transformAtPanos[i].height,
|
|
|
+ pos : info.transformAtPanos[i].pos.clone(),
|
|
|
+ qua : info.transformAtPanos[i].qua.clone(),
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ this.transformAtPanos = transformAtPanos
|
|
|
+ //在每个漫游点独立设置的position。
|
|
|
+ //var curPanoTransform = player.currentPano && this.transformAtPanos[player.currentPano.id] || {}
|
|
|
+ var curPanoTransform = this.transformAtPanos[ getTransformSid()] || {}
|
|
|
+
|
|
|
+
|
|
|
+ info.depth && this.scale.setZ(info.depth / settings.overlay.depth)
|
|
|
+
|
|
|
+ this.posCustom = info.pos ? info.pos.clone() : this.position.clone();
|
|
|
+ //没有单独设置position的漫游点使用的position
|
|
|
+ this.position.copy(curPanoTransform.pos || this.posCustom)
|
|
|
+
|
|
|
+ this.quaCustom = info.qua ? info.qua.clone() : this.quaternion.clone()
|
|
|
+ this.quaternion.copy(curPanoTransform.qua || this.quaCustom);
|
|
|
+
|
|
|
+ this.widthCustom = info.width
|
|
|
+ this.heightCustom = info.height
|
|
|
+ this.width = curPanoTransform.width || this.widthCustom
|
|
|
+ this.height = curPanoTransform.height || this.heightCustom
|
|
|
+ var a = this.getScaleBySize(this.width, this.height)
|
|
|
+ this.scale.setX(a.x)
|
|
|
+ this.scale.setY(a.y)
|
|
|
+
|
|
|
+ if (info.type) {
|
|
|
+ if (!plane.material.map) {
|
|
|
+ if (info.type == "video") {
|
|
|
+ plane.material.map = new THREE.VideoTexture(info.media);
|
|
|
+ this.hasRequestLoad = true
|
|
|
+
|
|
|
+ plane.material.map.wrapS = plane.material.map.wrapT = THREE.ClampToEdgeWrapping;
|
|
|
+ plane.material.map.minFilter = THREE.LinearFilter;
|
|
|
+ plane.material.map.magFilter = THREE.LinearFilter;
|
|
|
+ plane.material.map.generateMipmaps = true;
|
|
|
+
|
|
|
+ } else {
|
|
|
+ this._loadDones = []
|
|
|
+ /* plane.material.map = Texture.load(info.file,()=>{
|
|
|
if(this._loadDones){
|
|
|
this._loadDones.forEach(e=>e())
|
|
|
this._loadDones = null
|
|
|
}
|
|
|
}) */
|
|
|
- }
|
|
|
- /* plane.material.map.wrapS = plane.material.map.wrapT = THREE.ClampToEdgeWrapping;
|
|
|
+ }
|
|
|
+ /* plane.material.map.wrapS = plane.material.map.wrapT = THREE.ClampToEdgeWrapping;
|
|
|
plane.material.map.minFilter = THREE.LinearFilter;
|
|
|
plane.material.map.magFilter = THREE.LinearFilter;
|
|
|
plane.material.map.generateMipmaps = true; */
|
|
|
- } else plane.material.map.image = info.media;
|
|
|
- this.file = info.file;
|
|
|
- }
|
|
|
- this.overlayType = info.type;
|
|
|
+ } else
|
|
|
+ plane.material.map.image = info.media;
|
|
|
+ this.file = info.file;
|
|
|
+ }
|
|
|
+ this.overlayType = info.type;
|
|
|
+
|
|
|
+ if (!!this.hasBox != !!info.hasBox) {
|
|
|
+ this.addBox(!this.hasBox);
|
|
|
+ }
|
|
|
|
|
|
- if (!!this.hasBox != !!info.hasBox) {
|
|
|
- this.addBox(!this.hasBox);
|
|
|
+ this.updateMatrixWorld()
|
|
|
+ this.getVisiblePanos()
|
|
|
+
|
|
|
+
|
|
|
+ {//gif
|
|
|
+ if(this.animation){
|
|
|
+ GifTexDeal.remove(this.animation)
|
|
|
+ }
|
|
|
+ this.animateInfo = CloneObject(info.animateInfo)
|
|
|
+ if(this.animateInfo && plane.material.map){
|
|
|
+ this.animation = GifTexDeal.addAnimation(plane.material.map, this, this.animateInfo, this.sid )
|
|
|
+ this.visible && this.inSight() && GifTexDeal.start(this.animation)
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
}
|
|
|
|
|
|
- this.updateMatrixWorld();
|
|
|
- this.getVisiblePanos();
|
|
|
- };
|
|
|
|
|
|
- Overlay.prototype.getTransformSid = function() {
|
|
|
- var name;
|
|
|
- if (player.mode == "panorama") {
|
|
|
- name = player.currentPano ? player.currentPano.id : "outside";
|
|
|
- } else {
|
|
|
- name = "outside";
|
|
|
- }
|
|
|
- return name;
|
|
|
- };
|
|
|
|
|
|
- Overlay.prototype.addBox = function(state) {
|
|
|
- if (state == !!this.hasBox) {
|
|
|
- return;
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ Overlay.prototype.addBox = function(state) {
|
|
|
+ if (state == !!this.hasBox) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (state) {
|
|
|
+ var box = new THREE.Mesh(_boxGeometry,_boxMat)
|
|
|
+ box.position.set(0, 0, settings.overlay.depth / 2);
|
|
|
+ box.renderOrder = 3
|
|
|
+ this.plane.position.set(0, 0, settings.overlay.depth);
|
|
|
+ this.add(box);
|
|
|
+ this.box = box;
|
|
|
+
|
|
|
+ } else {
|
|
|
+ this.plane.position.set(0, 0, 0);
|
|
|
+ this.remove(this.box);
|
|
|
+ this.box = null;
|
|
|
+ }
|
|
|
+ this.hasBox = state
|
|
|
}
|
|
|
- if (state) {
|
|
|
- var box = new THREE.Mesh(_boxGeometry, _boxMat);
|
|
|
- box.position.set(0, 0, settings.overlay.depth / 2);
|
|
|
- box.renderOrder = 3;
|
|
|
- this.plane.position.set(0, 0, settings.overlay.depth);
|
|
|
- this.add(box);
|
|
|
- this.box = box;
|
|
|
- } else {
|
|
|
- this.plane.position.set(0, 0, 0);
|
|
|
- this.remove(this.box);
|
|
|
- this.box = null;
|
|
|
+
|
|
|
+ Overlay.prototype.getSizeByScale = function() {
|
|
|
+ return {
|
|
|
+ width: settings.overlay.width * this.scale.x,
|
|
|
+ height: settings.overlay.height * this.scale.y
|
|
|
+ }
|
|
|
}
|
|
|
- this.hasBox = state;
|
|
|
- };
|
|
|
-
|
|
|
- Overlay.prototype.getSizeByScale = function() {
|
|
|
- return {
|
|
|
- width: settings.overlay.width * this.scale.x,
|
|
|
- height: settings.overlay.height * this.scale.y,
|
|
|
- };
|
|
|
- };
|
|
|
- Overlay.prototype.getScaleBySize = function(width, height) {
|
|
|
- return {
|
|
|
- x: width / settings.overlay.width,
|
|
|
- y: height / settings.overlay.height,
|
|
|
- };
|
|
|
- };
|
|
|
-
|
|
|
- Overlay.prototype.preDeal = function(info) {
|
|
|
- info.pos = new THREE.Vector3().fromArray(info.pos);
|
|
|
- info.qua = new THREE.Quaternion().fromArray(info.qua);
|
|
|
- info.width = parseFloat(info.width);
|
|
|
- info.height = parseFloat(info.height);
|
|
|
- info.depth = parseFloat(info.depth);
|
|
|
- info.hasBox = parseInt(info.hasBox);
|
|
|
- info.pos.x = parseFloat(info.pos.x);
|
|
|
- info.pos.y = parseFloat(info.pos.y);
|
|
|
- info.pos.z = parseFloat(info.pos.z);
|
|
|
- info.qua.x = parseFloat(info.qua.x);
|
|
|
- info.qua.y = parseFloat(info.qua.y);
|
|
|
- info.qua.z = parseFloat(info.qua.z);
|
|
|
- info.qua.w = parseFloat(info.qua.w);
|
|
|
-
|
|
|
- if (!info.transformAtPanos) info.transformAtPanos = {};
|
|
|
-
|
|
|
- for (let i in info.transformAtPanos) {
|
|
|
- info.transformAtPanos[i].pos = new THREE.Vector3().fromArray(
|
|
|
- info.transformAtPanos[i].pos
|
|
|
- );
|
|
|
- info.transformAtPanos[i].qua = new THREE.Quaternion().fromArray(
|
|
|
- info.transformAtPanos[i].qua
|
|
|
- );
|
|
|
+ Overlay.prototype.getScaleBySize = function(width, height) {
|
|
|
+ return {
|
|
|
+ x: width / settings.overlay.width,
|
|
|
+ y: height / settings.overlay.height,
|
|
|
+ }
|
|
|
}
|
|
|
- };
|
|
|
|
|
|
- Overlay.prototype.getVisiblePanos = function() {
|
|
|
- this.visiblePanos = common.getVisiblePano(this.plane.getWorldPosition(), {
|
|
|
- model: null,
|
|
|
- });
|
|
|
- };
|
|
|
+ Overlay.prototype.preDeal = function(info) {
|
|
|
+ info.pos = new THREE.Vector3().fromArray(info.pos)
|
|
|
+ info.qua = new THREE.Quaternion().fromArray(info.qua)
|
|
|
+ info.width = parseFloat(info.width)
|
|
|
+ info.height = parseFloat(info.height)
|
|
|
+ info.depth = parseFloat(info.depth)
|
|
|
+ info.hasBox = parseInt(info.hasBox)
|
|
|
+ info.pos.x = parseFloat(info.pos.x)
|
|
|
+ info.pos.y = parseFloat(info.pos.y)
|
|
|
+ info.pos.z = parseFloat(info.pos.z)
|
|
|
+ info.qua.x = parseFloat(info.qua.x)
|
|
|
+ info.qua.y = parseFloat(info.qua.y)
|
|
|
+ info.qua.z = parseFloat(info.qua.z)
|
|
|
+ info.qua.w = parseFloat(info.qua.w)
|
|
|
+
|
|
|
+ if (!info.transformAtPanos)
|
|
|
+ info.transformAtPanos = {}
|
|
|
+
|
|
|
+ for (let i in info.transformAtPanos) {
|
|
|
+ info.transformAtPanos[i].pos = new THREE.Vector3().fromArray(info.transformAtPanos[i].pos)
|
|
|
+ info.transformAtPanos[i].qua = new THREE.Quaternion().fromArray(info.transformAtPanos[i].qua)
|
|
|
|
|
|
- Overlay.prototype.updateVisibles = function(panos) {
|
|
|
- if (settings.isEdit && EditOverlay.editPlane == this) {
|
|
|
- return true;
|
|
|
- }
|
|
|
+ }
|
|
|
|
|
|
- this.visible = !!panos.find((pano) => this.visiblePanos.includes(pano));
|
|
|
- if (!this.visible && this.overlayType == "video") this.videoControl("stop");
|
|
|
- };
|
|
|
+ }
|
|
|
|
|
|
- Overlay.updateVisibles = function(panos) {
|
|
|
- if (panos === true) {
|
|
|
- player.overlayGroup.children.forEach((e) => (e.visible = true));
|
|
|
- } else {
|
|
|
- player.overlayGroup.children.forEach((e) => e.updateVisibles(panos));
|
|
|
+ Overlay.prototype.getVisiblePanos = function() {//在不同点还不一样
|
|
|
+ var depth = this.scale.z * settings.overlay.depth;
|
|
|
+ var getPos = function(position, quaternion, width, height){//每个overlay位置对应5个坐标,plane中心和四个角的位置
|
|
|
+
|
|
|
+ var cornerPoint = [
|
|
|
+ new THREE.Vector3(0, 0, depth),
|
|
|
+ new THREE.Vector3(-width/2, height/2, depth),
|
|
|
+ new THREE.Vector3(width/2, height/2, depth),
|
|
|
+ new THREE.Vector3(width/2, -height/2, depth),
|
|
|
+ new THREE.Vector3(-width/2, -height/2, depth),
|
|
|
+ ];
|
|
|
+
|
|
|
+ return cornerPoint.map(e=>{
|
|
|
+ return e.clone().applyQuaternion(quaternion).add(position)
|
|
|
+ })
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ var customPositions = getPos(this.posCustom, this.quaCustom, this.widthCustom, this.heightCustom)
|
|
|
+ var posAtPanos = {}
|
|
|
+
|
|
|
+ for(let panoId in this.transformAtPanos){
|
|
|
+ if(panoId == 'outSide')continue;
|
|
|
+ posAtPanos[panoId] = getPos(this.transformAtPanos[panoId].pos, this.transformAtPanos[panoId].qua, this.transformAtPanos[panoId].width, this.transformAtPanos[panoId].height)
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ this.visiblePanos = common.getVisiblePano(customPositions, {
|
|
|
+ model: null , posAtPanos
|
|
|
+ });
|
|
|
}
|
|
|
- };
|
|
|
-
|
|
|
- Overlay.prototype.videoControl = function(state) {
|
|
|
- if (this.overlayType != "video") return;
|
|
|
- if (!state || state == "stop") {
|
|
|
- this.plane.material.map.image.paused ||
|
|
|
- this.plane.material.map.image.pause();
|
|
|
- if (state == "stop") {
|
|
|
- this.plane.material.map.image.currentTime = 0;
|
|
|
- }
|
|
|
- //console.log("pause")
|
|
|
- } else if (state) {
|
|
|
- this.plane.material.map.image.paused &&
|
|
|
- this.plane.material.map.image.play();
|
|
|
- //console.log("play")
|
|
|
+
|
|
|
+
|
|
|
+ Overlay.prototype.updateVisibles = function(panos) {
|
|
|
+
|
|
|
+ if(settings.isEdit && EditOverlay.editPlane == this){
|
|
|
+ return true
|
|
|
+ }
|
|
|
+
|
|
|
+ this.visible = !!panos.find(pano=>this.visiblePanos.includes(pano))
|
|
|
+ if (!this.visible && this.overlayType == 'video')
|
|
|
+ this.videoControl('stop')
|
|
|
+
|
|
|
+ /* if(this.animateInfo){ //在player.update里更新
|
|
|
+ if(this.visible){
|
|
|
+ GifTexDeal.start(this.animation)
|
|
|
+ }else{
|
|
|
+ GifTexDeal.stop(this.animation)
|
|
|
+ }
|
|
|
+ } */
|
|
|
}
|
|
|
- };
|
|
|
- Overlay.prototype.inSight = function() {
|
|
|
- if (player.mode == "panorama") {
|
|
|
- var position = this.plane.getWorldPosition();
|
|
|
- var pos2d = math.getPos2d(position, player.camera, $("#player")[0]);
|
|
|
- if (pos2d.trueSide && pos2d.inSight) {
|
|
|
- return true;
|
|
|
- } else {
|
|
|
- var cornerPoint = [
|
|
|
- new THREE.Vector3(
|
|
|
- -settings.overlay.width / 2,
|
|
|
- settings.overlay.height / 2,
|
|
|
- 0
|
|
|
- ),
|
|
|
- new THREE.Vector3(
|
|
|
- settings.overlay.width / 2,
|
|
|
- settings.overlay.height / 2,
|
|
|
- 0
|
|
|
- ),
|
|
|
- new THREE.Vector3(
|
|
|
- settings.overlay.width / 2,
|
|
|
- -settings.overlay.height / 2,
|
|
|
- 0
|
|
|
- ),
|
|
|
- new THREE.Vector3(
|
|
|
- -settings.overlay.width / 2,
|
|
|
- -settings.overlay.height / 2,
|
|
|
- 0
|
|
|
- ),
|
|
|
- ];
|
|
|
- for (var i = 0; i < 4; i++) {
|
|
|
- cornerPoint[i].applyMatrix4(this.plane.matrixWorld);
|
|
|
- var pos2d = math.getPos2d(
|
|
|
- cornerPoint[i],
|
|
|
- player.camera,
|
|
|
- $("#player")[0]
|
|
|
- );
|
|
|
- if (pos2d.trueSide && pos2d.inSight) {
|
|
|
- return true;
|
|
|
- }
|
|
|
+
|
|
|
+
|
|
|
+ Overlay.updateVisibles = function(panos) {
|
|
|
+ if (panos === true) {
|
|
|
+ player.overlayGroup.children.forEach(e=>e.visible = true)
|
|
|
+ } else {
|
|
|
+ player.overlayGroup.children.forEach(e=>e.updateVisibles(panos))
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ Overlay.prototype.videoControl = function(state){
|
|
|
+ if(this.overlayType != "video")return
|
|
|
+ var video = this.plane.material.map.image
|
|
|
+ if(!state || state == 'stop'){
|
|
|
+ video.paused || video.pause()
|
|
|
+ if(state == 'stop'){
|
|
|
+ video.currentTime = 0;
|
|
|
+
|
|
|
+ }
|
|
|
+ video.shouldPlay = false
|
|
|
+ //console.log("pause")
|
|
|
+ }else if(state){
|
|
|
+ video.paused && video.play()
|
|
|
+ video.shouldPlay = true
|
|
|
+ //console.log("play")
|
|
|
+ }
|
|
|
+ }
|
|
|
+ Overlay.prototype.inSight = function(){
|
|
|
+ if(player.mode == 'panorama'){
|
|
|
+ var position = this.plane.getWorldPosition()
|
|
|
+ var pos2d = math.getPos2d(position, player.camera, $("#player")[0])
|
|
|
+ if(pos2d.trueSide && pos2d.inSight){
|
|
|
+ return true
|
|
|
+ }else{
|
|
|
+ var cornerPoint = [
|
|
|
+ new THREE.Vector3(-settings.overlay.width/2, settings.overlay.height/2, 0),
|
|
|
+ new THREE.Vector3(settings.overlay.width/2, settings.overlay.height/2, 0),
|
|
|
+ new THREE.Vector3(settings.overlay.width/2, -settings.overlay.height/2, 0),
|
|
|
+ new THREE.Vector3(-settings.overlay.width/2, -settings.overlay.height/2, 0),
|
|
|
+ ];
|
|
|
+ for(var i=0;i<4;i++){//只要有一点可见就算看见
|
|
|
+ cornerPoint[i].applyMatrix4(this.plane.matrixWorld);
|
|
|
+ var pos2d = math.getPos2d(cornerPoint[i], player.camera, $("#player")[0])
|
|
|
+ if(pos2d.trueSide && pos2d.inSight){
|
|
|
+ return true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }else{//飞出要判断模型阻挡,有点耗时就算了
|
|
|
+ return true
|
|
|
}
|
|
|
- }
|
|
|
- } else {
|
|
|
- return true;
|
|
|
}
|
|
|
- };
|
|
|
+
|
|
|
+
|
|
|
+ Overlay.prototype.addToLoadQueue = function() {
|
|
|
+ if (this.overlayType == 'photo') {
|
|
|
+ Overlay.loadQueue.includes(this) || Overlay.loadQueue.push(this)
|
|
|
|
|
|
- Overlay.prototype.addToLoadQueue = function() {
|
|
|
- if (this.overlayType == "photo") {
|
|
|
- Overlay.loadQueue.includes(this) || Overlay.loadQueue.push(this);
|
|
|
+ }
|
|
|
}
|
|
|
- };
|
|
|
-
|
|
|
- Overlay.prototype.requestDownload = function() {
|
|
|
- if (this.hasRequestLoad || this.overlayType != "photo") return;
|
|
|
-
|
|
|
- console.log("overlay beginDownload : " + this.sid);
|
|
|
- var plane = this.plane;
|
|
|
-
|
|
|
- plane.material.map = Texture.load(this.file, () => {
|
|
|
- plane.material.needsUpdate = true;
|
|
|
- if (this._loadDones) {
|
|
|
- this._loadDones.forEach((e) => e());
|
|
|
- this._loadDones = null;
|
|
|
- }
|
|
|
- setTimeout(Overlay.loadNext, 50);
|
|
|
- plane.material.opacity = 1;
|
|
|
- console.log("overlay loaded: " + this.sid);
|
|
|
- });
|
|
|
- plane.material.map.wrapS = plane.material.map.wrapT =
|
|
|
- THREE.ClampToEdgeWrapping;
|
|
|
- plane.material.map.minFilter = THREE.LinearFilter;
|
|
|
- plane.material.map.magFilter = THREE.LinearFilter;
|
|
|
- plane.material.map.generateMipmaps = true;
|
|
|
-
|
|
|
- this.hasRequestLoad = true;
|
|
|
- };
|
|
|
-
|
|
|
- Overlay.loadQueue = []; //等待下载的overlay,目前只针对photo
|
|
|
- Overlay.maxLoadingCount = 3; //同时正在load图片的数量
|
|
|
- Overlay.loadNext = () => {
|
|
|
- //继续requestDownload loadQueue中前排的item
|
|
|
-
|
|
|
- var loadings = player.overlayGroup.children.filter(
|
|
|
- (e) => e.hasRequestLoad && e._loadDones
|
|
|
- ); //开始下载了但是没加载好的
|
|
|
-
|
|
|
- Overlay.loadQueue
|
|
|
- .slice(0, Overlay.maxLoadingCount - loadings.length)
|
|
|
- .forEach((e) => e.requestDownload());
|
|
|
- Overlay.loadQueue.splice(0, Overlay.maxLoadingCount - loadings.length);
|
|
|
- };
|
|
|
-
|
|
|
- Overlay.getNeedLoad = function() {
|
|
|
- //计算获取loadQueue,每次都重新计算,覆盖旧的
|
|
|
- if (!player || !player.domElement || !player.mode) return;
|
|
|
-
|
|
|
- if (player.mode != "panorama") {
|
|
|
- if (!Overlay.loadWhenOutside) return;
|
|
|
-
|
|
|
- if (Overlay.loadQueue.length == 0) {
|
|
|
- Overlay.loadQueue = player.overlayGroup.children
|
|
|
- .filter((e) => !e.hasRequestLoad)
|
|
|
- .slice(0, 5);
|
|
|
- }
|
|
|
-
|
|
|
- return;
|
|
|
+
|
|
|
+
|
|
|
+ Overlay.prototype.requestDownload = function() {
|
|
|
+ if (this.hasRequestLoad || this.overlayType != 'photo')
|
|
|
+ return
|
|
|
+
|
|
|
+ console.log('overlay beginDownload : ' + this.sid)
|
|
|
+ var plane = this.plane;
|
|
|
+
|
|
|
+ plane.material.map = Texture.load(this.file, ()=>{
|
|
|
+
|
|
|
+ if (this._loadDones) {
|
|
|
+ this._loadDones.forEach(e=>e())
|
|
|
+ this._loadDones = null
|
|
|
+ }
|
|
|
+ setTimeout(Overlay.loadNext, 50)
|
|
|
+ plane.material.opacity = 1;
|
|
|
+ console.log('overlay loaded: ' + this.sid)
|
|
|
+
|
|
|
+ if(this.animateInfo){
|
|
|
+ this.animation = GifTexDeal.addAnimation(plane.material.map, this, this.animateInfo, this.sid )
|
|
|
+ this.visible && this.inSight() && GifTexDeal.start(this.animation)
|
|
|
+ }
|
|
|
+
|
|
|
+ plane.material.needsUpdate = true
|
|
|
+ })
|
|
|
+ plane.material.map.wrapS = plane.material.map.wrapT = THREE.ClampToEdgeWrapping;
|
|
|
+ plane.material.map.minFilter = THREE.LinearFilter;
|
|
|
+ plane.material.map.magFilter = THREE.LinearFilter;
|
|
|
+ plane.material.map.generateMipmaps = true;
|
|
|
+
|
|
|
+ this.hasRequestLoad = true
|
|
|
}
|
|
|
- Overlay.loadWhenOutside = true;
|
|
|
- var overlays = player.overlayGroup.children.filter(
|
|
|
- (e) => !e.hasRequestLoad && e.visiblePanos.includes(player.currentPano)
|
|
|
- );
|
|
|
- //var maxAngle = THREE.Math.degToRad( cameraLight.getHFOVFromVFOV(70, player.domElement.clientWidth, app.player.domElement.clientHeight) / 2);
|
|
|
- var cameraDir = player.getDirection();
|
|
|
-
|
|
|
- /* var maxCount = 5;
|
|
|
+
|
|
|
+ Overlay.loadQueue = []; //等待下载的overlay,目前只针对photo
|
|
|
+ Overlay.maxLoadingCount = 3; //同时正在load图片的数量
|
|
|
+ Overlay.loadNext = ()=>{//继续requestDownload loadQueue中前排的item
|
|
|
+
|
|
|
+ var loadings = player.overlayGroup.children.filter(e=>e.hasRequestLoad && e._loadDones)//开始下载了但是没加载好的
|
|
|
+
|
|
|
+ Overlay.loadQueue.slice(0, Overlay.maxLoadingCount - loadings.length).forEach(e=>e.requestDownload())
|
|
|
+ Overlay.loadQueue.splice(0, Overlay.maxLoadingCount - loadings.length)
|
|
|
+ }
|
|
|
+
|
|
|
+ Overlay.getNeedLoad = function() {//计算获取loadQueue,每次都重新计算,覆盖旧的
|
|
|
+ if (!player || !player.domElement || !player.mode)
|
|
|
+ return;
|
|
|
+
|
|
|
+ if (player.mode != 'panorama') {
|
|
|
+ if (!Overlay.loadWhenOutside)
|
|
|
+ return;
|
|
|
+
|
|
|
+ if (Overlay.loadQueue.length == 0) {
|
|
|
+ Overlay.loadQueue = player.overlayGroup.children.filter(e=>!e.hasRequestLoad).slice(0, 5);
|
|
|
+ }
|
|
|
+
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ Overlay.loadWhenOutside = true
|
|
|
+ var overlays = player.overlayGroup.children.filter(e=>!e.hasRequestLoad && e.visiblePanos.includes(player.currentPano))
|
|
|
+ //var maxAngle = THREE.Math.degToRad( cameraLight.getHFOVFromVFOV(70, player.domElement.clientWidth, app.player.domElement.clientHeight) / 2);
|
|
|
+ var cameraDir = player.getDirection()
|
|
|
+
|
|
|
+ /* var maxCount = 5;
|
|
|
if(overlays.length>maxCount){
|
|
|
for(var i=0;i<overlays.length;i++){
|
|
|
//角度为可见范围
|
|
@@ -407,45 +469,42 @@ window.initOverlay = function(THREE) {
|
|
|
Overlay.loadQueue.push()
|
|
|
}
|
|
|
}else{ */
|
|
|
- Overlay.loadQueue = overlays;
|
|
|
- //}
|
|
|
-
|
|
|
- var request = [
|
|
|
- (overlay) => {
|
|
|
- return true;
|
|
|
- },
|
|
|
- ];
|
|
|
- var rank = [
|
|
|
- (overlay) => {
|
|
|
- var dis = overlay.plane.getWorldPosition().distanceTo(player.position);
|
|
|
- return -dis;
|
|
|
- },
|
|
|
- (overlay) => {
|
|
|
- var tagDir = overlay.plane.getWorldPosition().sub(player.position);
|
|
|
- var angle = tagDir.angleTo(cameraDir);
|
|
|
- return -angle * 20;
|
|
|
- },
|
|
|
- ];
|
|
|
- var result = common.sortByScore(Overlay.loadQueue, request, rank);
|
|
|
- Overlay.loadQueue = result
|
|
|
- ? result.slice(0, 5).map((e) => e.item)
|
|
|
- : player.overlayGroup.children
|
|
|
- .filter((e) => !e.hasRequestLoad)
|
|
|
- .slice(0, 2);
|
|
|
- };
|
|
|
-
|
|
|
- Overlay.load = () => {
|
|
|
- //开始下载图片
|
|
|
- Overlay.getNeedLoad();
|
|
|
- Overlay.loadNext();
|
|
|
- var unloads = player.overlayGroup.children.filter((e) => !e.hasRequestLoad);
|
|
|
- if (unloads.length) {
|
|
|
- setTimeout(Overlay.load, 200);
|
|
|
- } else {
|
|
|
- Overlay.allRequestLoad = true;
|
|
|
- console.log("allRequestLoad");
|
|
|
+ Overlay.loadQueue = overlays
|
|
|
+ //}
|
|
|
+
|
|
|
+ var request = [(overlay)=>{
|
|
|
+ return true
|
|
|
+ }
|
|
|
+ ];
|
|
|
+ var rank = [(overlay)=>{
|
|
|
+ var dis = overlay.plane.getWorldPosition().distanceTo(player.position);
|
|
|
+ return -dis
|
|
|
+ }
|
|
|
+ , (overlay)=>{
|
|
|
+ var tagDir = overlay.plane.getWorldPosition().sub(player.position)
|
|
|
+ var angle = tagDir.angleTo(cameraDir)
|
|
|
+ return -angle * 20
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ var result = common.sortByScore(Overlay.loadQueue, request, rank);
|
|
|
+ Overlay.loadQueue = result ? result.slice(0, 5).map(e=>e.item) : player.overlayGroup.children.filter(e=>!e.hasRequestLoad).slice(0, 2);
|
|
|
+
|
|
|
}
|
|
|
- };
|
|
|
|
|
|
- window.Overlay = Overlay;
|
|
|
-};
|
|
|
+ Overlay.load = ()=>{//开始下载图片
|
|
|
+ Overlay.getNeedLoad()
|
|
|
+ Overlay.loadNext()
|
|
|
+ var unloads = player.overlayGroup.children.filter(e=>!e.hasRequestLoad)
|
|
|
+ if (unloads.length) {
|
|
|
+ setTimeout(Overlay.load, 200)
|
|
|
+ } else {
|
|
|
+ Overlay.allRequestLoad = true
|
|
|
+ console.log('allRequestLoad')
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ window.Overlay = Overlay;
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+
|