I wrote this code to change the sex in the scene.

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

Everything works as it should. But I am interested in the question whether it is possible to somehow shorten this code. So what would change not the object itself but its properties (material)?

Something like that

 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 answer 1

    You use two objects to display the floor: Reflector and Mesh . If Mesh uses MeshStandardMaterial , then Reflector uses an object with parameters. MeshStandardMaterial and the object for the reflector are two objects that are different in structure and have nothing in common.

    But this code

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

    can be made shorter

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

    Change material through 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>

    • And how, in principle, you can change the material if material = materialBasic does not work - zeni1agent
    • @ zeni1agent Completed the answer. - prisoner849