Getting colored plane surface instead of texture in Three.js

Question

I am trying to apply texture on my object. But I am getting no texture applied but just colored plane surface on object means if there is wood texture image that I am applying then it just takes color of texture like brown not actual texture.

Basic code is like below:

var loader = new THREE.STLLoader();
var newMaterial = new THREE.MeshPhongMaterial( { color: colorValue, specular: 0xffffff, shininess: 100  } );

loader.load( './models/stl/binary/'+top, function ( newGeometry ) {

newMesh = new THREE.Mesh( newGeometry, newMaterial );

newMesh.position.set(  0,0.6, 0  );
newMesh.rotation.set(0,0.8,0);
newMesh.scale.set( 0.04, 0.04, 0.04 );

scene.add( newMesh );

I tried following for applying texture:

var newMaterial = new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0xffffff, shininess: 100, map: THREE.ImageUtils.loadTexture( "textures/table/lighttexture.jpg" ),
    side: THREE.DoubleSide } );
    newMaterial.map.minFilter = THREE.LinearFilter;

Result of above code is same, just color of texture getting applied.

var texture = new THREE.TextureLoader().load( "textures/water.jpg" );
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set( 4, 4 );
                var newMaterial = new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0xffffff, shininess: 100, map: texture } );

Getting ERROR on above code:

Uncaught TypeError: Cannot set property 'wrapS' of undefined

Can anyone please tell me, how should I get the original texture on my object?

EDIT

Texture is working correctly for sphere geometry as in below code.

            var sphereGeometry = new THREE.SphereGeometry(1, 10, 10);
            var mat = new THREE.MeshPhongMaterial();
            mat.map = new THREE.ImageUtils.loadTexture(
            "textures/table/lighttexture.jpg");
            mat.transparent = true;
            mat.side = THREE.DoubleSide;
            mat.depthWrite = false;
            mat.color = new THREE.Color(0xff0000);
            var sphere = new THREE.Mesh(sphereGeometry, mat);
            scene.add(sphere);

new THREE.TextureLoader().load( "textures/water.jpg" ); does not return a texture object. You get it by adding a second argument to the load function that will be callback with the texture as the argument. — mrVoid, Feb 25 '16 at 12:39
@ mrVoid I am new to this. Can you please tell how should I do that? — kiran, Feb 26 '16 at 05:38
I direct you to a question in SO already answered and the documentation. [Loading Textures in threeJS](http://stackoverflow.com/questions/18012361/how-can-i-preload-textures-with-three-js) [Documentation](http://threejs.org/docs/#Reference/Loaders/TextureLoader) — mrVoid, Feb 26 '16 at 09:47

score 0 · Answer 1 · answered Feb 25 '16 at 12:39

0

i suspect your geometry does not have correct uvs first try to texture a geometry generated by three

geometry = new THREE.PlaneGeometry(100,100);

if the texture shows correctly it means the geometry you load from stl does not have uvs set or it has incorrect values(like all zeros)

to get to the uvs use

geometry.faceVertexUvs

for Geometry

and

geometry.getAttribute("uv")

in case you have a BufferGeometry

answered Feb 25 '16 at 12:39

Derte Trdelnik

2,656
1
22
26

I had tried texture for sphere gemetry. It shows the texture correctly. How do I check for my STL object with UVs set? I am unknown with this UVs thing, how should I use that and all. Can you please tell me, how should I set UVs in my STL object? – kiran Feb 26 '16 at 05:45
please check my EDIT. – kiran Feb 26 '16 at 06:01
you hav to calculate uv - uvs are coordinates of texture usually going from 0 to 1, [0,0] is the top left corner of the texture, [1,1] is the bottom right, there is no easy way to automatically calculate the uv with threejs especially for a custom loaded object see http://stackoverflow.com/questions/20774648/three-js-generate-uv-coordinate – Derte Trdelnik Feb 26 '16 at 07:32

Getting colored plane surface instead of texture in Three.js

1 Answers1