For a project I am looking into nicer ocean simulations than the one I have made in Needle and found some great three.js examples of some oceans - I am thinking of working on a sample scene using an ocean from this GitHub - Spiri0/Threejs-WebGPU-IFFT-Ocean-V2
How would you recommend I start with integrating this into Needle? I was looking into packaging it up into a module I could import but I hit all sorts of Browserify/Babel issues I couldn’t get past so I am trying to bring the files into my Needle project and referencing them directly from a .ts file as an import. Is this the right way to go about it?
To integrate the Three.js ocean simulation from the repository into your Needle project, you can follow these steps:
Set up your Needle Project:
Ensure your Needle Engine project is set up properly with the necessary dependencies like Three.js. Check your package.json to include relevant packages like @needle-tools/engine and ensure Three.js is correctly specified.
Import Three.js Modules:
As Needle Engine utilizes Three.js, you can import Three.js modules directly. Ensure Three.js is included in your node_modules, which should be configured in your package.json (see the documentation).
Integrate External Code:
Integrate the ocean simulation by directly copying the relevant JavaScript/TypeScript modules into your Needle project. You can place these under a dedicated directory like src/ocean.
Resolve Babel/Browserify Issues:
Since you’re encountering issues with these tools, ensure your project setup doesn’t rely heavily on modules not compatible with ES modules. Vite.js, which Needle uses, typically manages ES module imports smoothly, so ensure your configuration does not conflict with Vite’s setup (see the documentation).
Reference Ocean Code in TypeScript:
Create an entry point TypeScript file (e.g., OceanScene.ts) where you import the ocean component. Use it to setup and initialize the ocean rendering using Needle’s hooks like onStart or onUpdate.
Example:
import { onStart } from "@needle-tools/engine";
import { OceanComponent } from "./ocean/OceanComponent"; // adjust according to your folder structure
onStart(context => {
const ocean = new OceanComponent();
context.scene.add(ocean);
});
Testing and Debugging:
Test the integration within Needle to identify any potential issues. Make sure the additional scripts and modules are correctly linked and function smoothly with your main scene.
Optimization and Enhancement:
After a successful integration, consider optimizing the rendering or enhancing it by incorporating Needle components or effects that can complement your ocean simulation.
Feel free to explore the Needle Engine documentation or existing samples to get more insights on how custom components and scenes are set up (see scripting examples) (see the documentation).
24 replies left thread_j2aowEMvOMKp6ogHgQU0qX48 Reply to this message to continue the conversation
@marwie1 I noticed while trying to integrate this example, the “@types/three”: “0.162.0”, version is lower than the example I want to use which is “three”: “^0.168.0”. Due to this, there are missing folders it needs like node_modules\three\src\nodes\tsl and maybe also WebGPU stuff I can’t access, is there any plan to update the three.js version in any upcoming Needle versions so I can test out this ocean sample in Needle?
Hi, yes we’re planning to upgrade three.js as part of the next major version - not the very first release however - I don’t have an exact ETA at this point but either end of this month or in january