When attempting to add texture to my object, I am encountering an issue where only the color of the texture is being applied, rather than the actual texture itself. For example, if I try to apply a wood texture image, the object just appears brown instead of showing the grain of the wood.
The basic code I am using is as follows:
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 have attempted the following methods to apply 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;
However, the result remains the same with only the color of the texture being displayed.
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 } );
An error occurs when trying the above method:
Uncaught TypeError: Cannot set property 'wrapS' of undefined
If anyone can provide guidance on how to successfully apply the original texture to my object, it would be greatly appreciated.
EDIT
It has been noted that the texture works correctly when applied to a sphere geometry, as shown in the code snippet below.
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);