How to remove or disable plugin when change scene?

2

Samstag, 11. März 2023, 19:21

Quellcode

	<scene name="scene_1" title="0" onstart="remove()"  thumburl="panos/1.tiles/thumb.jpg" lat="" lng="" heading="">
		<plugin name="threejs" url="gltfloader.js" />
		<view hlookat="1.245" vlookat="-14.021" fovtype="MFOV" fov="140.000" maxpixelzoom="2.0" fovmin="70" fovmax="140" limitview="auto" />
		<preview url="panos/1.tiles/preview.jpg" />
		<image type="CUBE" multires="true" tilesize="512">			<level tiledimagewidth="2624" tiledimageheight="2624">				<cube url="panos/1.tiles/%s/l3/%v/l3_%s_%v_%h.jpg" />			</level>			<level tiledimagewidth="1280" tiledimageheight="1280">				<cube url="panos/1.tiles/%s/l2/%v/l2_%s_%v_%h.jpg" />			</level>			<level tiledimagewidth="640" tiledimageheight="640">				<cube url="panos/1.tiles/%s/l1/%v/l1_%s_%v_%h.jpg" />			</level>		</image>		<hotspot name="scene_2" style="hs_circle" ath="-1.231" atv="-2.748" tag="1" />
	</scene>
	<scene name="scene_2" title="1" onstart="" thumburl="panos/2.tiles/thumb.jpg" lat="" lng="" heading="">
		<view hlookat="6.420" vlookat="-11.392" fovtype="MFOV" fov="120.000" maxpixelzoom="2.0" fovmin="70" fovmax="140" limitview="auto" />
		<preview url="panos/2.tiles/preview.jpg" />
		<image type="CUBE" multires="true" tilesize="512">			<level tiledimagewidth="2624" tiledimageheight="2624">				<cube url="panos/2.tiles/%s/l3/%v/l3_%s_%v_%h.jpg" />			</level>			<level tiledimagewidth="1280" tiledimageheight="1280">				<cube url="panos/2.tiles/%s/l2/%v/l2_%s_%v_%h.jpg" />			</level>			<level tiledimagewidth="640" tiledimageheight="640">				<cube url="panos/2.tiles/%s/l1/%v/l1_%s_%v_%h.jpg" />			</level>		</image>		<hotspot name="scene_1" style="hs_circle" ath="6.539" atv="-7.554" tag="Cổng" />		<hotspot name="scene_3" style="hs_circle" ath="-172.139" atv="-10.359" tag="2" />
	</scene>

put your plugin into the scene and remove keep="true"

zFilter plugin -- zFlare plugin -- zSnapshot plugin

Zum Seitenanfang

Anfänger

3

Sonntag, 12. März 2023, 04:23

Zitat von »indexofrefraction«
Quellcode
1
put your plugin into the scene and remove keep="true"

It's still show Model 3D in all scene when i change scene :(

Woody

KEEP MOVING FORWARD *thumbup*

Zum Seitenanfang

$»indexofrefraction« ist offline$ indexofrefraction

Profi

4

Sonntag, 12. März 2023, 07:19

then your plugin is not working correctly.
its unloadplugin() function should remove threejs and everything it installed (events etc)

zFilter plugin -- zFlare plugin -- zSnapshot plugin

Zum Seitenanfang

Anfänger

5

Sonntag, 12. März 2023, 13:04

Zitat von »indexofrefraction«

then your plugin is not working correctly.
its unloadplugin() function should remove threejs and everything it installed (events etc)

Quellcode

function krpanoplugin()
{
	let local  = this;
	let krpano = null;
	let device = null;
	let plugin = null;


	local.registerplugin = function(krpanointerface, pluginpath, pluginobject)
	{
		krpano = krpanointerface;
		device = krpano.device;
		plugin = pluginobject;

		if (krpano.version < "1.19")
		{
			krpano.trace(3,"ThreeJS plugin - too old krpano version (min. 1.19)");
			return;
		}

		if (!device.webgl)
		{
			// show warning
			krpano.trace(2,"ThreeJS plugin - WebGL required");
			return;
		}

		krpano.debugmode = true;
		krpano.trace(0, "ThreeJS krpano plugin");

		// load the requiered three.js scripts
		load_scripts(["three.min.js","gltf.js"], start);
	}


	function resolve_url_path(url)
	{
		if (url.charAt(0) != "/" && url.indexOf("://") < 0)
		{
			// adjust relative url path
			url = krpano.parsepath("%CURRENTXML%/" + url);
		}

		return url;
	}


	function load_scripts(urls, callback)
	{
		if (urls.length > 0)
		{
			let url = resolve_url_path( urls.splice(0,1)[0] );

			let script = document.createElement("script");
			script.src = url;
			script.addEventListener("load", function(){ load_scripts(urls,callback); });
			script.addEventListener("error", function(){ krpano.trace(3,"loading file '"+url+"' failed!"); });
			document.getElementsByTagName("head")[0].appendChild(script);
		}
		else
		{
			// done
			callback();
		}
	}


	// helper
	const M_RAD = Math.PI / 180.0;


	// ThreeJS/krpano objects
	let renderer = null;
	let scene = null;
	let camera = null;
	let stereocamera = null;
	let camera_hittest_raycaster = null;
	let krpano_panoview = null;
	let krpano_panoview_euler = null;
	let krpano_projection = new Float32Array(16);		// krpano projection matrix
	let krpano_depthbuffer_scale = 1.0001;				// depthbuffer scaling (use ThreeJS defaults: znear=0.1, zfar=2000)
	let krpano_depthbuffer_offset = -0.2;


	function start()
	{
		// create the ThreeJS WebGL renderer, but use the WebGL context from krpano
		renderer = new THREE.WebGLRenderer({canvas:krpano.webGL.canvas, context:krpano.webGL.context});
		renderer.autoClear = false;
		renderer.setPixelRatio(1);	// krpano handles the pixel ratio scaling

		// restore the krpano WebGL settings (for correct krpano rendering)
		restore_krpano_WebGL_state();

		// use the krpano onviewchanged event as render-frame callback (this event will be directly called after the krpano pano rendering)
		krpano.set("events[__threejs__].keep", true);
		krpano.set("events[__threejs__].onviewchange", adjust_krpano_rendering);	// correct krpano view settings before the rendering
		krpano.set("events[__threejs__].onviewchanged", render_frame);

		// enable continuous rendering (that means render every frame, not just when the view has changed)
		krpano.view.continuousupdates = true;

		// register mouse and touch events
	

		// basic ThreeJS objects
		scene = new THREE.Scene();
		camera = new THREE.Camera();
		stereocamera = new THREE.Camera();
		camera_hittest_raycaster = new THREE.Raycaster();
		krpano_panoview_euler = new THREE.Euler();

		// build the ThreeJS scene (start adding custom code there)
		build_scene();
		
		// restore the krpano WebGL settings (for correct krpano rendering)
		restore_krpano_WebGL_state();
	}

	
	function restore_krpano_WebGL_state()
	{
		let gl = krpano.webGL.context;

		gl.disable(gl.DEPTH_TEST);
		gl.cullFace(gl.FRONT);
		gl.frontFace(gl.CCW);
		gl.enable(gl.BLEND);
		gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
		gl.activeTexture(gl.TEXTURE0);
		gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
		gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
		gl.pixelStorei(gl.UNPACK_ALIGNMENT, 4);
		
		// restore the current krpano WebGL program
		krpano.webGL.restoreProgram();
		
	}


	function restore_ThreeJS_WebGL_state()
	{
		let gl = krpano.webGL.context;

		gl.enable(gl.DEPTH_TEST);
		gl.depthFunc(gl.LEQUAL);
		gl.enable(gl.CULL_FACE);
		gl.cullFace(gl.BACK);
		gl.clearDepth(1);
		gl.clear(gl.DEPTH_BUFFER_BIT);
		renderer.state.reset();
		
	}


	function krpano_projection_matrix(sw,sh, zoom, xoff,yoff)
	{
		let m = krpano_projection;

		let pr = device.pixelratio;
		sw = pr / (sw*0.5);
		sh = pr / (sh*0.5);

		m[0]  = zoom*sw;    m[1]  = 0;          m[2]  = 0;                          m[3]  = 0;
		m[4]  = 0;          m[5]  = -zoom*sh;   m[6]  = 0;                          m[7]  = 0;
		m[8]  = xoff;       m[9]  = -yoff*sh;   m[10] = krpano_depthbuffer_scale;   m[11] = 1;
		m[12] = 0;          m[13] = 0;          m[14] = krpano_depthbuffer_offset;  m[15] = 1;
	}


	function update_camera_matrix(camera)
	{
		let m = krpano_projection;
		camera.projectionMatrix.set(m[0],m[4],m[8],m[12], m[1],m[5],m[9],m[13], m[2],m[6],m[10],m[14], m[3],m[7],m[11],m[15]);
	}


	function adjust_krpano_rendering()
	{
		if (krpano.view.fisheye != 0.0)
		{
			// disable the fisheye distortion, ThreeJS objects can't be rendered with it
			krpano.view.fisheye = 0.0;
		}
	}


	function render_frame()
	{
		let gl = krpano.webGL.context;
		let vr = krpano.webVR && krpano.webVR.enabled ? krpano.webVR : null;

		let sw = gl.drawingBufferWidth;
		let sh = gl.drawingBufferHeight;


		// setup WebGL for ThreeJS
		restore_ThreeJS_WebGL_state();

		// set the camera/view rotation
		krpano_panoview = krpano.view.getState(krpano_panoview);	// the 'krpano_panoview' object will be created and cached inside getState()
		krpano_panoview_euler.set(-krpano_panoview.v * M_RAD, (krpano_panoview.h-90) * M_RAD, krpano_panoview.r * M_RAD, "YXZ");
		camera.quaternion.setFromEuler(krpano_panoview_euler);
		camera.updateMatrixWorld(true);

		// set the camera/view projection
		krpano_projection_matrix(sw,sh, krpano_panoview.z, 0, krpano_panoview.yf);
		update_camera_matrix(camera);


		// render the scene
		if (krpano.display.stereo == false)
		{
			// normal rendering
			renderer.setViewport(10,10, sw,sh);
			renderer.render(scene, camera);
		}
		else
		{
			// stereo / VR rendering
			sw *= 0.5;	// use half screen width

			let stereo_scale = 0.05;
			let stereo_offset = Number(krpano.display.stereooverlap);

			// use a different camera for stereo rendering to keep the normal one for hit-testing
			stereocamera.quaternion.copy(camera.quaternion);
			stereocamera.updateMatrixWorld(true);

			// render left eye
			let eye_offset = -0.03;
			krpano_projection_matrix(sw,sh, krpano_panoview.z, stereo_offset, krpano_panoview.yf);

			if (vr)
			{
				eye_offset = vr.eyetranslt(1);						// get the eye offset (from the WebVR API)
				vr.prjmatrix(1, krpano_projection);					// replace the projection matrix (with the one from WebVR)
				krpano_projection[10] = krpano_depthbuffer_scale;	// adjust the depthbuffer scaling
				krpano_projection[14] = krpano_depthbuffer_offset;
			}

			// add the eye offset
			krpano_projection[12] = krpano_projection[0] * -eye_offset * stereo_scale;

			update_camera_matrix(stereocamera);
			renderer.setViewport(0,0, sw,sh);
			renderer.render(scene, stereocamera);

			// render right eye
			eye_offset = +0.03;
			krpano_projection[8] = -stereo_offset;	// mod the projection matrix (only change the stereo offset)

			if (vr)
			{
				eye_offset = vr.eyetranslt(2);						// get the eye offset (from the WebVR API)
				vr.prjmatrix(2, krpano_projection);					// replace the projection matrix (with the one from WebVR)
				krpano_projection[10] = krpano_depthbuffer_scale;	// adjust the depthbuffer scaling
				krpano_projection[14] = krpano_depthbuffer_offset;
			}

			// add the eye offset
			krpano_projection[12] = krpano_projection[0] * -eye_offset * stereo_scale;

			update_camera_matrix(stereocamera);
			renderer.setViewport(sw,0, sw,sh);
			renderer.render(scene, stereocamera);
		}

		// important - restore the krpano WebGL state for correct krpano rendering
		restore_krpano_WebGL_state();
	}



	// -----------------------------------------------------------------------
	// ThreeJS User Content - START HERE
	// add a krpano hotspot like handling for the 3d objects
	function assign_object_properties(obj, name, properties)
	{
		// set defaults (krpano hotspot like properties)
		if (properties          === undefined)	properties         = {};
		if (properties.name     === undefined)	properties.name    = name;
		if (properties.ath      === undefined)	properties.ath     = 0;
		if (properties.atv      === undefined)	properties.atv     = 0;
		if (properties.depth    === undefined)	properties.depth   = 1000;
		if (properties.scale    === undefined)	properties.scale   = 1;
		if (properties.rx       === undefined)	properties.rx      = 0;
		if (properties.ry       === undefined)	properties.ry      = 0;
		if (properties.rz       === undefined)	properties.rz      = 0;
		if (properties.rorder   === undefined)	properties.rorder  = "YXZ";
		if (properties.enabled  === undefined)	properties.enabled = true;
		if (properties.capture  === undefined)	properties.capture = true;
		if (properties.onover   === undefined)	properties.onover  = null;
		if (properties.onout    === undefined)	properties.onout   = null;
		if (properties.ondown   === undefined)	properties.ondown  = null;
		if (properties.onup     === undefined)	properties.onup    = null;
		if (properties.onclick  === undefined)	properties.onclick = null;
		properties.pressed  = false;
		properties.hovering = false;
		obj.properties = properties;
		obj.frustumCulled = false;
		update_object_properties(obj);
	}


	function update_object_properties(obj)
	{
		let p = obj.properties;

		let px = p.depth * Math.cos(p.atv * M_RAD)*Math.cos((180-p.ath) * M_RAD);
		let py = p.depth * Math.sin(p.atv * M_RAD);
		let pz = p.depth * Math.cos(p.atv * M_RAD)*Math.sin((180-p.ath) * M_RAD);
		obj.position.set(px,py,pz);

		obj.rotation.set(p.rx*M_RAD, p.ry*M_RAD, p.rz*M_RAD, p.rorder);

		obj.scale.set(p.scale, p.scale, p.scale);

		obj.updateMatrix();
	}


	
	function load_object_glb(url,properties,donecall)
	{
		url = resolve_url_path(url);
		let loader = new THREE.GLTFLoader();
		loader.load(url, (gltf) => {
			const sceneload = gltf.scene
            assign_object_properties(sceneload,url,properties)
			scene.add(sceneload);
			if (donecall)
			{
				donecall(sceneload);
			}
		  })
	}
	let mesh = null
	function build_scene()
	{
		// create a mesh 
		mesh = new THREE.Mesh(new THREE.BoxGeometry(), new THREE.MeshBasicMaterial({map:THREE.ImageUtils.loadTexture(resolve_url_path("box.jpg"))}));
		assign_object_properties(mesh, "meshbox", {ath:160, atv:-3,scale: 0.001, depth:200000});
		scene.add( mesh );

		// load 3d objects
		load_object_glb("sp3.glb",{ath:+130,  atv:+15, depth:8,  scale:1, rx:180, ry:40  ,rz:0})
		load_object_glb("sp8.glb",{ath:+30,  atv:+15, depth:8,  scale:1, rx:180, ry:110  ,rz:0})
		load_object_glb("sp8.glb",{ath:-110,  atv:+15, depth:80,  scale:1, rx:180, ry:110  ,rz:0})
		load_object_glb("sp8.glb",{ath:-10,  atv:+15, depth:80,  scale:1, rx:180, ry:110  ,rz:0})
		load_object_glb("sp8.glb",{ath:-40,  atv:-20, depth:80,  scale:1, rx:180, ry:110  ,rz:0})
		load_object_glb("sp8.glb",{ath:-40,  atv:-40, depth:80,  scale:1, rx:180, ry:110  ,rz:0})
		scene.add( new THREE.AmbientLight(0xFFFFFF) );

		let directionalLight = new THREE.DirectionalLight(0xFFFFFF);
		directionalLight.position.x = 5;
		directionalLight.position.y = -1;
		directionalLight.position.z = 0;
		directionalLight.position.normalize();
		scene.add( directionalLight );
	}


	


	


}

This is my threejs plugin, i dont know what's wrong :( *confused*

Woody

KEEP MOVING FORWARD *thumbup*

Zum Seitenanfang

$»indexofrefraction« ist offline$ indexofrefraction

Profi

6

Sonntag, 12. März 2023, 14:07

you can have a look at the default plugin example here:
https://krpano.com/docu/plugininterface/#top

Quellcode

    // unloadplugin - exit point for the plugin (optionally)
    // - will be called from krpano when the plugin will be removed
    // - everything that was added by the plugin should be removed here
    local.unloadplugin = function()
    {
        /* REMOVE YOUR THREEJS STUFF HERE */
        plugin = null;
        krpano = null;
    }

your plugin has no unloadplugin() function at all

zFilter plugin -- zFlare plugin -- zSnapshot plugin

Zum Seitenanfang

Anfänger

7

Sonntag, 12. März 2023, 14:53

Zitat von »indexofrefraction«
you can have a look at the default plugin example here:
https://krpano.com/docu/plugininterface/#top
Quellcode
1
2
3
4
5
6
7
8
9
    // unloadplugin - exit point for the plugin (optionally)
    // - will be called from krpano when the plugin will be removed
    // - everything that was added by the plugin should be removed here
    local.unloadplugin = function()
    {
        /* REMOVE YOUR THREEJS STUFF HERE */
        plugin = null;
        krpano = null;
    }
your plugin has no unloadplugin() function at all

Quellcode

VM214:190 Uncaught TypeError: Cannot read properties of null (reading 'view')
    at adjust_krpano_rendering (eval at G.c.loading (eval at embedpano (tour.js:10:76)), <anonymous>:190:14)
    at k.callaction (eval at embedpano (tour.js:10:76), <anonymous>:1:76620)
    at od (eval at embedpano (tour.js:10:76), <anonymous>:1:7126)
    at Ba (eval at embedpano (tour.js:10:76), <anonymous>:1:4076)
    at e (eval at embedpano (tour.js:10:76), <anonymous>:1:129251)
    at p (eval at embedpano (tour.js:10:76), <anonymous>:1:136521)
    at r (eval at embedpano (tour.js:10:76), <anonymous>:1:134498)
    at v (eval at embedpano (tour.js:10:76), <anonymous>:1:133402)
    at eval (eval at embedpano (tour.js:10:76), <anonymous>:1:129819)
    at eval (eval at embedpano (tour.js:10:76), <anonymous>:1:65467)

i tried add that code but have this problem

Woody

KEEP MOVING FORWARD *thumbup*

Zum Seitenanfang

Anfänger

8

Sonntag, 12. März 2023, 17:18

problem solved, i try add

	Quellcode
1	if(krpano !== null) { }

inside function containing "krpano" and remove keep ="true" then it worked *g*

Woody

KEEP MOVING FORWARD *thumbup*

Zum Seitenanfang

panoyun

Fortgeschrittener

Beiträge: 234

Wohnort: Somalia

9

Montag, 13. März 2023, 04:00

if(krpano !== null) { }

put this code in that place *confused*

Zum Seitenanfang

Anfänger

10

Montag, 13. März 2023, 08:44

Zitat von »panoyun«

if(krpano !== null) { }

put this code in that place

Quellcode

	function restore_ThreeJS_WebGL_state()
	{
		if(krpano !== null) {
		let gl = krpano.webGL.context;

		gl.enable(gl.DEPTH_TEST);
		gl.depthFunc(gl.LEQUAL);
		gl.enable(gl.CULL_FACE);
		gl.cullFace(gl.BACK);
		gl.clearDepth(1);
		gl.clear(gl.DEPTH_BUFFER_BIT);
		renderer.state.reset();
		}
	}

for example. put if(krpano !== null) in function has "krapno" *thumbup*

Woody

KEEP MOVING FORWARD *thumbup*

Zum Seitenanfang

panoyun

Fortgeschrittener

Beiträge: 234

Wohnort: Somalia

11

Montag, 13. März 2023, 11:23

OK

Zum Seitenanfang

$»indexofrefraction« ist offline$ indexofrefraction

Profi

12

Montag, 13. März 2023, 14:41

just FYI, this is not a very safe method.
in unloadplugin you should UNLOAD everything.
that means destroy any threejs content, free resources, disable active events and renderloops, etc

zFilter plugin -- zFlare plugin -- zSnapshot plugin

Zum Seitenanfang

Anfänger

13

Dienstag, 14. März 2023, 03:26

Zitat von »indexofrefraction«

just FYI, this is not a very safe method.
in unloadplugin you should UNLOAD everything.
that means destroy any threejs content, free resources, disable active events and renderloops, etc

thank you very much

Woody

KEEP MOVING FORWARD *thumbup*

Zum Seitenanfang

panoyun

Fortgeschrittener

Beiträge: 234

Wohnort: Somalia

14

Dienstag, 14. März 2023, 04:12

Can you share your case to see what kind of results it is?

Zum Seitenanfang

$»indexofrefraction« ist offline$ indexofrefraction

Profi