当前位置: 动力学知识库 > 问答 > 编程问答 >

javascript - Texture not getting applied on sides in Three.js

问题描述:

I have a mesh which is created from extruding a png image. I have refered to the code http://wizgrav.github.io/three.js/runner/. I am using a THREE.MeshPhongMaterial to the mesh. I am using a texture map, but the texture is only getting applied on the front and the back of the mesh and not on the sides. Please see attached image below.

The sides take up the darkest color of the texture.

I went to threejs.org/editor and added a simple cube and applied the same THREE.MeshPhongMaterial material with the same texture and it got applied on all the sides of the cube. But in my case the texture is not applied on the sides.

Code:

var texture = THREE.ImageUtils.loadTexture('/Content/texture-green.jpg');

var bumpTexture = THREE.ImageUtils.loadTexture('/Content/texture-green-bump.jpg');

var specularTexture = THREE.ImageUtils.loadTexture('/Content/texture-green-specular.jpg');

var material = new THREE.MeshPhongMaterial({

map: texture,

bumpMap: bumpTexture,

bumpScale: 0.03,

specularMap: specularTexture

});

var g = new THREE.CanvasGeometry(canvas, { "height": 0.1, "solid": solid, "offset": window.thr, "steps": (steps ? Math.abs(steps) : 5) });

g.center();

mesh = new THREE.Mesh(g, material);

scene.add(mesh);

So, Is there a problem in the way the geometry is formed (http://wizgrav.github.io/three.js/runner/CanvasGeometry.js)? Or is there another way to add textures to the sides of the mesh?

Thank you.

网友答案:

I followed this link and it worked for me. I had to do one minor chnages to the texture to get it right.

texture.wrapS = texture.wrapT = THREE.MirroredRepeatWrapping;
texture.offset.set(0.5, 0.5);

Hope this helps someone too.

分享给朋友:
您可能感兴趣的文章:
随机阅读: