我试图使用Three.js渲染一个在面上有6个不同图像的立方体.
THREE.CubeGeometry的构造函数如下所示:
THREE.CubeGeometry = function ( width, height, depth, segmentsWidth, segmentsHeight, segmentsDepth, materials, sides )
我可以从代码中看到,"材料"应该是一种材料,或者是一种由6种不同材料组成的阵列,但这里传递的材料在渲染时似乎永远不会被使用.
相反,给予Mesh构造函数的单个材质用于所有6个面.
var face_materials = ... <load 6 textures here>...
var cube_g = new THREE.CubeGeometry(400,400,400,1,1,1, face_materials); // <= ignored?
var cube = new THREE.Mesh(cube_g, some_material); // <= this is used instead
即使我将null或undefined作为"some_material"传递,它似乎会覆盖face_materials并且不呈现任何内容.
有没有办法使用CubeGeometry来完成这项工作？或者我是否必须单独创建6个面并将它们添加到场景中？
我有一个模型的".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 …我试图在一个平面上有多个材料来制作一个简单的地形编辑器.所以我创建了几个材质,并尝试为我的平面中的每个顶点指定一个材质索引:
var materials = [];
materials.push(new THREE.MeshFaceMaterial( { color: 0xff0000 }));
materials.push(new THREE.MeshFaceMaterial( { color: 0x00ff00 }));
materials.push(new THREE.MeshFaceMaterial( { color: 0x0000ff }));
// Plane
var planegeo = new THREE.PlaneGeometry( 500, 500, 10, 10 );
planegeo.materials = materials;
for(var i = 0; i < planegeo.faces.length; i++)
{
planegeo.faces[i].materialIndex = (i%3);
}
planegeo.dynamic = true;
this.plane = THREE.SceneUtils.createMultiMaterialObject(planegeo, materials);
但是如果我使用MeshBasicMaterial而不是FaceMaterial,我总是在着色器中得到一大堆错误,或者只得到一个全红色的平面.任何帮助都是伟大的thx!