Superimpose an image onto a plane

Questions
1

When I try to load an image, the material of the plane becomes black.
What is it that I am doing incorrectly
Thanks in advance

    var planeGeometry = new THREE.PlaneGeometry(60, 20, 1, 1);
    var texture = new THREE.TextureLoader().load( '/home/admin/Documents/ThreeJS/img/pattern1.jpeg' );
    var planeMaterial = new THREE.MeshLambertMaterial( { map: texture } );
    //var planeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff});
    var plane = new THREE.Mesh(planeGeometry, planeMaterial);
    plane.receiveShadow = true;
    // rotate and position the plane
    plane.rotation.x = -0.5 * Math.PI;
    plane.position.set(0,0,0);
    // add the plane to the scene
    scene.add(plane);
2

Hi!
And when you apply just a colour to your object (white in your code), you can see your object in that colour?
Do you have an animation loop or call renderer.render() just once?
Is the path to the picture correct?

3

Yes, when I specify a colour, it does appear
I just cant seem to load an image
Also, yes the path to the picture is correct

And yup, I do call the renderer.render() function:

    // add the output of the renderer to the html element
    document.getElementById("WebGL-output").appendChild(renderer.domElement);

    // call the render function
    var gui = new dat.GUI();
    render();

    function render() {
        stats.update();
        // render using requestAnimationFrame
        requestAnimationFrame(render);
        renderer.render(scene, camera);
    }
4

I’ve just checked your code with the texture from Three.js and it works fine:
http://jsfiddle.net/prisoner849/7j3am1pw/

5

Thanks a tonne!
I tried using the path you suggested, and it works

I also checked if I had used an incorrect path to the image, and I hadnt
Any thoughts as to why that path didn’t work?

Again. Thanks a lot :smiley:

6

Could you provide a picture you use? :slight_smile:

7

pattern1

8

Also, I’m sorry, I’m extremely new at this.
So apologize for this probably ridiculous question, but, how do you get links to images?
Because I tried replacing the link you suggested with this
-https://pre00.deviantart.net/a660/th/pre/f/2012/180/b/f/pattern_variation_by_absurdwordpreferred-d55auet.jpg
and I’m back again with a black plane

9

Do you try to load the image pattern1.jpeg locally?
Do you have any warnings in your browser console about CORS?
If I can’t load something from the direct link, I just copy it on github :slight_smile:
http://jsfiddle.net/prisoner849/xutmvpj3/

10

This is what the console says:
Access to Image at ‘file:///home/admin/Documents/ThreeJS/pattern1.jpeg’ from origin ‘null’ has been blocked by CORS policy: Invalid response. Origin ‘null’ is therefore not allowed access.

Also, thanks for the github tip :smiley:

11

Have a look at this: https://threejs.org/docs/index.html#manual/introduction/How-to-run-things-locally

1 Like