Параметризация и редактирование модели с использованием ThreeJS или X3DOM в браузере

Question

Я использую ThreeJs для рендеринга некоторых файлов STL в браузере. Я пытаюсь выяснить, могу ли я добавить параметры к этим моделям, чтобы я мог редактировать эти модели, используя ThreeJs или X3DOM. Например, у меня есть куб, и я хочу добавить текстовый параметр в этот куб. Когда текстовый параметр передается в ThreeJS, он вставляет текст в куб в определенном месте.

Я не против преобразования файлов STL в Js-файл модели ThreeJS или X3D-файлы, если я могу параметризовать рендеринг для добавления текста в базовую структуру.

Я хочу знать, имел ли кто-нибудь опыт такого рода 3D-параметризации.

1. Это возможно в ThreeJS или X3DOM?
2. Если да, то есть ли какая-либо документация, которую я мог бы использовать для достижения этой цели?

Если эти библиотеки не могут обработать этот случай, то есть ли другие библиотеки, которые могут достичь того же?

Изменить Мой вопрос больше о том, как я могу добавить параметры к самой модели. Можем ли мы иметь параметры в самих моделях ThreeJS, которые ThreeJS понимает "из коробки"? Позвольте мне игнорировать текстовый пример, если я рассмотрю простой куб в файле модели, есть ли способ заставить Threejs понимать длину его стороны как параметр из модели, и любые изменения этого параметра автоматически отражаются в визуализации. Т.е., если я изменю длину стороны с 1 на 3, Threejs рендерит куб большего размера.

Answer 1

Изучите средство просмотра va3c, в котором есть опции для открытия файлов из REVIT, Grasshopper и т. Д.

Вы можете сначала открыть свои файлы в Rhino + GH, затем создать необходимые параметры и затем импортировать их с помощью va3c.

Это догадка, и я не могу попробовать, пока вы не предоставите фактический файл с подробной информацией о сценарии использования.

Скажи мне, если это работает.;)

Answer 2

Я не уверен, что он отвечает на ваш вопрос, но лично я создал бы подкласс пустого трехмерного объекта и применил бы ваши эффекты программно после загрузки базовой модели.

Вот как я делаю с three.js (в идеале, это в отдельном файле):

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;

Затем вы можете создать такой объект и добавить его в вашу сцену:

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

Это может быть не самый простой способ сделать это, но я думаю, что он предлагает хорошую возможность многократного использования в долгосрочной перспективе.