合并对象上的ThreeJS图像纹理

时间:2017-10-27 22:24:44

标签: three.js render texture-mapping

帮助!我试图在THREEjs中创建和合并两个不同的对象。我有一个图像,我需要它在整个合并对象上拉伸一次。目前它正在做两次,一次在顶部,一次在底部,就像它们仍然是两个独立的对象。

var texture = new THREE.TextureLoader().load('//s1.postimg.org/26dva6d58v/peace.png');
texture.alphaTest = 0.9;
texture.needsUpdate = true;

color = new THREE.MeshStandardMaterial( {
  side: THREE.DoubleSide,
  color: 0x949494,
  map: texture
} );
var size = {'top': 1.395, 'bottom': 1.11, 'height': 3.5};       

cylinderGeo1 = new THREE.CylinderGeometry( size.top, size.bottom, size.height, 50, null, true );
cylinderGeo1.applyMatrix( new THREE.Matrix4().makeTranslation(0, size.height/2, 0) );
cylinder1 = new THREE.Mesh(cylinderGeo1);

cylinderGeo2 = new THREE.CylinderGeometry( size.top * 2,size.top, size.height, 50, null, true );
cylinderGeo2.applyMatrix( new THREE.Matrix4().makeTranslation(0, (size.height/2) + size.height, 0) );
cylinder2 = new THREE.Mesh(cylinderGeo2);

cupGeo = new THREE.Geometry();;

cylinder1.updateMatrix();
cupGeo.merge(cylinderGeo1, cylinder1.matrix);
cylinder2.updateMatrix();
cupGeo.merge(cylinderGeo2, cylinder2.matrix);

cup = new THREE.Mesh(cupGeo, color);
cup.updateMatrix();
scene.add(cup);

https://jsfiddle.net/dj2k6y8t/16/

[edit]您可能需要放大画布才能进行渲染。

0 个答案:

没有答案