在 ThreeJS 和 NPM 中更改纹理颜色或应用颜色提示答案

【问题标题】：Change texture color or apply color hint in ThreeJS and NPM在 ThreeJS 和 NPM 中更改纹理颜色或应用颜色提示
【发布时间】：2017-12-23 08:31:11
【问题描述】：

我需要加载纹理并将其应用到平面上，然后才能更改纹理的色调颜色。基本上，我会有一个颜色选择器。颜色应用于纹理的每个黑色像素。我尝试像这样使用Jimp：

jimp.read(fileName).then(function (image) {
    var geometry = new THREE.PlaneGeometry( 6, 4 );

    var texture = THREE.ImageUtils.loadTexture( fileName );
    texture.wrapS = THREE.RepeatWrapping; 
    texture.wrapT = THREE.RepeatWrapping;
    texture.minFilter = THREE.LinearFilter;
    texture.magFilter = THREE.LinearFilter;
    texture.offset.set( 0, 0 );
    texture.repeat.set( 1, 1 );

    var material = new THREE.MeshBasicMaterial( { map : texture } );
    material.side = THREE.DoubleSide;
    material.map.needsUpdate = true;

    var plane = new THREE.Mesh( geometry, material );
    plane.rotation.x = -60 * ( Math.PI/180 );

    scene.add( plane );

    renderer.render( scene, camera );
  }).catch(function (err) {
    console.error(err);
  });

但我不知道 ThreeJS 或 Jimp 是否允许这样做，我可以以某种方式混合它们来实现它。什么都找不到

【问题讨论】：

您可以使用new THREE.MeshBasicMaterial({map: texture, color: 0x00FF00}); 将纹理与颜色相乘，但黑色像素将保持黑色......您可以使用它吗，还是输入图像超出您的控制范围？
如果您不想使用自定义着色器，您可以随时在画布上操作图像，然后在材质上使用该画布
试试material.emissive = new THREE.Color(0x964B00)

标签： npm three.js textures tint

【解决方案1】：

您可以创建一个画布纹理，以便动态访问图像...

var canvas  = document.createElement( 'canvas' )
canvas.width    = 512 // custom 
canvas.height   = 512 
var texture = new THREE.Texture(canvas)
var context = canvas.getContext( '2d' )

现在在上下文中，您可以像普通 HTML5 画布 https://www.w3schools.com/tags/ref_canvas.asp 那样编写或阅读

记住你必须设置

texture.needsUpdate = true;

上下文改变后需要更新纹理时的纹理

我从来没有用过 jimp，但是如果你可以输出一个普通的 HTML javascript Image 对象，你可以将它复制到画布中并使用它

context.drawImage(image,width,height);
texture.needsUpdate = true;

【讨论】：