Hype + three.js

I should say I can't rule out anything, about all I did was add some logging in the .load calls for the .jpg and .obj files and made sure the values that were being set looked "sane" to me.

You may want to try some simple three.js examples in just plain HTML code independent of Hype at first to better isolate what may or may not be working.

Thanks again, will try that.

Jonathan sorry could I ask another question, both DBear's example and my own example preview in the browser fine, but when exported as HTML5 as a standard html document and enclosing folder, when the exported HTML document is opened in a browser, the container element outline displays but the content doesn't.

I've even uploaded to webspace in case it requires upload to work but it is still the same. I've exported quite a lot of Hype documents with varying complexity in the past but have never had this occur, I've also tried many different permutations of advanceed export to see if it makes a difference.

There appears to be a difference to the Hype generated preview in the browser and the exported HTML in a browser. This has only come to light on export as previously I have been working on this in preview only.

Any ideas?

Thanks

It's ok sorted it now, it's CORS issue, I should have realised that, was just getting a bit bleary eyed with it as it has been a huge learning curve so when facing another dead end you start getting used to overthinking the problem, when really I should have gone back to basics.

Yeah, CORS is what I was going to say was probably the issue. There's a big difference in opening files with a file:/// URL vs. a http:// or https:// one. I believe Chrome, Firefox, and Safari all also have some nuance in how they treat it as well.

In fact, this is the main reason why previewing from Hype uses a http:// URL that connects to a webserver embedded within Hype.

If you're just looking for testing locally, I will typically setup a quick server using this python terminal command (first navigating to the folder where the .html file is):

python -m SimpleHTTPServer

Then I preview at http://127.0.0.1:8000. For heavierweight previewing I also will use MAMP.

Thanks Jonathan, that's a really good top tip, many thanks.

1 Like

Hi
I have tried the file and it works fine.
I managed to change some stuff but I can't get my head around how to get it to work on a touch device. I have read the documentation but I can't get it to work?

Anyone have any idea?

The example DBear posted follows the mouse, so to work on touch devices you would need to listen to drag movements (touch + drag). This example uses all methods to control the box.

Hi Daniel
Thanks for your answer. But the link to stack overflow Is broken.
And the example with the cube and the source code is to hard for me to follow since I am not a programmer.
Is there a way to just ad the control part to DBears example file? I tried to change the threeJS library to the one with all the controls but with no luck.

Thanks
Rickard

Since I've been doing a few three.js projects lately, I thought I'd weigh in here with a more update-to-date way of integrating this library into Hype. This method (i.e., ES6 modules) reflects the way three.js (and JavaScript) have evolved lately.

I made a short explainer video to explain this approach. You can find it here.

The code example mentioned in the video is: ThreeJSinHype.hype.zip (336.6 KB)

I have created a follow-up video that describes how to customize and animate three.js shapes in Hype projects. You can find it here.

The code example mentioned in the video is:
ThreejsShapesinHypewAnimation.hype.zip (342.8 KB)

I have created a further video that describes how to position and animate a three.js camera in Hype projects using the Orbit Controls plugin. You can find it here.

The code example mentioned in the video is:
ThreejsCamera_wOrbitControlsandAmbientLight.hype.zip (351.5 KB)

9 Likes

Bummer the library is so huge, would of been so dope to use this in Display banners.
Do you happen to know if Google accepts Three.js as CDN?

Yes: Hosted Libraries  |  Google Developers

1 Like

Awesome, time to get my Blender skills up to standard and make 3D ads :smile:

1 Like

Very interesting, although I already have enough with 2D animation. :sweat_smile:

When i export the project to a HTML-folder I get the CORS problem. Is there an easy way to fix this? I read about creating a proxy server but for me that is not an easy way :slight_smile:

for easy local testing you can use:

1 Like

Ok thanks!
But what about when i deliver to customer?
Is there an easy way to fix this problem, or is it a server configuration?

needs to run on a serverenvironment

Ahaa so if I run it on a server it would work fine?
Sorry for lame question.

Taking a course in Javascript right now so hopefully I don't need to ask som many "easy" questions later on :slight_smile:

1 Like