Use three.js (3d objects) inside krpano (with VR support)

I using the newest verion of threejs and loading .gltf model, it's working normally but event on it can't fire, the do_object_hittest always return null. Does anyone have any idea to fix this? Thank you.

[.WebGL-000012B000398E00] GL_INVALID_OPERATION: Insufficient buffer size. Has anyone solved this problem

Good morning we are facing similar issues with three.krpanoplugin and GLTFLoader .

We have the same issue about memory buffer, but also one related to the 3D object.

At first glance, the 3d models are correctly loaded, but if I move all around a scene the 3D objects disappear.
Have you ever experience this issue?
I already tried to change the threejs plugins (https://cdn.jsdelivr.net/npm/three@0.141.0/build/ ), but result does not change.

Any suggestion ?

Quote from marioapt

Good morning we are facing similar issues with three.krpanoplugin and GLTFLoader .

We have the same issue about memory buffer, but also one related to the 3D object.

At first glance, the 3d models are correctly loaded, but if I move all around a scene the 3D objects disappear.
Have you ever experience this issue?
I already tried to change the threejs plugins (https://cdn.jsdelivr.net/npm/three@0.141.0/build/ ), but result does not change.

Any suggestion ?

I can't click on model, can you clicked on it?

Quote from cuongdevjs

I can't click on model, can you clicked on it?

not clickable in vr mode

I added the model to the normal panorama, but I haven't tried it in the depth scene. Next, I will try to load the model in the project with the depth map.

https://deyou360.com/krpobj/index.html

Quote from klaus.krpano

Hi,

here as example an open source krpano plugin that shows how to use the three.js html5 3d rendering engine inside the krpano html5 viewer. The plugin handles everything about the rendering and interaction between krpano and three.js. This includes also stereo-rendering and WebVR support. For user interaction there is also a mouse and touch interface for the 3d objects. For all details please have a look into the plugin source.

krpano Three.JS integration example:

The krpano plugin source code:

https://krpano.com/viewsource.htm…krpanoplugin.js

Download the example:

krpano_three_js_example.zip (2.5 MB)

The current plugin here is mainly intended for developers with Javascript- and 3d-knowledge. All necessary basics for using three.js should be there and I think by using the krpano 'framework' the cross-platform usage of three.js becomes even easier.

Therefore this plugin is open source at the moment, but there are also plans to advance that plugin even more by adding a xml interface and more features. Then it will be possible to use that plugin to load and control 3d models via easily via the krpano xml/action interface.

Best regards,

Klaus

Display More

Thank you so much! I'm newbie. I'm learning how to insert model3d into 360 images. I have a question, hope you all can answer. How to insert a model3d into 360 images with different coordinates ath, atv?

Quote from Eze

I added the model to the normal panorama, but I haven't tried it in the depth scene. Next, I will try to load the model in the project with the depth map.

https://deyou360.com/krpobj/index.html

Is it gltf or js model insert into the panorama. How do you do if it's gltf format? It's great thing if you can share!!!!!1 Thank you so much

Quote from Thanh Cao

Is it gltf or js model insert into the panorama. How do you do if it's gltf format? It's great thing if you can share!!!!!1 Thank you so much

use GLTFLoader to load gltf model and same with other formats

hi there,
is it possible to use gltf 3d model as depthmap for navigation?

If yes, does it makes any benefits compares to compressed .DEPTH format it term of browser performance and speed to load it?

Quote from dia.interactive

is it possible to use gltf 3d model as depthmap for navigation?

no, look at the possible input formats:
https://krpano.com/docu/xml/#depthmap.url

How to load glb model with threejs, anyone have example ?

2023 and I still have error Screen get black at some spots when turning the pano :(

Hi everyone,
I am very new to krpano and I have been trying to get a 3d model (eg. cube) as a part of the 360 image(scene). I have been able to do that with the three.krpanoplugin.js but I also want to make it draggable and also get it synced for multiple users. Any idea how I could achieve this?
Also, I was trying to import Loaders for OBJ and GLTF to use in this plugin, but I haven't been able to. I would really appreciate if someone could help out.

Thanks.

Hello,
I have been using krpano and threejs for a while, and have manged to insert glb objects into 360 scenes and depthmap scenes. With the developpement of depthmaps, there is a depthbuffer attribute for hotspots so that they appear correctly in 3d space relatively to other hotspots or the depthmap object, however it is not the case with threejs objects. The threejs objects always appear in front of hotspot and depthmap regardless of their position.
At first I thought that threejs was a layer that simply appeared on top of the krpano layer, but in some rare cases I was able to have three js objects intersect with a depthmap wall, although not in the right place.
This led me to believe that the intersection between threejs and krpano elements was possible, with a correct z-culling.
My guess is there are parameters to change regarding the depthbuffer, or something with the frustum planes of the cameras, I have tried tweeking parameters in threejs plugin here (in threejs.js) :

var krpano_depthbuffer_scale = 1.0001; // depthbuffer scaling (use ThreeJS defaults: znear=0.1, zfar=2000)
var krpano_depthbuffer_offset = -0.2;

with a small effect but no success,

Here is another guess on where the problemecan be solved, but I don't have enough experience with webgl to know what I'm doing.

function restore_krpano_WebGL_state() {
// console.log("restore_krpano_WebGL_state");
var 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();

renderer.state.reset();
}

function restore_ThreeJS_WebGL_state() {
//console.log("restore_ThreeJS_WebGL_state");
var gl = krpano.webGL.context;

gl.enable(gl.CULL_FACE);
gl.cullFace(gl.BACK);
if (!krpano.image.depthmap.url) {
//enable visibility of 3D Objs in 360 scenes. Else krpano walls will hide the 3D objects.
gl.enable(gl.DEPTH_TEST);
gl.depthFunc(gl.LEQUAL);
gl.clearDepth(1);
gl.clear(gl.DEPTH_BUFFER_BIT);
}
renderer.state.reset();
}

I also tried changing the display.depthrange krpano parameter with no success.

Here is an example of what the problem looks like in a depthmap scene (attached screenshots)
The room is a depthmap, the objects are glb objects displayed with threejs, and the yellow + button is a hotspot.

If anyone has another idea on how to solve this depth compatibility problem please let me know. Don't hesitate to ask questions if you need more precisions. Thanks in advance !

krpano and threejs both use their own render engine, i doubt that what you want is possible

Hello and thank you for answering.

I also thought this was impossible at first, but then I came across situations where threejs objects where occluded by krpano objects. For example, in this scene I have a threejs helmet object behind a wall that is a depthmap wavefront (.obj) object :

If I move to the right so as to have the wall between the camera and the helmet, the expected and ideal behavior would be that the wall hides the helmet which is not the case :

But if I get closer to the wall, the helmets begins to be hidden by the wall (completely hidden if I get close enough but I stayed at a distance where we could see the intersection between the wall and the helmet)



So it seems that an interaction between the two renderers does occur, and my guess is that it is because they both use webGL and maybe share a depthbuffer. If I had more information on the depthfunction of krpano I could maybe tweek threejs to match it and have a nice occlusion, that would be ideal. Otherwise I would have to do everything in threejs...

Keep up your research!) And report back with your findings. It's a useful topic)

Quote from klaus.krpano

In the next krpano release there will be an API that exposes the current projection matrix that is used in krpano, then this could be directly reused for rendering also the threejs content.

If I understand correctly, this would give the ability to load third-party models via Three.js that would overlap with the model loaded via krpano? ))

If so, this is exactly what we've all been waiting for for a long time. It's just like we are waiting for support for the glb format, shaders, model animation))))
Very very very very very very waiting!!!))))))