I've put together a document integrating three.js with Hype. Using some of Hype's elements, it shows how to control some actions of the object being shown. It's not limited to these actions. These are just to highlight a process of tapping into the THREE API to control some of its actions.
Enjoy!
threeJS.hype.zip (216.7 KB) EDIT: I have marked the following as a solution to a more up to date way to use Three JS within Hype as this was quite an old thread. Credit to Drew Bullen
Hi All, I know it has been a while this thread, but it has been really useful for me the whole of this weekend, but I'm stuck and wonder if anybody could help please?
I downloaded DBear's sample file, I feel I know every inch of this file inside out now and have been back and forth from the ThreeJS website resources and back.
I'm not a coder, but can hack away like doing a crossword, see familiar patterns change variables etc, what I have managed to do is:
Add another OBJ file
Change camera position, lighting, Alpha for the background, set contious rotation.
What I can't do and am really struggling with, so thought I'd ask;
I can't get a different materials image to attach. The OBJ always shows untextured no matter what I do. Futher to this any changes to the texture code from the ThreeJS resources results in the OBJ itself being removed from view completely. How do I add another JPG image, even if it is just a blank colour square to colour the model a single colour.
Ideally though what I do want to be able to do more than using a JPG image is to attach a MTL texture. I've tried everything, hours and hours all weekend swapping code, checking, double checking, testing but any changes here just results in nothing at all showing. Any ideas how to do this?
I've attached my project showing what I have done and the new textures (I can't add) in the resources as JPG and MTL. Sorry I'm not a coder, just good at getting the jist of what is going on in the code but then get really stuck.
I don't really know three.js, but I can say that in the document you sent, this line is definitely wrong in your init() function and seems related to the texture problem you are reporting:
loader.load( '${resourcesFolderName}/BakedTexturejpg', function ( image ) {
First, there is no BakedTexturejpg file in the Hype document's Resources Library. You'd need to add that. Second, if you did, it would undoubtedly have a dot before the extension: BakedTexture.jpg.
Thanks Jonathon, to be honest I think I have uploaded the wrong file, I'll upload again, the bakedtexturejpg is the wrong image (even with the incorrect extension), thanks for pointing that out, with the this version the image is appended correctly, but will not wrap as a material. I've tried all manner of different code snippets and changes, the code as it stands in this version is the same as the original one by DBear.
I verified that the texture is being loaded and set so nothing sticks out to me anymore as an obvious problem, but I don't really know enough about three.js to know where it is going wrong.
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.
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.
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.
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?
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.
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.
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.
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 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 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
