在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服务器。