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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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