How to remove or disable plugin when change scene?

yenph · March 11, 2023 at 5:19 PM

I added plugin ThreeJs to show model 3D , but the problem is it show model 3d in all scene, i just want it show in a scene, how to do it?
i tried with set(plugin[threejs].visible,false) and removeplugin(threejs) but it's not work

Code

<plugin name="threejs" url="gltfloader.js" keep="true" /><action name="remove">js(console.log("Test"))set(plugin[threejs].visible,false)
</action>
		<scene name="scene_1" title="0" onstart="remove()"  thumburl="panos/1.tiles/thumb.jpg" lat="" lng="" heading="">
		<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>
	<scene name="scene_3" title="2" onstart="" thumburl="panos/3.tiles/thumb.jpg" lat="" lng="" heading="">
		<view hlookat="169.390" vlookat="-16.326" fovtype="MFOV" fov="120.000" maxpixelzoom="2.0" fovmin="70" fovmax="140" limitview="auto" />
		<preview url="panos/3.tiles/preview.jpg" />
		<image type="CUBE" multires="true" tilesize="512">			<level tiledimagewidth="2560" tiledimageheight="2560">				<cube url="panos/3.tiles/%s/l3/%v/l3_%s_%v_%h.jpg" />			</level>			<level tiledimagewidth="1280" tiledimageheight="1280">				<cube url="panos/3.tiles/%s/l2/%v/l2_%s_%v_%h.jpg" />			</level>			<level tiledimagewidth="640" tiledimageheight="640">				<cube url="panos/3.tiles/%s/l1/%v/l1_%s_%v_%h.jpg" />			</level>		</image>		<hotspot name="scene_2" style="hs_circle" ath="-2.235" atv="-3.448" tag="Quảng trường 1" />		<hotspot name="scene_SAN_KHAU" style="hs_circle" ath="170.731" atv="-10.698" tag="Sân khấu" />
	</scene>

Display More

indexofrefraction · March 11, 2023 at 7:21 PM

Code

<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>

Display More

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

yenph · March 12, 2023 at 4:23 AM

Quote from indexofrefraction
Code
put your plugin into the scene and remove keep="true"

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

indexofrefraction · March 12, 2023 at 7:19 AM

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

yenph · March 12, 2023 at 1:04 PM

Quote from indexofrefraction

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

Code

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 );
	}




	




	




}

Display More

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

indexofrefraction · March 12, 2023 at 2:07 PM

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

Code

// 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

yenph · March 12, 2023 at 2:53 PM

Quote from indexofrefraction

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

Code

// 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

Code

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)

Display More

i tried add that code but have this problem

yenph · March 12, 2023 at 5:18 PM

problem solved, i try add

Code

if(krpano !== null) { }

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

luo jian chao · March 13, 2023 at 4:00 AM

if(krpano !== null) { }

put this code in that place

yenph · March 13, 2023 at 8:44 AM

Quote from panoyun

if(krpano !== null) { }
put this code in that place

Code

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();
		}
	}

Display More

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

luo jian chao · March 13, 2023 at 11:23 AM

OK

indexofrefraction · March 13, 2023 at 2:41 PM

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

yenph · March 14, 2023 at 3:26 AM

Quote from 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

luo jian chao · March 14, 2023 at 4:12 AM

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

indexofrefraction · March 14, 2023 at 9:50 AM

maybe to add...

if your plugin is in a scene it gets (re-)initialized every time you enter the scene
and with keep=false removed using unloadplugin() when you leave.
a proper initialization and unloading is very important.

if you for example would do not remove an installed renderloop,
you would get a 2nd one when you enter the scene again.
such things can hog down the performance and your devices memory etc.

by the way
plugin[..].visible does not work in this case, because the plugin doesn't handle it.
visible is a krpano attribute, it would need special code to your hide threejs stuff

in general combining threejs with krpano is complicated and not ideal for performance
it is maybe better to wait for 3d object support in krpano itself

ps. yes it would be nice to see your online example

yenph · March 15, 2023 at 3:16 AM

I'm just doing it on localhost at the moment :(

cuongdevjs · March 31, 2023 at 6:35 AM

Hi yenph. I tried with your code, but the event "ondown" doesn't fire in glb model. Can you give me some instructions?

Participate now!