在Three.js中紋理未加載

Question

我有以下three.js代碼：

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 65, window.innerWidth/window.innerHeight, .1, 1000 );

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement )

var geometry = new THREE.SphereGeometry( 5, 32, 32 );
var texture = THREE.ImageUtils.loadTexture( "world_map.jpg" );
var material = new THREE.MeshBasicMaterial( {color: 0xffff00,  map:texture } );
var sphere = new THREE.Mesh( geometry, material );
scene.add( sphere );
camera.position.z = 14;

var render = function () {
    requestAnimationFrame( render );
        sphere.rotation.x += .01;
        sphere.rotation.y += .01;
    renderer.render(scene, camera);
};
render();

由於我對three.js完全three.js所以請知道我能夠編寫很多代碼。

現在我的問題是紋理沒有加載。 其實我想自己做一個旋轉的地球。

當我嘗試加載紋理時，出現以下錯誤：

THREE.WebGLRenderer：紋理不是二的冪。 Texture.minFilter設置為THREE.LinearFilter或THREE.NearestFilter。 （world_map.jpg）

和

three.min.js：556未捕獲的安全錯誤：無法在“ WebGLRenderingContext”上執行“ texImage2D”：可能無法加載文件：/// E：/sanmveg/libs/world_map.jpg上的跨域圖像。

請我是新來的，所以請幫助我。

Answer 1

由於安全選項，瀏覽器無法從光盤加載數據。 在服務器上部署網站或更改安全性選項。 你用鉻嗎？ 狐狸允許從光盤讀取數據。

Answer 2

您需要具有一個平方大小為2的冪的圖像才能使用這種紋理，因此請確保您的圖像為2x2、8x8、16x16、32x32等。

Answer 3

請嘗試使用fileReader對象 ，該對象可使Web應用程序讀取存儲在用戶計算機上的文件內容，在這種情況下為圖像。

希望您可以從這里繼續進行下一步。

Answer 4

您需要從服務器運行網站。 您可以使用Chrome Web服務器創建本地服務器。 或者，您也可以使用node.js服務器。