纹理没有在Three.js中加载

Posted 2021-05-02

我有以下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上的跨源图像。

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

答案

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

另一答案

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

另一答案

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

希望你能从这里进入下一步。

另一答案

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