Quoted from "-JJ-"

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

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

   	Source code
   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:

	Source code
1	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: 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!

Quoted from "lara.beer"

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

	Source code
1 2 3 4 5 6	//Import Table const gltfLoader = new THREE.GLTFLoader(); gltfLoader.load('models/table.gltf', (gltf) => { const table = gltf.scene; scene.add(table); });

Quoted from "xupeng"

THREE.js
R102 is correct：

Quoted from "xupeng"

R111 is wrong:

Quoted from "xupeng"

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

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