Having trouble retrieving a texture saved in a folder? Here's the error message I'm encountering:
"GET file:///E:/Html/Expo%20Sites/Good%20Site/tex/dirt.jpg net::ERR_FILE_NOT_FOUND"
I've followed the steps to get the texture, store it in a variable, create the geometry and material, then assign the material to the object. However, as a beginner with Three.js library, I might be overlooking something obvious. Take a look at the code below.
var mousePos = {x: 0.0, y: 0.0};
var windowCenterX = window.innerWidth / 2;
var windowCenterY = window.innerHeight / 2;
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);
renderer.shadowMapenabled = true;
renderer.shadowMapType = THREE.PCFSoftShadowMap;
document.body.appendChild(renderer.domElement);
var dirtTex = new THREE.ImageUtils.loadTexture('tex/dirt.jpg');
var geometry = new THREE.BoxGeometry( 1, 1, 1);
var floor = new THREE.BoxGeometry(10, 1, 10);
var material = new THREE.MeshLambertMaterial({map: dirtTex});
var cube = new THREE.Mesh(geometry, material);
var floor = new THREE.Mesh(floor, material);
var directionalLight = new THREE.DirectionalLight(0xCCFFCC, 1.0);
var hemiLight = new THREE.HemisphereLight(0xCCFFCC, 0xCCFFCC, 0.6);
cube.position.z = -5;
cube.castShadow = true;
cube.recieveShadow = true;
scene.add(cube);
floor.position.z = -5;
floor.position.y = -3;
floor.castShadow = true;
floor.recieveShadow = true;
scene.add(floor);
directionalLight.position.set(0, 1, 0);
directionalLight.shadowDarkness = 1.0;
directionalLight.castShadow = true;
directionalLight.shadowCameraVisible = true;
directionalLight.shadowCameraRight = 5;
directionalLight.shadowCameraLeft = -5;
directionalLight.shadowCameraTop = 5;
directionalLight.shadowCameraBottom = -5;
scene.add(directionalLight);
hemiLight.castShadow = true;
scene.add(hemiLight);
function Update()
{
requestAnimationFrame(Update);
if(mousePos.x == null || 0)
mousePos.x = 1;
if(mousePos.y == null || 0)
mousePos.y = 1;
cube.rotation.x = mousePos.y / 500;
cube.rotation.y = mousePos.x / 500;
renderer.render(scene, camera);
}
Update();
document.onmousemove = function (e)
{
if(e.pageX != null)
mousePos.x = e.pageX;
if(e.pageY != null)
mousePos.y = e.pageY;
mousePos.x = (mousePos.x - windowCenterX);
mousePos.y = (mousePos.y - windowCenterY);
}