三JS，紋理添加鏡面反射（光澤）

我有一個紋理我正在應用於three.js中的對象。我想給它增加一些鏡像或者光澤。三JS，紋理添加鏡面反射（光澤）

我看到的例子看起來像這樣

new THREE.MeshPhongMaterial({ 
    color: 0x996633, 
    specular: 0x050505, 
    shininess: 100 
});

然而，我的代碼看起來是這樣的：

// texture 
var texture = new THREE.Texture(); 
var imgLoader = new THREE.ImageLoader(manager); 
imgLoader.load('assets/uv.png', function (image) { 
    texture.image = image; 
    texture.needsUpdate = true; 
}); 

// model 
var loader = new THREE.OBJLoader(manager); 
loader.load('assets/obj.obj', function (object) { 
    object.traverse(function (child) { 
     if (child instanceof THREE.Mesh) { 
      child.material.side = THREE.DoubleSide; 
      child.material.map = texture; 
     } 
    }); 
    object.position.y = - 95; 
    scene.add(object); 
}, onProgress, onError);

我不知道在哪裏添加光澤或鏡面設置，因爲我不使用THREE.MeshPhongMaterial，或者如果我確實使用THREE.MeshPhongMaterial，如何將它與THREE.texture結合使用。

來源

2017-08-31 Mel Pacheco

我建議你在加載時重寫對象的材質。

var loader = new THREE.OBJLoader(manager); 
loader.load('assets/obj.obj', function (object) { 
    object.traverse(function (child) { 
     if (child instanceof THREE.Mesh) { 
      child.material = new THREE.MeshPhongMaterial({ 
       color:  0x996633, 
       specular: 0x050505, 
       shininess: 100, 
       map:  texture, 
       side:  THREE.DoubleSide 
      }); 
     } 
    }); 
    object.position.y = - 95; 
    scene.add(object); 
}, onProgress, onError);

來源

2017-08-31 21:06:19 neeh

three.js所提供相當多的材料，所有的行爲不同，使用不同的屬性進行配置（見these examples here獲得概覽）。如果你想看起來有光澤的外觀，你可能會去MeshStandardMaterial或MeshPhongMaterial。 ducomentation還會告訴你可用於配置材料的屬性。

MeshStandardMaterial就像更新版本的phong素材。這是更「正確的」（物理上講）和更計算昂貴的選項，而MeshPhongMaterial是一個很好的近似值。

資料片的你可能缺少的是隻需更換材料，只要你喜歡，那麼在你的例子，這將是像

if (child instanceof THREE.Mesh) { 
    var oldMaterial = child.material; 
    child.material = new THREE.MeshStandardMaterial({ 
     side: THREE.DoubleSide, 
     map: texture 
     // ..if neccesary, copy properties like color from oldMaterial 
    }); 
}

完全替代材料。

來源

2017-08-31 21:09:41

三JS，紋理添加鏡面反射（光澤）

回答

相關問題