尝试使用three.js将图像放置在每个形状侧面的画布上答案

【问题标题】：Trying to place image on canvas of side of each shape with three.js尝试使用three.js将图像放置在每个形状侧面的画布上
【发布时间】：2015-12-13 18:32:03
【问题描述】：

我试图将图像放在立方体每一侧显示的背景颜色之上。它不会显示，也不会在 JavaScript 控制台上显示错误。此处的代码显示了替换 jsFiddle JavaScript 窗格中显示的 generateTexture2() 函数的内容。

function generateTexture2() {

        // draw a circle in the center of the canvas
        var size = 256;

        // create canvas
        var canvas = document.createElement( 'canvas' );
        canvas.width = size;
        canvas.height = size;

        // get context
        var context = canvas.getContext( '2d' );

        var imageObj = new Image();
        imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
        imageObj.onload = function() {
          context.drawImage(imageObj, 0, 0);
        };


        return canvas;

}

http://jsfiddle.net/XGWGn/118/

【问题讨论】：

标签： three.js html5-canvas

【解决方案1】：

GLSL 中的mix() 函数被定义为基于某些因素的两个值之间的线性插值。即

value = mix( c1, c2, f ) 等于 value = c1 * (1 - f) + c2 * f;

factor 有时与文档中的 alpha 值相关联实际上令人困惑。

因此，如果您在片段着色器中更改 factor 值，您将看到您正在寻找的效果。

factor = 0.9999; // should see the second texture
gl_FragColor = vec4( mix( tColor.rgb, tColor2.rgb, factor ), 1.0 ) * dotProduct;

或factor = 0.0001 // 应该看到第一个纹理

如果您使用factor = 0.5;，您将看到两种纹理的混合。

（不知道为什么使用factor = 0 或factor = 1 不起作用）

更新小提琴：http://jsfiddle.net/nv3680x7/1/

【讨论】：

我把因子设为0.1，底色显示得很好，但如果把因子设为0.9，整个形状看起来很透明。图像或第二个纹理在任何情况下都不会显示。
在我的小提琴还是你的小提琴？
在我的小提琴中，并不是我所有的代码都整合在其中；让我更新一下，等一下。
视觉想法是缩放图像（何时以及如果我可以显示它），使其看起来比它所在的一侧小，因此蓝色背景显示在它周围。我目前没有在代码中考虑这一点。 jsfiddle.net/XGWGn/121
我不关心缩放；只是要显示图像。