0

In ThreeJS I can create objects like this:

const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );

Of course, this is a bit hard to visualise, so we can use the https://threejs.org/editor/

Maybe I'm missing something but I can't find a way to convert a model created in the editor to javascript directly? I only see options for exporting to JSON or 3D object files. (see screenshot).

My end goal is to be able to create the same object lots of times by code, with little variations. I just use the editor to get a starting point.

block

Kokodoko
  • 26,167
  • 33
  • 120
  • 197

1 Answers1

0
  1. Select the object you wish to export
  2. Click Export modal
  3. Use a THREE.ObjectLoader() to load that object
  4. Add the object to the scene: scene.add(object)
0stone0
  • 34,288
  • 4
  • 39
  • 64
  • Thanks, but I'm looking for the actual javascript to create the object, like those three lines of code in the first part of my question. Is this not possible? – Kokodoko May 31 '23 at 13:36
  • That's not how it's suppost to be used. You could manually set all those properties you'll find in the JSON, but not a simple export way to get js code. Then using the Loader is the most straightforward way – 0stone0 May 31 '23 at 13:37
  • The reason I ask is that I want to generate these models by code with little variations. I just use the editor to get a starting point for the geometry. – Kokodoko May 31 '23 at 13:44
  • Then the only option would be to make a function that will return those geometries with the changes you'd like. However, if you export that JSOn once, then you can alter the json and pass those to the loader – 0stone0 May 31 '23 at 13:48
  • @Kokodoko It doesn't export code, though. You can load the JSON w/ a function and provide override params for the props you care about. – Dave Newton May 31 '23 at 13:48
  • OK, I'm loading the object as JSON now, but how can I possibly change the color or other settings of that object after loading? – Kokodoko Jun 01 '23 at 11:20
  • Using the loader? Then you can change it before you load it, or you could change [it on runtime](https://stackoverflow.com/questions/12564156/three-js-change-material-on-runtime) – 0stone0 Jun 01 '23 at 11:31
  • I found it out, you can parse the json and then edit the contents with: `let bl = loader.parse(jsonData); console.log(bl.children[0].material.color);`, then you can set the `r,g,b` values. – Kokodoko Jun 01 '23 at 11:44