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
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
I hacked your very helpful example to load an FBX model. No FBX animations yet but that's my aim. Using your guidelines I embedded the necessary three.js modules. I also embedded the FBXLoader usage into World.js since it was call-back based and it was easiest for now. I'm sure someone with more three.js experience could migrate this hackery into a cleaner form. It would be great to have a few more episodes in your "Hello" series to show how to simply load and reuse all the great 3D model assets out there. ThreejsCamera_wOrbitControlsandAmbientLight_LoadingFBX.hype.zip (1.7 MB)
Updated project files for the solution are now included above . These examples use the latest three.js version (r150). Note - three.js isn't normally backwardly compatible so you probably shouldn't use the earlier code example anymore.
. These examples use the latest three.js version (r150). Note - three.js isn't normally backwardly compatible so you probably shouldn't use the earlier code example anymore.