ImageLoader not loading an image

Questions
1

What’s up all,
I am newbie who is struggling with loading an image to wrap all six sides of boxMaterial. I am using the basic boxMaterial code (below) from the documentation to draw the box. I also use the documents ImageLoader code to no effecct. Please help. been three days trying to figure this out.
Yhanks

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

    var renderer = new THREE.WebGLRenderer({antialias: true});
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    var geometry = new THREE.BoxGeometry(1, 1, 1);

    var material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
    var cube = new THREE.Mesh(geometry, material);
    scene.add(cube);

//var pLight = new THREE.PointLight(0xffffff, 1);
//pLight.position.set(4, 4, 2);
//scene.add(pLight);

    camera.position.z = 2;

    var animate = function () {
        requestAnimationFrame(animate);

        cube.rotation.x += 0.02;
        cube.rotation.y += 0.02;

        renderer.render(scene, camera);
    };

    animate();

ImageLoader code below: (not in use just her for reference)

// instantiate a loader
const loader = new THREE.ImageLoader();

// load a image resource
loader.load(
// resource URL
‘textures/skyboxsun25degtest.png’,

// onLoad callback
function ( image ) {
	// use the image, e.g. draw part of it on a canvas
	const canvas = document.createElement( 'canvas' );
	const context = canvas.getContext( '2d' );
	context.drawImage( image, 100, 100 );
},

// onProgress callback currently not supported
undefined,

// onError callback
function () {
	console.error( 'An error happened.' );
}

);

2

Hi @2artificiallyintelligent

What is missing from the script is that the created canvas is not appended into the html content, but just is a variable in the memory. One other issue may be happening if you do not have that image in your project folder with the same path and name.

I edited it a little and put it into this here fiddle https://jsfiddle.net/r7Lnvtsx/2/

You can also take a look at here to read about drawing image into canvas, I edited the code there a little to print the whole image from (0, 0)

3

thanks the image loaded.Now I just have to figure out how to wrap it around the box.

4

For that you would need TextureLoader instead of ImageLoader, here you can see it’s example https://threejs.org/docs/#api/en/loaders/TextureLoader

once the texture is loaded you can cube.material.map = texture and set the diffuse map.

1 Like
5

thanks for your patience man, but still no results. been days now! anyway here is the codePen. if you have time you can spot the problem here! Much appreciated once again. but I am going outta ma mind lol

6

There were some problems in the code, I edited your codepen.

The changes I made are:

  • Instead of using ImageLoader, I used TextureLoader
  • The Image url you added from dropbox was not direct link to the image address but was a dropbox url
  • The texture needed to be added to the material.
  • The type of material you used was MeshNormalMaterial I replaced it with MeshBasicMaterial

1 Like
7

thank you very much! If you have Youtube Channel or Patreon I would love to support! Enjoy the holidays with the fam! Much respek!

1 Like
8

Don’t mention it, I’m happy to help :grinning_face_with_smiling_eyes:

9

works great in CodePen. But when I load the code in VS Code,

Now I am getting an uncaught error

saying:
var scene = new THREE.Scene();
is not defined

this is crazy. The very same code I copied and pasted from codePen.lol

10

Uncaught ReferenceError: THREE is not defined

11

I attached an html file you can just run, the issue must be due to order of loading the scripts.

test.html (1.2 KB)

12

thanks but want to load an image from my desktop with

var geometry = new THREE.BoxGeometry();
var texture = new THREE.TextureLoader().load(‘KC.JPG’);
var material = new THREE.MeshBasicMaterial({ map: texture });
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);

you mentioned it might be a issue due to the order of loading the script

hw would you suggest I change the order above?

13

It’s fine, you can load an image from your local or web, it will just work.

What I meant by order of scripts was, first three.js must be loaded in the head tag, after it is loaded your script can go in the body of the page, so you can be sure that both three.js and html content is loaded before you try to access anything in both. Order of lines you provided seems to be correct.

image
image738×231 11.3 KB

14

I have copied your sample, but it doesn’t work for me. How it is possible? Should I use TextureLoader instead of ImageLoader?