three.js所 - 無法加載本地質感

我有我嘗試加載紋理像這樣的本地文件：three.js所 - 無法加載本地質感

var texture = THREE.ImageUtils.loadTexture('image.jpg'); 
var cubeGeo = new THREE.CubeGeometry(50, 50, 50); 
var cubeMat = new THREE.MeshBasicMaterial({ map: texture }); 
var cube = new THREE.Mesh(cubeGeo, cubeMat); 
scene.add(cube);

圖像不顯示（立方體是黑色的）。當我將整個文件夾移動到一臺服務器上並從那裏加載時，會顯示圖像。

我的問題是，爲什麼它在文件在服務器上而不是在計算機上時工作？所有文件已被複制，所以它不是缺少文件的問題。我也嘗試過絕對路徑，但仍然沒有結果。我必須更改計算機上的某些設置嗎？我想在Windows 7上使用Chrome 32.0.1700.76 m（寫這篇文章的時候是最新版本），而且我使用THREE.js r64。沒有使用其他庫。

來源

2014-01-16 Daew

通過雙擊在桌面上加載的文件與加載到服務器上的文件之間的功能存在很大差異。通常這是安全限制的問題，特別是對於Internet Explorer，但通常服務器具有可用的桌面雙擊時不可用的進程。這就是爲什麼我們有服務器而不是連接桌面。 – kellycode

呵呵，我很確定loadTexture使用url來訪問紋理，並且只能從服務器獲得。 WampServer非常適合Windows並且易於安裝。您可以將文件放在它的www目錄中，並使用localhost/ – kellycode

在瀏覽器中訪問它們。看看[this]（https://github.com/mrdoob/three.js/wiki/How-to-run-things-locally ）three.js wiki文章可以幫助你 - 並檢查你的控制檯是否有錯誤。 – WestLangley

您的問題是由於安全限制。

對於Chrome，您可以使用命令行標誌--allow-file-access-from-files運行瀏覽器。

或者，您可以運行本地服務器。

有關更多選項，請參閱three.js wiki文章How to Run Things Locally。

three.js所r.65

來源

2014-01-16 18:23:00 WestLangley

「或者，您可以運行本地服務器。」這到底意味着什麼？運行本地服務器（例如'python3 -m http.server'）並通過'localhost：8000'訪問文件不會解決訪問問題。說「使用本地服務器」沒有描述啓動後應該做什麼是毫無用處的。 – Bakuriu

爲了進一步說明（因爲我很困惑也一樣），你可以安裝一個本地服務器（我使用的節點 - http://nodejs.org/download/下載節點）。

後，安裝服務器CD到您的項目目錄，並在命令行中運行：

NPM安裝HTTP服務器-g

運行：

HTTP服務器

然後轉到默認本地頁面

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

來源

2014-12-24 14:42:20 mario

可能遲到派對了。

實際上，您可以在不設置節點服務器的情況下執行此操作，除非是因爲您無論如何都需要後端。

基本上可以這樣做，通過使用FileReader對象將本地圖像加載到瀏覽器中，將其轉換爲Base64字符串。

將圖像轉換爲Base64字符串後，您可以將其保存爲sessionStorage（平均限制爲〜4 Mb），或者在「app」運行時將字符串保存在某個變量中。

然後，您可以將base64字符串轉換爲three.js紋理，並將其應用於場景中的對象。 請注意下例中的異步呈現調用;您必須在紋理完全加載後渲染場景，否則，它不會顯示。

在下面的例子中，我加載了我已經上傳到sessionStorage的圖像的three.texture。

TEXTURE = THREE.ImageUtils.loadTexture(
 
     sessionStorage.getItem('myBase64Img'); 
 
     {}, 
 
     function() { renderScene(); /* async call after texture is loaded */ } 
 
    );

乾杯！

來源

2015-07-19 21:54:26

如果你需要在你的項目中使用的紋理，你可以將影像轉換爲base64字符串，然後把它們分配給您的變量

下面是示例：https://codepen.io/tamlyn/pen/RNrQVq

var texture = new THREE.Texture(); 
texture.image = image; 
image.onload = function() { 
texture.needsUpdate = true; 
};

當圖像被讀取從base64字符串

所以你可以創建res.js，並在那裏寫所有的紋理:)它不是很好，因爲如果你改變了一些圖像，你必須將它們重新轉換爲base64，但它適用於任何瀏覽器（甚至小姐邊緣）

來源

2017-10-25 18:56:53 proggamer12

three.js所 - 無法加載本地質感

回答

相關問題