Three.js - Can't Load A Texture

问题

So all I want to do is grab a texture that I have saved in a folder. The error I'm getting is:
"GET file:///E:/Html/Expo%20Sites/Good%20Site/tex/dirt.jpg net::ERR_FILE_NOT_FOUND"

I'm getting the texture, putting it in a variable, creating the geometry, creating the material, then creating the object and assigning the material to it. I'm new to the Three.js library so I might be missing something really obvious. Here's the code if you wanna have a look.

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);
}

回答1:

How to run things locally

If you load models or textures from external files, due to browsers' "same origin policy" security restrictions, loading from a file system will fail with a security exception.

There are two ways how to solve this:

1) Change security for local files in a browser

2) Run files from a local server

回答2:

To further expand upon Player's answer you have to download some sort of local server, run it, then go to wherever that server is pointed to in your browser.

To do so (because I was confused as well) you can install a local server (I used node - http://nodejs.org/download/ to download node).

After (assuming you used node from here on), to install server cd to your project directory and run in command line:

npm install http-server -g

To run:

http-server

Then go to the default local page