主页 / 问题 / 934992
Accepted
zeni1agent
Asked:2020-01-22 03:55:55 +0000 UTC2020-01-22 03:55:55 +0000 UTC

如何使用 dat.gui 在three.js 中更改对象材质？

  • 772

我写了以下代码来改变场景中的性别

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 );
javascript

1 个回答

  1. Best Answer

    您使用两个对象来显示性别：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

相关问题