相关疑难解决方法(0)

Three.js中同一网格面上的多个透明纹理

是否有可能在Three.js中的同一面上将多个纹理叠加在一起,以便在webGL中加速alpha加速?

纹理(或应该)应用于同一面,使得底部纹理(纹理1)没有alpha通道,并且上面的纹理以类似下面图像示例中的纹理2的方式被引导.

这种混合可以使用HTML5 Canvas作为前置步骤来实现,但由于纹理位图可能很大,我更喜欢跳过Canvas混合操作.

我通过创建网格的副本并对每个网格应用一个纹理进行测试,并使其他网格透明并移动了一点,几乎成功,但有一些闪烁,因为对象不能完全在同一位置,有一些纹理之间的空间不是正确的效果.他们看起来应该像是混合在一起.Photoshop(如下图所示).

在此输入图像描述

javascript textures alphablending webgl three.js

28
推荐指数
1
解决办法
2万
查看次数

通过OBJMTLLoader加载对象的三个.js多个材质

我有一个模型的".obj"和".mtl"文件,我正在加载它OBJMTLLoader.".mtl"指定要应用于模型的纹理,并且three.js加载模型并使用应用的纹理渲染它就好了.

但这就是事情.

一旦加载了一个对象,我想在其上应用另一个纹理.这是因为第一纹理表示对象的表面材质.第二个纹理是一个绘图,我想定位在模型上的特定位置.

我的问题是:如何将第二个纹理应用到已加载(和纹理化)的对象上

我看到three.js创建了一个实例THREE.Object3D,并且该实例具有带有一个实例的"children"数组THREE.Mesh.

当我尝试将纹理应用于该网格(mesh.material.map = texture)时,我失去了初始纹理.

我查看了关于应用多个纹理和JSONLoader但没有找到答案的问题.

我也尝试过使用new THREE.MeshFaceMaterial( materials )(如本答案所示),但没有成功.

更新:

我试过@WestLangley建议使用多材质对象,但仍然无法在另一个上面渲染一个材质.

我做了这个简单的演示,改编自three.js OBJLoader - http://dl.dropboxusercontent.com/u/822184/webgl_multiple_texture/index.html

THREE.SceneUtils.createMultiMaterialObject按照建议使用它,传递克隆从.obj加载的主网格的几何体.我也给它2个纹理 - 一个用于整个表面,另一个用于模型的前表面.

但这不起作用.我添加了2个复选框,用于切换相应材料的"可见"属性.你可以看到材料存在,但我看不到第二个下面的第一个.

加载/渲染的关键如下:

var texture = THREE.ImageUtils.loadTexture('fabric.jpg');
var texture2 = THREE.ImageUtils.loadTexture('table.jpg');

texture2.offset.set(-0.65, -2.5);
texture2.repeat.set(4, 4);

var loader = new THREE.OBJLoader();
loader.addEventListener( 'load', function ( event ) {

  var mainMesh = event.content.children[0].children[0];

  multiMaterialObject = THREE.SceneUtils.createMultiMaterialObject( 
    mainMesh.geometry.clone(), [
      new THREE.MeshLambertMaterial({ map: texture2 …
Run Code Online (Sandbox Code Playgroud)

javascript textures mesh three.js

8
推荐指数
1
解决办法
2万
查看次数

ThreeJS透明PNG纹理黑色

我试图理解我在 ThreeJS 中遇到的一个问题。我在页面上有一个简单的立方体,有一个白色问号的 PNG,图像的其余部分是透明的。当我将纹理添加到立方体时;

cubeGeometry = new THREE.BoxGeometry( 5, 5, 5 );
cubeMaterial = new THREE.MeshStandardMaterial( { color: this.cubeColor, flatShading: true, map:new THREE.TextureLoader().load( require("./question-mark.png") ) } );
cubeMesh = new THREE.Mesh( cubeGeometry, cubeMaterial );
Run Code Online (Sandbox Code Playgroud)

无论我做什么,PNG 中的透明像素都会显示为黑色。更奇怪的是 PNG 的白色像素显示为 this.cubeColor 的颜色 - 设置为橙色。

我希望立方体颜色为橙色,PNG 的透明像素采用该颜色,PNG 中的白色像素保持白色。

有人透露一些情况吗?

我所看到的

我所看到的

质地

质地

javascript three.js

2
推荐指数
1
解决办法
4524
查看次数

标签 统计

javascript ×3

three.js ×3

textures ×2

alphablending ×1

mesh ×1

webgl ×1