0

I created a hexagon with THREE.JS, it works with a basic material with a color, but i can't make it works with a texture... When i set up a textured material, the object isn't rendered at all.

I had the same problem with a bufferGeometry, but i solved the issue by setting geometry.addAttribute('uv'..., but this time, looks like it's not a uvs issue.

Here's the JS code :

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

// Adding light 
scene.add( new THREE.AmbientLight( 0x444444 ) );
// SPOT LIGHT
var pXL1 = 3; var pYL1 = 1; var pZL1 = 2;
var LightGeometry1 = new THREE.BoxGeometry( 0.1, 0.1, 0.1 );
var LightMaterial1 = new THREE.MeshBasicMaterial( { map: new THREE.ImageUtils.loadTexture( "textures/default.jpg" ) } ); // this one is well textured !!!!
var LightCube1 = new THREE.Mesh( LightGeometry1, LightMaterial1 );
LightCube1.position.set(pXL1, pYL1, pZL1);
scene.add( LightCube1 );
var light1 = new THREE.DirectionalLight( 0xffffff );
light1.position.set( pXL1, pYL1, pZL1 ).normalize();
scene.add(light1);

var geometry = new THREE.Geometry();

geometry.vertices.push(new THREE.Vector3(-0.866 , 0.5,1));
geometry.vertices.push(new THREE.Vector3(-0.866 , -0.5 ,1));
geometry.vertices.push(new THREE.Vector3(0, -1 ,1));
geometry.vertices.push(new THREE.Vector3(0.866, -0.5 ,1));
geometry.vertices.push(new THREE.Vector3(0.866,0.5 ,1));
geometry.vertices.push(new THREE.Vector3(0, 1 ,1));

geometry.faces.push(new THREE.Face3(1, 2, 3, new THREE.Vector3(0, 0, 1)));
geometry.faces.push(new THREE.Face3(1, 3, 4, new THREE.Vector3(0, 0, 1)));
geometry.faces.push(new THREE.Face3(4, 0, 1, new THREE.Vector3(0, 0, 1)));
geometry.faces.push(new THREE.Face3(4, 5, 0, new THREE.Vector3(0, 0, 1)));

geometry.faceVertexUvs[0] = [];

geometry.faceVertexUvs[0].push( THREE.Vector2(0,5),  THREE.Vector2(0.933,0.2835),  THREE.Vector2(0.933,0.7165));
geometry.faceVertexUvs[0].push( THREE.Vector2(0,5),  THREE.Vector2(0.933,0.7165),  THREE.Vector2(0.5,1));
geometry.faceVertexUvs[0].push( THREE.Vector2(0.5,1),  THREE.Vector2(0.067,0.2835),  THREE.Vector2(0,5));
geometry.faceVertexUvs[0].push( THREE.Vector2(0.5,1),  THREE.Vector2(0.067,7165),  THREE.Vector2(0.067,0.2835));

var hexagon_texture = new THREE.ImageUtils.loadTexture( "textures/default.jpg" );
    hexagon_texture.wrapS = THREE.RepeatWrapping;
    hexagon_texture.wrapT = THREE.RepeatWrapping;
    hexagon_texture.repeat.set(1,1);

var hexagon_material = new THREE.MeshBasicMaterial( { color: 0xff0000} );
//var hexagon_material = new THREE.MeshPhongMaterial( { ambient: 0xffffff, specular: 0x555555, shininess: 50, map:hexagon_texture, side: THREE.DoubleSide } );
//var hexagon_material = new THREE.MeshBasicMaterial( { map: new THREE.ImageUtils.loadTexture( "textures/default.jpg" ) } );

var hexagon = new THREE.Mesh( geometry,hexagon_material );

scene.add(hexagon);


camera.position.z = 5;
controls = new THREE.OrbitControls( camera, renderer.domElement );  

var render = function () {
    requestAnimationFrame( render );
    renderer.render(scene, camera);
};

render();

As it, it works and i have a red hexagon. But if i uncomment one of the var hexagon_materual = ..., then the hexagon isn't rendered.

What am i missing ?

Thank you

Comode
  • 25
  • 3
  • `THREE.ImageUtils.loadTexture()` does asynchronous loading. take a look at http://stackoverflow.com/questions/7919516 – gaitat May 03 '15 at 04:47
  • Also maybe... "To signal an update in the faceVertexUvs array, Geometry.uvsNeedUpdate needs to be set to true.". – 2pha May 03 '15 at 05:48
  • I tested both without success. I setTimeout 3000ms all what was coming aflter `var hexagon_material`, and set up uvsneedupdate to true, but it changed nothing. – Comode May 03 '15 at 18:56
  • Your mesh is likely black on a black background. You are not defining your `faceVertexUVs[ 0 ]` correctly. See `CircleGeometry.js` for example. Learn to use the debugger to debug your code. – WestLangley May 04 '15 at 00:46
  • It's not black on black... If i change the background color, my object isn't visible. Moreover, items behind it are visible too. It's not rendered at all ! – Comode May 04 '15 at 12:28

0 Answers0