Parameterizing and editing a model using ThreeJS or X3DOM in the browser

Question

I am using ThreeJs to render some STL files in the browser. I am trying to figure out if I can add parameters to these models, so that I can edit these models using ThreeJs or X3DOM. For example I have a cube and I want to add a text parameter to this cube. When the text parameter is passed to ThreeJS, it embosses the text on the cube at a specific location.

I don't mind converting the STL files to the ThreeJS model Js file or X3D files as long as I can parameterize the rendering to add text to the basic structure.

I want to know if anyone has had experience doing this kind of 3D parameterization.

Is this possible in ThreeJS or X3DOM?
If yes, then is there any documentation that I could use to achieve this?

If these libraries cannot handle this case, then are there any other libraries which can achieve the same?

Edit My question is more about how I can add parameters to the model itself. Can we have parameters in ThreeJS models themselves, which ThreeJS understands out of the box. Let me ignore the text example, if I consider a simple cube in a model file, is there a way to make Threejs understand its side length as param from the model, and any changes to this param automatically gets reflected into the visualization. I.e. IF I change the side length from 1 to 3, Threejs renders a larger cube.

score 0 · Answer 1 · answered Nov 08 '13 at 15:05

I'm not sure it answers your question, but personally I would create a subclass of an empty 3D object, and apply your effects programmatically, after the base model is loaded.

Here's how I do with three.js (ideally, this is in a separated file) :

var EmbossedCube = function( text, onLoaded ) {
  THREE.Object3D.apply(this);

  var self = this;
  var loader = new THREE.STLLoader();

  loader.addEventListener( 'load', function ( event ) {
    var material = new THREE.MeshPhongMaterial( { ambient: 0xff5533 } );

    // apply effects on the material, or the geometry
    // according to `text`

    var mesh = new THREE.Mesh( event.content, material );

    // transform the mesh locally if needed

    self.add( mesh );
    onLoaded && onLoaded( self );
  } );

  loader.load( './model.stl' );
};
EmbossedCube.prototype = Object.create( THREE.Object3D.prototype );

// methods of EmbossedCube

EmbossedCube.prototype.constructor = THREE.Object3D;

Then you can create such an object, and add it to your scene:

var cube = new EmbossedCube("beep", function(obj){
  // you can translate/rotate the object if needed
  scene.add( obj );
});

It could be not the simplest way to do it, but I think it offers a good reusability on the long term.

Thanks for the answer Vincent. However my question is more about how I can add parameters to the model itself. Can we have parameters in ThreeJS models themselves, which ThreeJS understands out of the box. Let me ignore the text example, if I consider a simple cube in a model file, is there a way to make Threejs understand its side length as param from the model, and any changes to this param automatically gets reflected into the visualization. I.e. IF I change the side length from 1 to 3, Threejs renders a larger cube. — Saurabh, Nov 12 '13 at 18:11
I'm think you try to mix _format_ and _process_ :-| If what you want is an url that can output customized things, I think you need a server-side process which modify a base model according to arguments. Hope it makes sense. — vincent, Nov 12 '13 at 19:14
That makes sense. I was hoping to push this to the client side using Threejs. :) I am hoping to do something like http://joostn.github.io/OpenJsCad/ OpenJsCad is great, but I like the rendering performance of ThreeJs and X3Dom better. Hence this question wrt the two popular frameworks — Saurabh, Nov 12 '13 at 21:40

score 0 · Answer 2 · answered Apr 05 '15 at 16:27

Explore the va3c viewer, which has options for opening files from REVIT, grasshopper etc.

You might try opening your files first in Rhino + GH, then creating those parameters that you need and then importing it using va3c.

This is a hunch and I cannot try until you give an actual file with details about the usecase.

Tell me if this works. ;)

Parameterizing and editing a model using ThreeJS or X3DOM in the browser

2 Answers2