How to add a .png texture to a cube

Questions
,
1

I’m trying to learn how to add an image to a cube. as a texture. I have this simple code and is not working. Can someone please help me out to solve this issue. Thank you!

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Final GUI.DAT CONTROLLER</title>
  <meta charset="utf-8">
  <script src="https://threejs.org/build/three.js"></script>
  <style>
    body {
      margin: 0;
    }
    canvas {
      width: 100%;
      height: 100%;
      display: block;
    }
  </style>
</head>
<body>
  <script>
      const scene = new THREE.Scene();
      const camera = new THREE.PerspectiveCamera( 50, window.innerWidth/window.innerHeight, 0.1, 1000 );
      const renderer = new THREE.WebGLRenderer();
      renderer.setSize( window.innerWidth, window.innerHeight );
      document.body.appendChild( renderer.domElement );

      const geometry = new THREE.BoxGeometry();
      const material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
      

      const loader = new THREE.TextureLoader();

      const material = new THREE.MeshBasicMaterial({
    	map: loader.load("http://songnes.com/g/crate0_normal.png"),
  		});

      const cube = new THREE.Mesh( geometry, material );

      scene.add( cube );

      camera.position.z = 5;

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

        cube.rotation.x += 0.01;
        cube.rotation.z += 0.01;

        renderer.render( scene, camera );
      };
      animate();
    </script>
</body>
</html>
2

Try hosting the image on the same server as you have the js file on.
Browsers block accessing resources on different servers unless the server are configured to allow that.

3

Thank you amitlzkpa
as you can see here: ```
map: loader.load(“http://songnes.com/g/crate0_normal.png”)

I have the image uploaded in the same server.... and is not working.... thank you for all your help.... any ideas, how I can make this work.
4

My guess is its something with the server config as I’m able to upload it to a different server and load it in jsfiddle.
Sample

5

Thank you amitlzkpa, I got it to work… For some reason, the server I guess was not updating the images on time, but now it works!!!

see live example here: http://songnes.com/g/g43.html

I got it, thanks for your help. Here is the full code jsut in case someone else might want it.

< !DOCTYPE html >
< html >
< head >
< title >Demo 04< /title >
< script src=“https://threejs.org/build/three.js” >< /script >
< script type=“text/javascript” src=“demo.js” >< /script >
< /head >
< body style=“text-align:center;” >
< span style=“position:absolute;top:0px;left:0px;” >< input type=“button” value=“Toggle Wireframe” onclick=“mesh.material.wireframe=!mesh.material.wireframe;meshFloor.material.wireframe=!meshFloor.material.wireframe;”/ >< br/ >WASD to move.< br/ >Arrow keys to turn.< /span >
< script >
var scene, camera, renderer, mesh;
var meshFloor, ambientLight, light;

var crate, crateTexture, crateNormalMap, crateBumpMap;

var keyboard = {};
var player = { height:1.8, speed:0.2, turnSpeed:Math.PI*0.02 };
var USE_WIREFRAME = false;

function init(){
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(90, 1280/720, 0.1, 1000);

mesh = new THREE.Mesh(
	new THREE.BoxGeometry(1,1,1),
	new THREE.MeshPhongMaterial({color:0xff4444, wireframe:USE_WIREFRAME})
);
mesh.position.y += 1;
mesh.receiveShadow = true;
mesh.castShadow = true;
scene.add(mesh);

meshFloor = new THREE.Mesh(
	new THREE.PlaneGeometry(20,20, 10,10),
	new THREE.MeshPhongMaterial({color:0xffffff, wireframe:USE_WIREFRAME})
);
meshFloor.rotation.x -= Math.PI / 2;
meshFloor.receiveShadow = true;
scene.add(meshFloor);

ambientLight = new THREE.AmbientLight(0xffffff, 0.2);
scene.add(ambientLight);

light = new THREE.PointLight(0xffffff, 0.8, 18);
light.position.set(-3,6,-3);
light.castShadow = true;
light.shadow.camera.near = 0.1;
light.shadow.camera.far = 25;
scene.add(light);


// Texture Loading
var textureLoader = new THREE.TextureLoader();
crateTexture = textureLoader.load("http://songnes.com/g/crate2_diffuse.png");

// Create mesh with these textures
crate = new THREE.Mesh(
	new THREE.BoxGeometry(3,3,3),
	new THREE.MeshPhongMaterial({
		color:0xffffff,
		
		map:crateTexture,
		bumpMap:crateBumpMap,
		normalMap:crateNormalMap
	})
);
scene.add(crate);
crate.position.set(2.5, 3/2, 2.5);
crate.receiveShadow = true;
crate.castShadow = true;


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

renderer = new THREE.WebGLRenderer();
renderer.setSize(1280, 720);

renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.BasicShadowMap;

document.body.appendChild(renderer.domElement);

animate();

}

function animate(){
requestAnimationFrame(animate);

mesh.rotation.x += 0.01; // little red cube
mesh.rotation.y += 0.01; // little red cube
crate.rotation.y += 0.01; // Box Texture

if(keyboard[87]){ // W key
	camera.position.x -= Math.sin(camera.rotation.y) * player.speed;
	camera.position.z -= -Math.cos(camera.rotation.y) * player.speed;
}
if(keyboard[83]){ // S key
	camera.position.x += Math.sin(camera.rotation.y) * player.speed;
	camera.position.z += -Math.cos(camera.rotation.y) * player.speed;
}
if(keyboard[65]){ // A key
	camera.position.x += Math.sin(camera.rotation.y + Math.PI/2) * player.speed;
	camera.position.z += -Math.cos(camera.rotation.y + Math.PI/2) * player.speed;
}
if(keyboard[68]){ // D key
	camera.position.x += Math.sin(camera.rotation.y - Math.PI/2) * player.speed;
	camera.position.z += -Math.cos(camera.rotation.y - Math.PI/2) * player.speed;
}

if(keyboard[37]){ // left arrow key
	camera.rotation.y -= player.turnSpeed;
}
if(keyboard[39]){ // right arrow key
	camera.rotation.y += player.turnSpeed;
}

renderer.render(scene, camera);

}

function keyDown(event){
keyboard[event.keyCode] = true;
}

function keyUp(event){
keyboard[event.keyCode] = false;
}

window.addEventListener(‘keydown’, keyDown);
window.addEventListener(‘keyup’, keyUp);

window.onload = init;
< /script >
< img src=“http://songnes.com/g/crate2_diffuse.png” alt=“Ghost” class=“img_Half” > < br >
< /body >
< /html >

1 Like