Three.js - 无法加载纹理答案

【问题标题】：Three.js - Can't Load A TextureThree.js - 无法加载纹理
【发布时间】：2014-12-28 05:02:55
【问题描述】：

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

我正在获取纹理，将其放入变量中，创建几何体，创建材质，然后创建对象并将材质分配给它。我是 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);
}

【问题讨论】：

是不是给你var dirtTex = new THREE.ImageUtils.loadTexture('tex/dirt.jpg');这一行的错误？

标签： javascript image three.js textures

【解决方案1】：

How to run things locally

如果您从外部文件加载模型或纹理，由于浏览器的 “同源策略”安全限制，从文件系统加载将失败并出现安全异常。

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

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

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

【讨论】：

嗯，好的，谢谢，不过我真的不知道这意味着什么。我应该在谷歌驱动器上放一些东西还是什么？
要么运行本地服务器，要么在服务器上托管所有内容，要么告诉您的浏览器允许访问本地资源。
那么我如何告诉浏览器允许访问本地资源呢？如果我告诉它允许这样做，其他人是否必须允许访问？感谢您的耐心等待。
取决于您的浏览器，请查看我的答案中的链接。此设置仅适用于您自己的浏览器。如果您以压缩文件的形式分发您的作品，用户需要更改他们的浏览器安全设置。如果您将其托管在服务器上，则无需配置即可工作。
谢谢。我如何将它托管在服务器上？在我的 Google Drive 帐户上将其公开到网络上是否与将其托管在服务器上一样？抱歉这些愚蠢的问题，我对网络（以及任何类似的东西）的经验为零。

【解决方案2】：

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

为此（因为我也很困惑）您可以安装本地服务器（我使用节点 - http://nodejs.org/download/ 下载节点）。

之后（假设您从这里开始使用 node），将服务器 cd 安装到您的项目目录并在命令行中运行：

npm install http-server -g

运行：

http-服务器

然后进入默认的本地页面

http://localhost:8080/

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

【讨论】：