I'm trying to get started with this, but for the life of me I can't find a way to convert my 3D files to .js

Options seem to be:
.json and .jd and .obj

Are those possible to use, or am I missing something? Thanks.

I to have this question. I have an .obj file that I want to use which is a 3d dolls house of a house than I did a 360 tour. Is it possible?

Done

When i update three js to latest , krpano webgl generates black screen (no error in console.log),

Is there any plan to update krpano for latest three js ?

Hi)

Is there way to call "load_object_json" from outside the Krpano three js plugin? I tried calling it from Krpano XML JavaScript action and it fails. I want to add some three js models dynamically.

Zitat von »Alexey Tkachenko«

Hi)

Is there way to call "load_object_json" from outside the Krpano three js plugin? I tried calling it from Krpano XML JavaScript action and it fails. I want to add some three js models dynamically.

krpano.set("plugin[threejs].action_to_call", action_to_call);

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
   

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

   
   with
   

   	Quellcode
   1 2 3 4	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

   	Quellcode
   1	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:


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: https://www.sendspace.com/file/t9crta
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
Happy to read your comments/corrections!

WOW! .. dude so nice that you are sharing this!!

No problem. Let me know if it works for you
I'd love to see some other examples of this in action. Still working on my case.

I just recognized loading GLTF models doesn't work with IE, but there's an easy way around this: https://github.com/mrdoob/three.js/issues/12683

Zitat von »-JJ-«

No problem. Let me know if it works for you
I'd love to see some other examples of this in action. Still working on my case.

I just recognized loading GLTF models doesn't work with IE, but there's an easy way around this: https://github.com/mrdoob/three.js/issues/12683

good job -JJ- porting the example to a new version of THREE. However, just now when I tested your version, I noticed there is an issue when viewing the 3D models in WebVR - the models doesn't stick to their place and moves around. In the older version of three.js (original example) it seems to work normally as expected. Do you know what could be causing this issue?

Hey,
nice to hear somebody else can make use of it

Regarding the "moving around": I'm pretty sure that's a question of positioning and scaling the models. In my example you can see the small Cesium Man floating around a lot more than the other models.
If you play around with it a bit, you'll find better settings. But: I found "wrong" positions, i.e. too far away from the cam etc., may also break the pano.
I also found out how to use the original "assign_object_properties" function. You can basically add the models to an Object3D group and then give that as the first parameter to the function. This way you can position the models the krpano way again, assign them krpano actions etc.
I'm also still working on this so there might be a more advanced example with all my findings some day.

Have fun!

-JJ-

Edit: I just remembered that I saw other, not just the Three.js, plugins have similiar issues with small "movement" of hotspots/objects, the circle hotspot one for example. So
it might not be a matter of positioning alone, but good settings help to reduce it.

Thanks for the reply. I don't think it's a problem of positioning since even the box moves and there is no change of the camera nor this object position, right? It also crops/hides the model if you tilt the VR down (see the picture)


I'll try to look into what could be causing this issue.

Furthermore, I would love to start extending on this idea and implement more features into VR, since I am really missing the possibility to display pictures, texts, videos and iframes in webgl. I think an easy way to display pictures, texts and video would be to simply create "pseudo 3D" object and use the desired texture, right? I also came to this topic of embedding the HTML/DOM content using CSS3D, but currently have no idea how to solve the 'stereoscopic' rendering for VR: http://learningthreejs.com/blog/2013/04/…html-and-webgl/

Aah... sorry. I missed the VR part and just checked the normal view. There are slight movements as well, but not comparible to the ones in VR.
In this case I can just confirm it also happens if I apply the krpano style positioning via assign_object_properties. If I find out more I'll keep you posted.

By the trial and error I managed to track that the undesired shifting in VR first occur in Three v86. In v85 it behaves normally (except the dark screen). But I have no idea which commit is causing this. I will try to play with this later.

Hi, guys!

Granton, thanks for the hint, it works! I managed to add models dynamically by clicking buttons (layers) from the XML.

JJ, thanks a lot for your study! You helped a lot!


However, it seems that Male02 model is not loaded fully (looks buggy). Do you have the same result? I check on Win10, Chrome. (see attached printscreen).

@Alexy are you loading the Male02 using the JSON or OBJ? It seems it doesn't load MTL in your case. Is there any error in the JavaScript console?

Would you mind sharing your snippet for dynamically loading 3D models? Sounds pretty cool!

@jj

I have made my own 3D arrows with three.js and i have an issue in vr with last version : viewport vertical camera bug, any solution ?

( i found that migration guide : https://github.com/mrdoob/three.js/wiki/Migration-Guide)

@Mr.Tie, Amazing, thanks for sharing the migration guide! I discovered the bad positioning of objects is probably caused by renderer.setViewport method, since that is the only change between v84 and v85 where it stopped working.

I tried to change renderer.setViewport(0, 0, sw,sh); to renderer.setViewport(0,-y, sw,sh); for both viewports when VR rendering and Voila! it it works now perfectly!

@Mr.Tie
By the way that picture of Appart 2, is it a 3D object (box/tile) with assigned texture?
How did you get working the VR (click) on the 3D objects?

Thank you