Question

所以我想要做的就是抓取我保存在文件夹中的纹理。我得到的错误是：
＆＃34;获取文件：/// E：/Html/Expo%20Sites/Good%20Site/tex/dirt.jpg net :: ERR_FILE_NOT_FOUND＆＃34;

我获取纹理，将其放入变量，创建几何体，创建材质，然后创建对象并为其指定材质。我是Three.js图书馆的新手，所以我可能会遗漏一些非常明显的东西。如果你想看一下，这就是代码。

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

Answer 1

How to run things locally

如果您从外部文件加载模型或纹理，由于浏览器＆＃39;   ＆＃34;相同的原产地政策＆＃34;安全限制，从文件系统加载   将失败并出现安全例外。

有两种方法可以解决这个问题：

1）在浏览器中更改本地文件的安全性

2）从本地服务器运行文件

Answer 2

要进一步扩展播放器的答案，您必须下载某种本地服务器，运行它，然后转到浏览器中指向该服务器的任何地方。

要这样做（因为我也很困惑）你可以安装一个本地服务器（我用节点 - http://nodejs.org/download/来下载节点）。

之后（假设您从此处使用了节点），将服务器cd安装到项目目录并在命令行中运行：

npm install http-server -g

运行：

HTTP服务器

然后转到默认本地页面

http://localhost:8080/

你应该在那里看到你的项目。

Three.js - 无法加载纹理

2 个答案: