Question posted in 
I’m having a go with three.js. I want to apply an image as a texture to the object, but for some reason, when I apply an image I only seem to be getting the dominant colour of the image. I’ve looked around the net and couldnt find anybody with similar issues.
As you can see from json file, I’ve tried using the image from “mapDiffuse” variable, and then I’ve tried applying the texture using the code and I get the same result
This the 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]
}
And this is my javascript:
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 result I’m getting (its streched from photoshop)
This is the image I want to use
2
Answers
If you want to apply a texture to a json-loaded model, your json file must specify UVs.
three.js r.77
I ran into this issue. It’s not displaying the ‘color dominant’ color of your image, it’s displaying the bottom left pixel. Understanding how images are mapped to textures in webgl is helpful for this.
The reason you’re getting a solid color is because your imported model doesn’t have the UV coordinates (a fancy term for Texture coordinates, which I assume comes from the texture vector variables “s,t,u,v” which you’ve probably seen lying around) exported with the model data.
If you inspect the JSON export from Blender, in your UV-less version you should notice that the UV array is actually empty. This is easier to verify if you export something simple like a cube to cut down on the noise.
When exporting your model from Blender, you need to export as ‘geometry’ rather than ‘BufferGeometry’. This will enable the ‘face materials’ checkbox, which you should check. Then check your exported JSON and you should see a populated uv array; these are your texture coordinates and you should then be able to apply a texture without issue.
I highly recommend reading up on the the WebGL fundamentals page about textures here.