I am experimenting with three.js and trying to apply an image as a texture to an object. However, I am only getting the dominant color of the image instead. I have searched online but couldn't find anyone facing similar issues.
After inspecting the JSON file, I noticed that when using the "mapDiffuse" variable from the code snippet, I still encounter the same problem when applying the texture.
Below is the content of the JSON object file:
{
"metadata" :
{
"formatVersion" : 3.1,
"sourceFile" : "newBox.obj",
"generatedBy" : "OBJConverter",
"vertices" : 8,
"faces" : 6,
"normals" : 6,
"colors" : 0,
"uvs" : 0,
"materials" : 1
},
"scale" : 1.000000,
"materials": [ {
"DbgColor" : 15658734,
"DbgIndex" : 0,
"DbgName" : "Material.002",
"colorDiffuse" : [0.64, 0.64, 0.64],
"colorSpecular" : [0.5, 0.5, 0.5],
"illumination" : 2,
"mapDiffuse" : "test.JPG",
"opacity" : 1.0,
"opticalDensity" : 1.0,
"specularCoef" : 96.078431
}],
"vertices": [1.000000,-1.000000,-1.000000,1.000000,-1.000000,1.000000,-1.000000,-1.000000,1.000000,-1.000000,-1.000000,-1.000000,1.000000,1.000000,-0.999999,0.999999,1.000000,1.000001,-1.000000,1.000000,1.000000,-1.000000,1.000000,-1.000000],
"morphTargets": [],
"morphColors": [],
"normals": [0,-1,0,0,1,0,1,0,0,-0,-0,1,-1,-0,-0,0,0,-1],
"colors": [],
"uvs": [[]],
"faces": [35,0,1,2,3,0,0,0,0,0,35,4,7,6,5,0,1,1,1,1,35,0,4,5,1,0,2,2,2,2,35,1,5,6,2,0,3,3,3,3,35,2,6,7,3,0,4,4,4,4,35,4,0,3,7,0,5,5,5,5]
}
Here is my JavaScript code:
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer({alpha:true});
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var mesh;
/**
* Texture
*/
var texture = THREE.ImageUtils.loadTexture( "/files/test/Three-js-examples-images-crate.jpg" );
var material = new THREE.MeshBasicMaterial( { map : texture } );
// instantiate a loader
var loader = new THREE.JSONLoader();
// load a resource
loader.load(
// resource URL
'/files/test/untitled.json',
// Function when resource is loaded
function ( geometry ) {
mesh = new THREE.Mesh(geometry,material);
mesh.scale.x = 0.8;
mesh.scale.y = 0.8;
mesh.scale.z = 0.8;
scene.add( mesh );
}
);
camera.position.z = 5;
function render() {
requestAnimationFrame( render );
mesh.rotation.x += 0.0001;
mesh.rotation.y += 0.01;
renderer.render( scene, camera );
}
render();
This is the outcome I'm experiencing (image stretched from Photoshop):
https://i.sstatic.net/2QmSE.jpg
Below is the image I intend to use: