Three.js - 在运行时更改材质

Posted 2023-02-27

【中文标题】Three.js - 在运行时更改材质

【英文标题】：Three.js - Change Material on Runtime

【发布时间】：2012-09-15 20:40:03

【问题描述】：

我有一些从 Blender 导出的 .js 文件并使用 THREE.JSONLoader(); 加载它们

我的回调：

var callback   = function( geometry )  createMesh(geometry);

我的加载：

loader.load( "Models/sculp.js", callback );

我的创建方法：

function createMesh(geometry)

    inArr[id] = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial(  color: 0xbbbbbb ) );
    inArr[id].scale.set( 100, 100, 100 );
    scene.add( inArr[id] );
    id++;

现在我想使用我的键盘在运行时更改我的材质（更改颜色和不透明度）。

我该怎么做？

【参考方案1】：

当您为每个网格创建新材质时，我假设您只想更改一个网格的颜色，而不是更改 inArr 数组中的所有颜色，您可能需要为此进行某种选择。但是仅仅改变材质的颜色就很容易了：

var onKeyDown = function(event) 
  if (event.keyCode == 67)  // when 'c' is pressed
    object.material.color.setHex(0xff0000); // there is also setHSV and setRGB
  
;
document.addEventListener('keydown', onKeyDown, false);

object 是您要更改的网格。关键代码可以在这里找到：http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes

【讨论】：

非常感谢。现在效果很好，几天前我用立方体和球体尝试过，我用过：THREE.SceneUtils.traverseHierarchy( obj, function ( geo ) geo.material = new THREE.MeshLambertMaterial( color: 0x900000 ); );但现在我只能用obj.material = new THREE.MeshLambertMaterial( .. );