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)