javascript - 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.WebGLRenderer: Texture is not power of two. Texture.minFilter is set to THREE.LinearFilter or THREE.NearestFilter. ( world_map.jpg )

和

three.min.js:556 Uncaught SecurityError: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The cross-origin image at file:///E:/sanmveg/libs/world_map.jpg may not be loaded.

我是新手所以请帮助我。

Answer 1

由于安全选项，浏览器无法从光盘加载数据。在服务器上部署您的网站或更改安全选项。你用 Chrome 吗？ Fire fox 允许从磁盘读取数据。