在三个JS和NPM中更改纹理颜色或应用颜色提示

Posted 2021-05-02

我需要加载纹理并将其应用到平面，然后才能更改纹理的色调颜色。基本上，我会有一个颜色选择器。颜色应用于纹理的每个黑色像素。我试着像这样使用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是否允许这样做，我可以以某种方式将它们混合起来实现它。找不到任何东西

答案

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

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;