1

I've got the following code 

function init(){
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 0.1, 1000);


// here comes problems       
        var loader = new THREE.TextureLoader();
        loader.load("three.js-master\wood.jpg", function ( texture ) {
        var geometry = new THREE.PlaneGeometry(50,50, 10,10);
        var material = new THREE.MeshBasicMaterial({map: texture, overdraw: 0.5});
        var mesh = new THREE.Mesh(geometry, material);
        mesh.rotation.x -= Math.PI / 2;
        scene.add(mesh);
        });

    camera.position.set(0, player.height, -5);
    camera.lookAt(new THREE.Vector3(0,player.height,0));

    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth , window.innerHeight);
    document.body.appendChild(renderer.domElement);

    animate();
}

And my render with another objects ( I 've planed to make a room with textures ) looks like this ( black blank space)

enter image description here

what exacly goes wrong with my code ? Thanks for all responses.

Nicol Bolas
  • 449,505
  • 63
  • 781
  • 982
Return.h
  • 129
  • 1
  • 2
  • 6
  • Are You sure that the texture cooridinates are properly set up? – Dori Dec 25 '17 at 12:58
  • What exactly do you mean? Size is 400x400 if you ask about it. – Return.h Dec 25 '17 at 13:11
  • 1
    Generally speaking for a texture to work with a certain geometry or mesh it has to have proper texture coordinates set up per each vertex, that will inform GL what part of the texture data to sample and put onto the image. I'm not sure how is it done in javascript. I can only guess that there has to be some configuration parameter or sth in geometry or mesh creation method. – Dori Dec 25 '17 at 13:17
  • @Return.h Any messages about errors or warnings in your browser console? – prisoner849 Dec 25 '17 at 14:42
  • @Matso do you mean UV coordinates? – prisoner849 Dec 25 '17 at 14:42
  • @prisoner849 Even 4. I didin't thought about console. Thank you for this. Here is screen shot. https://imgur.com/a/ITDFn – Return.h Dec 25 '17 at 14:58
  • @prisoner849 Yup. – Dori Dec 25 '17 at 15:35
  • You must load your page from a local server. file:// is considered cross-origin which will prevent three.js/webgl read the pixel data from the images. –  Dec 27 '17 at 13:09

0 Answers0