1

Я написал вот такой код для смены пола в сцене

action_floor_glass.onChange( function (opt_none) {
    if (opt_none== true){   
  geometry_floor2.visible = false; 
  geometry_floor1.visible = true; 
  }  
    if (opt_none== false){
  geometry_floor1.visible = false;
  geometry_floor2.visible = true;
  }
} );


  var plane_gam = new THREE.PlaneBufferGeometry( 2000, 2000 ) ;

  var glass_mat = { clipBias: 0.003, textureWidth: window.innerWidth * window.devicePixelRatio, textureHeight:  window.innerHeight * window.devicePixelRatio, color: 0x889999, recursion: 1 } ;

  var plane_mat = new  THREE.MeshStandardMaterial( { color: 0x808080, roughness: 0, metalness: 0 } ) ;                  

  var  geometry_floor1 =  new THREE.Reflector(plane_gam,  glass_mat);
  geometry_floor1.rotation.x = - Math.PI / 2;
  geometry_floor1.receiveShadow = true
  geometry_floor1.visible = false;
  scene.add(  geometry_floor1 );

  var  geometry_floor2 = new THREE.Mesh( plane_gam, plane_mat );
  geometry_floor2.rotation.x = - Math.PI / 2;
  geometry_floor2.receiveShadow = true;

  scene.add(  geometry_floor2 );

Все работает как надо. Но меня интересует вопрос можно ли как-то укоротить этот код Так что бы менялся не сам объект а его свойства(материал)?

Что то в таком духе

var geometry = new THREE.PlaneBufferGeometry( 2000, 2000 ) ;
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );


 var controllerDecor = gui.add( params, 'material', [ 'Basic ', 'Phong', 'depthBasic', 'depthRGBA' ] );

 controllerDecor.onChange(function(opt_none){
if (opt_none == 'Basic '){  
  material = materialBasic 
    }  
if (opt_none== 'Phong'){
         material = materialPhong 
    }
  });   
                    var materialBasic = new THREE.MeshBasicMaterial( { color: 0x990000 } );
                    var materialPhong = new THREE.MeshPhongMaterial( { color: 0x00ff00 } );

var cube = new THREE.Mesh( geometry, material );
scene.add( cube );

1 ответ 1

2

Вы используете два объекта для отображения пола: Reflector и Mesh. Если Meshиспользует MeshStandardMaterial, то Reflector использует объект с параметрами. MeshStandardMaterial и объект для рефлектора - это два объекта, разных по структуре и не имеющих ничего общего.

А вот этот код

action_floor_glass.onChange( function (opt_none) {
    if (opt_none== true){   
  geometry_floor2.visible = false; 
  geometry_floor1.visible = true; 
  }  
    if (opt_none== false){
  geometry_floor1.visible = false;
  geometry_floor2.visible = true;
  }
} );

можно сделать короче

action_floor_glass.onChange( function (opt_none) {
  geometry_floor2.visible = !opt_none; 
  geometry_floor1.visible = opt_none;   
} );

Смена материала через dat.gui:

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

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

var materials = {
  choose: "lambert",
  basic: new THREE.MeshBasicMaterial({
    color: "red"
  }),
  lambert: new THREE.MeshLambertMaterial({
    color: "green"
  }),
  standard: new THREE.MeshStandardMaterial({
    color: "blue"
  }),
  normal: new THREE.MeshNormalMaterial()
}

var mesh = new THREE.Mesh(new THREE.SphereBufferGeometry(2, 36, 18), materials[materials.choose]);
scene.add(mesh);

var gui = new dat.GUI();
gui.add(materials, "choose", ["basic", "lambert", "standard", "normal"]).onChange((val) => {
  console.log(val);
  mesh.material = materials[val];
});

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

2
  • А как в принципе можно поменять материал если material = materialBasic не работает
    – zeni1agent
    22 янв 2019 в 12:10
  • @zeni1agent Дополнил ответ. 22 янв 2019 в 12:41

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.