Измените цвет сетки Three.js, используя gui.dat - PullRequest
Новая
       30

Измените цвет сетки Three.js, используя gui.dat

0 голосов
/ 26 сентября 2018

У меня есть сетка three.js, загруженная из STL-файла: 

    var loader = new THREE.STLLoader();         
    var materialmodel = new THREE.MeshPhongMaterial( 
        { 
            color: 0xFF0000, 
            specular: 0x222222, 
            shininess: 75 
        } 
        );

    function model()    
        {

            loader.load( 'models/stl/binary/model.stl', function ( geometry ) {
                var meshMaterial = materialmodel;
                var model = new THREE.Mesh( geometry, meshMaterial );
                model.scale.set( 0.02, 0.02, 0.02 );        
                model.castShadow = true;
                model.receiveShadow = true;
                model.geometry.center();                            
                scene.add(model);
                render();
            } );
        }
    model();

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

Я хочуиспользуйте dat.gui в качестве облегченного интерфейса для изменений на лету.

Мой первый эксперимент - изменение цвета модели.

Код, который я использую, таков: 

            var params = {
                modelcolor: 0xff0000,  //RED
            };

            var gui = new dat.GUI();
            var folder = gui.addFolder( 'Model Colour' );
            folder.addColor( params, 'modelcolor' )
                .name('Model Color')
                .listen()
                .onChange( function() { materialmodel.MeshPhongMaterial.color.set( params.modelcolor); } );                  
            folder.open();

DAT.GUIs Палитра цветов выглядит нормально, и я могу выбрать цвет из палитры, и отобразится новое шестнадцатеричное значение.

Однако сама модель / сетка не обновляется с новым выбранным цветом.

Мне интересно, связано ли это с тем, как я меняю цвет materialmodel.MeshPhongMaterial.color.set( params.modelcolor); (я пробовал разные способы сделать это без удачи).

У меня естьвидел пост здесь (один из ответов), где они делают это, используя model.material.color.set(params.color) в своем примере.Мои свойства материала owen определены в переменной с помощью THREE.MeshPhongMaterial .....

Предполагая, что именно здесь я ошибся, как я могу динамически изменять цвет вложенного свойства, скрытого в переменнойкак это?

1 Ответ

0 голосов
/ 26 сентября 2018

Я не понял, почему вы использовали .listen(), возможно, есть определенная причина.

В функции .onUpdate вы используете materialmodel, которая сама является материалом, а затем выВы устанавливаете .MeshPhongMaterial свойство, которое не существует.Похоже, вы просто упустили это из виду.

Вот рабочий пример: 

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 0, 10);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var light = new THREE.DirectionalLight(0xffffff, 0.5);
light.position.setScalar(10);
scene.add(light);
scene.add(new THREE.AmbientLight(0xffffff, 0.5));

var materialmodel = new THREE.MeshPhongMaterial({
  color: 0xFF0000,
  specular: 0x222222,
  shininess: 75
});
var geometrymodel = new THREE.SphereBufferGeometry(5, 32, 16);

var model = new THREE.Mesh(geometrymodel, materialmodel);
scene.add(model);

var params = {
  modelcolor: "#ff0000"
};

var gui = new dat.GUI();
var folder = gui.addFolder('Model Colour');
folder.addColor(params, 'modelcolor')
  .name('Model Color')
  .onChange(function() {
    materialmodel.color.set(params.modelcolor);
  });
folder.open();


render();

function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}
body {
  overflow: hidden;
  margin: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/96/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.2/dat.gui.min.js"></script>
...