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.minFilter设置为THREE.LinearFilter或THREE.NearestFilter。（world_map.jpg）

和

three.min.js：556 Uncaught SecurityError：无法在'WebGLRenderingContext'上执行'texImage2D'：可能无法加载file：/// E：/sanmveg/libs/world_map.jpg上的跨源图像。

请我是新来的，请帮助我。

Answer 1

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

Answer 2

你需要有一个方形尺寸为2的幂的图像来使用这种纹理，所以要确保你的图像是2x2,8x8,16x16,32x32等。

Answer 3

请尝试fileReader Object，它允许网络应用程序读取文件的内容，在这种情况下是存储在用户计算机上的图像。

希望你能从这里开始下一步。

Answer 4

您需要从服务器运行网站。您可以使用Chrome Web Server创建本地服务器。或者，您也可以使用node.js服务器。

纹理没有在Three.js中加载

4 个答案: