Thanks Jonathan, that is a huge help, believe me as I'm going round in circles with this one, thank you, it indicates that the problem must be with the material added, I'm pretty savvy with 3D, but I'm guessing then it is a texture/UV issue with the 3D export with my software and can therefore stop chasing code that I'm not great with and focus more on the 3D exports as the issue. Thanks again.
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)
Updated version: Three.js is revised regularly and normally isn't backwardly compatible so I've included updated (3/29/23) project files here that use three.js-r150:
ThreeJSinHype.hype.zip (336.7 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)
Updated version:
ThreeJSinHype_MultipeShapeswAnimation.hype.zip (350.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)
Updated version:
ThreejsCamera_wOrbitControlsandAmbientLight.hype.zip (358.6 KB)
The fourth video in this series goes into more detail regarding how to construct an animation loop in Three.js. It also shows how to use the performance monitor included with Three.js.
The code example mentioned in the video is:
ThreeJSinHype_HelloFrames.hype.zip (353.6 KB)
The next video in this series describes how to use textures to add images to Three.js shape primitives. You can find this video here: Hello Textures - YouTube
The code example mentioned in the video is:
ThreeJSinHype_HelloTextures.hype.zip (625.2 KB)
The latest video in this series describes how to use a render-on-demand strategy with Three.js worlds included in Hype projects. You can find this video here: Render-On-Demand: How to update Three.js worlds in Hype projects - YouTube
The code example mentioned in the video is:
RenderOnDemand_wResizer.hype.zip (268.0 KB)
10 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?
Awesome, time to get my Blender skills up to standard and make 3D ads 
1 Like
Very interesting, although I already have enough with 2D animation. 
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 
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