Three.js and Jquery in openhybrid

web UI
1

Hi!

I have upload the html with Jquery and other html with Three.js onto openhybrid. But it seems that Jquery function can not be used. Also the 3d model by three.js can not be displayed in the reality editor app. Do you have any tips for how to deal with those tasks?

Thanks in advance!

2

Hi,

I’m using jquery, but usage is very minimal and it works. This is what I’ve

the directory structure:

./index.html
./js
./js/jquery-3.1.1.min.js

In index.html, within

<head>
<script src="js/jquery-3.1.1.min.js"></script>
</head>

Jacob

3

Hi @ejactho ! Thanks for you reply! I tried the Jquery again and it works. Thank you!

BTW, do you have any experience of displaying 3d model in Reality Editor by Three.js?

4

Hi @valentin !

I am trying to load a 3d model to Reality Editor, so I simply upload a html and three.js file to openhybrid server. However, the 3d model seems not work because there is no 3d model displayed in reality editor. Am I right to approaching the 3d model display in reality editor? Can you teach me some tips of how to deal with this task?

FYI: My html and three.js can work well in the browser in computer and Ipad can run three.js example in Safari. Also the connection between Reality Editor and Openhybrid works correct.

Thanks!!!

5

We do have a nice demo for this but have not made it public so far.
Let me check where we have the source to share it with you guys.

It works super nicely.

1 Like
6

OK! It would be great if you share this example with us. It will help a lot! Thanks!!

7

Hi @JC12! I’ve been working with @valentin on the Reality Editor for awhile now, and I put together an example three.js interface, based upon the sea3d example from the three.js website:
https://threejs.org/examples/?q=sea#webgl_loader_sea3d

You can download the interface here: https://github.com/openhybrid/HybridObject/tree/master/examples/threejsTurtle

The index.html file is well documented, but here are a few key things to make three.js work with the Reality Editor:

  • Instead letting the interface transform like usual, you need to pass the Hybrid Object’s transformation matrix directly into the three.js renderer. You can do this by making the interface fullscreen and subscribing to the transformation matrix.
    hybridObj = new HybridObject(); hybridObj.setFullScreenOn(); hybridObj.subscribeToMatrix();

  • You need to set matrixAutoUpdate = false; on your three.js object so that you can manually set its transformation to the matrix received from the Hybrid Object, rather than it relying on its position, rotation, and scale properties.

  • The three.js camera’s projectionMatrix should be set to the Hybrid Object’s projection matrix, and the three.js object’s matrix should be set to the modelview matrix

Let me know how it goes! I’d love to see what you’re able to create.

  • Ben
2 Likes