Three.js - 無法加載紋理

所以我想要做的就是抓住已保存在文件夾中的紋理。我得到的錯誤是：
「GET文件：/// E：/Html/Expo%20Sites/Good%20Site/tex/dirt.jpg網:: ERR_FILE_NOT_FOUND」Three.js - 無法加載紋理

我越來越紋理，將它放入一個變量中，創建幾何體，創建材質，然後創建對象並將材質分配給它。我是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); 
}

來源

2014-10-31 Keenan Woodall

它會給你錯誤的行'var dirtTex = new THREE.ImageUtils.loadTexture（'tex/dirt.jpg'）;'？ – Luigi 2014-10-31 19:57:41

How to run things locally

如果從外部文件加載模型或紋理，由於瀏覽器的 ‘同源策略’的安全限制，從文件系統加載將失敗，安全異常。

有兩種方法如何解決這個問題：

1）更改安全本地文件瀏覽器從本地服務器

2）運行文件

來源

2014-10-31 20:13:54 Player

恩，好，謝謝，我真的不知道這意味着什麼。我應該把東西放在谷歌驅動器或什麼？ – 2014-10-31 20:15:49

運行本地服務器或託管服務器上的所有內容，或者讓瀏覽器允許訪問本地資源。 – Player 2014-10-31 20:20:22

那麼我如何告訴瀏覽器允許訪問本地資源呢？如果我告訴它允許，其他人是否會允許訪問？謝謝你的耐心。 – 2014-11-03 20:36:41

要根據球員的進一步擴大回答你必須下載某種本地服務器，運行它，然後轉到瀏覽器中指向該服務器的任何位置。你可以安裝一個本地服務器（我使用節點 - http://nodejs.org/download/下載節點）。這樣做（因爲我也很困惑），你可以安裝本地服務器（我使用節點 - http://nodejs.org/download/下載節點）。

（假設你從這裏所使用的節點）後，安裝服務器CD到您的項目目錄，並在命令行中運行：

NPM安裝HTTP服務器-g

運行：

HTTP服務器

然後進入默認的本地頁面

http://localhost:8080/

，你應該在那裏看到你的項目。

來源

2014-12-24 17:42:32 mario

Three.js - 無法加載紋理

回答

相關問題