You are not logged in.

Dear visitor, welcome to Forum. If this is your first visit here, please read the Help. It explains in detail how this page works. To use all features of this page, you should consider registering. Please use the registration form, to register here or read more information about the registration process. If you are already registered, please login here.


Sunday, December 23rd 2018, 3:40pm

where are you defined y and with what ?
i have created a do_camera_object_hittest based on do_object_hittest when i rollover rollout object !

the objects are a shape with extruding options * by number of hotspots (and replace them) !

its a simple raycast from camera not from mouse :)

This post has been edited 2 times, last edit by "MrTie" (Dec 23rd 2018, 4:04pm)


Wednesday, January 2nd 2019, 12:21pm

Oh my mistake. The value of y worked only by accident because it was defined as some random function.
It is wierd because no matter what numerical value I set it mess up the position, but if you set it to NaN or non-numerical string it works.
I use this now: renderer.setViewport(0, "-", sw,sh); and it works perfectly. However, I don't really understand what black magic is this.


Thursday, January 3rd 2019, 8:58am

true, with NaN , it's ok !! Thank you ! :)



Posts: 385

Location: Australia

  • Send private message


Thursday, January 10th 2019, 12:16pm

Thanks for all this information. Really useful *thumbsup*


Friday, February 22nd 2019, 10:22am

I came across this plugin for importing 3D models in krpano. However, although I have followed the example and the documentation, I add 3D models (js and json) to the three.krpanoplugin.js but they do not appear anywhere. Once I switch back to one of the 3D models in the original example (i.e. the monster.js) it appears in the panorama without any problems.

I would be very grateful if you could please advise and share your thoughts as to what can be wrong and the way forward?

Many thanks in advance.



Alexey Tkachenko


Posts: 770

Location: Russian Federation

Occupation: Interpreting, Building virtual tours

  • Send private message


Wednesday, July 31st 2019, 10:01am

Hi guys!

Does anyone has a successfull example of adding glTF model to Krpano? With the latest Threejs version.



Friday, September 6th 2019, 4:42pm

How did you change the plugin to integrate .obj or .glb?

Hey all,

I'm using krpano just a few days now, but since I found helpful information in this forum a few times, I thought I should share my findings on this topic.

My goal was to insert several 3D models into a krpano panorama. I found the original version from the first post just work fine, but obviously you would want a more recent three.js version for two reasons:
  • Better support and documentation (pretty hard to find how things were done with three.js back with that specific version...)
  • Be able to load other models than just json with three.js GLTF or OBJ loaders (see posts from ibrews and virtualpete above)

So, I went ahead and replaced the three.min.js from the plugin (v71) with the latest (v98). Several problems occured:
  • A) Some of the syntax used in three.krpanoplugin.js is outdated so the JS models won't load and the browser console is flooded with warnings.
  • B) Screen will get black at some spots when turning the pano, or, even worse, depending on the object positioning, it will be black most of the time

Now, these were my steps towards a working three.krpanoplugin.js:
  1. Replace the deprecated "renderer.resetGLState();" with "renderer.state.reset();" in line 177. Console looks much clearer now.
  2. To ease the troubleshooting and as I didn't need the json models anyway, I first removed those by commenting out lines 406-408. That will just leave the wooden box in place for now. As the box is no model but a "native" three.js object, it made troubleshooting a bit easier.
  3. At this point, the only warning left in the console was "THREE.ImageUtils.loadTexture has been deprecated. Use THREE.TextureLoader() instead". That's an easy one. Just use the new three.js way of creating a box with texture. Replace line 411

    Source code

    "box = new THREE.Mesh(new THREE.BoxGeometry(500,500,500), new THREE.MeshBasicMaterial({map:THREE.ImageUtils.loadTexture(resolve_url_path("../models/Textures/box.jpg"))}));")


    Source code

    var texture = new THREE.TextureLoader().load( krpano.parsepath("%SWFPATH%/box.jpg") ); // Adjust path if needed!
    var material = new THREE.MeshBasicMaterial( { map: texture } );
    var geometry = new THREE.BoxBufferGeometry( 500, 500, 500 );
    box = new THREE.Mesh( geometry, material );

    Console should be clear now, Problem A solved.
  4. To solve problem B, I found adding

    Source code

    obj.frustumCulled = false;
    to the object properties works. So I added it to the assign_object_properties function, i.e. in line 335. It might not be the cleanest/best way so I'm looking forward to your suggestions. Problem is, that when the view get's turned to where no three.js object is visible, it stops rendering altogether. "frustumCulled = false" just makes the rendering continue although the object is not in the view.

From here on, everything worked and I could work towards adding loaders for other model types. I copied GLTFLoader.js, MTLLoader.js and OBLoader.js from the three.js built into the folder, then loaded them by changing line 39 to:

Source code

load_scripts(["three.min.js","GLTFLoader.js","MTLLoader.js","OBJLoader.js"], start);

I can now happily add all kinds of obj/mtl and gltf/glb files.
Just be careful with adding random models downloaded somewhere: I highly recommend starting with the sample ones from the three.js examples folder, otherwise you might spend a lot of time troubleshooting (like me) when it's just a broken model file.

The only thing I couldn't yet manage is to use the assign_object_properties function that comes with the plugin for the new models. That would be cool so one could assign positions and actions more conveniently. Help appreciated.

My version incl. the loaders and some demo models is here, so you can test it if you want to:
I wanted to upload it here but it's too large.

My additions in the krpanoplugin.js are commented with "JJ" and I left all original code in place.(Remember the restrictions when running this locally on your computer.)
Pretty long first post *unsure*
Happy to read your comments/corrections!

Hi JJ,

how did you do that? I'm trying now since 2 days, but until now with no success *huh* . Would be very nice if you could tell me what to do. I load the gltfLoader-script, but afterwards I don't know what to do...

if anyone else has a solution, please let me know *smile*

Thanks and best regards




Posts: 342

Location: La Ceja, Colombia

Occupation: photographer

  • Send private message


Friday, September 6th 2019, 11:51pm

the link does not work


Monday, September 16th 2019, 5:11am

How to set the correct rx ry rz with quaternion to keep it consistent with the local rotation of three.js *confused*


Thursday, January 9th 2020, 3:54pm

can this three js plugin work with the new 1.20 Krpano in depth map?


Tuesday, March 24th 2020, 5:50pm

I just did a rough test.
The 3d object appears but it moves "with" the cameraposition instead of being attached to the 3d space.

I added renderer.xr.enabled = true; in the function start(), but it did not help.

@Klaus: Any hints? :-)

Kind regards


Tuesday, March 24th 2020, 5:58pm

how did you do that? I'm trying now since 2 days, but until now with no success . Would be very nice if you could tell me what to do. I load the gltfLoader-script, but afterwards I don't know what to do...
I added this at the begining of the function build_scene() to import "models/table.gltf":

Source code

//Import Table	 
const gltfLoader = new THREE.GLTFLoader();
gltfLoader.load('models/table.gltf', (gltf) => {	 
const table = gltf.scene;				



Posts: 5

Location: iran

Occupation: tabriz

  • Send private message


Sunday, March 29th 2020, 12:38am


thats goog,thank you
i really need this and i cant use 3d object before than


Thursday, September 17th 2020, 8:15pm


This post has been edited 1 times, last edit by "" (Sep 29th 2020, 7:09am)


Sunday, May 16th 2021, 10:56pm

Is that possible to insert 3D model into KRPano depthmap panorama with ability to walk around the model by txtz?


Saturday, July 24th 2021, 6:38am

Upgrade from r102 to r103+, raycaster is reversed before and after, resulting in incorrect intersectObjects results

R102 is correct:

R111 is wrong:

Posts: 107

Location: Russia, Komi republic, Uhta

  • Send private message


Saturday, July 24th 2021, 12:31pm

how do you use it and what for?


Sunday, July 25th 2021, 5:05am

After testing, I found that the raycaster is reversed due to the value created by camera projection_matrix, but I don’t know anything about projection_matrix

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

var 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;
R102 is correct:
R111 is wrong:



Posts: 107

Location: South Korea

Occupation: South Korea

  • Send private message


Sunday, January 9th 2022, 8:42am

After testing, I found that the raycaster is reversed due to the value created by camera projection_matrix, but I don’t know anything about projection_matrix

I only removed minus(-) in which "-mouse_y" in the line of raycatser's ray direction set as like the below, it show the right direction.

Source code

 camera_hittest_raycaster.ray.direction.set(mouse_x, mouse_y, 1.0).unproject(camera).normalize(); 

but the intersection is not sill working :(
even it's not directing the correct way with the mouse pointer.

my test resource is in the link , and can see the live source in the link
please check them out, and anyone got some ideas, comments, or advices please let me know :)

Good luck with ThreeJs


Friday, May 27th 2022, 6:54pm

Hibt es Aussicht auf ein Update dieses Plugins?
Mit neueren Versionen von three.js scheint es Probleme zu geben:

[.WebGL-000075DE003C7800] GL_INVALID_OPERATION: Insufficient buffer size.

Beste Grüße

Similar threads