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.
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.
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.
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.
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.
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?
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.
I made a short explainer video to explain this approach. You can find it here.