Question

我在这几天用Three.js开始，这很酷。现在我想加载一个纹理并将其应用到一个简单的球体。我的问题是，当我打开浏览器页面时，我得到了error。我不知道如何解决这个问题。

代码

window.onload = Init;

var scene;
var camera;
var renderer;


function render() {
   renderer.render(scene, camera);
   requestAnimationFrame(render);
}




function Init() {
   scene = new THREE.Scene();
   camera = new THREE.PerspectiveCamera(75, window.innerWidth /window.innerHeight, 0.1, 1000);
   renderer = new THREE.WebGLRenderer();



  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setClearColor(0xeeeeee, 1);

  camera.position.set(15, 13, 12);
  camera.lookAt(scene.position);

  var cubeGeometry = new THREE.SphereGeometry(5, 30, 30);




  var loader = new THREE.TextureLoader();
  loader.load("texture/earth.jpg", function(texture) {
      var material = new THREE.MeshLambertMaterial({ map: texture });
      var sphere = new THREE.SphereGeometry(5, 30, 30);
      var mesh = new THREE.Mesh(sphere, material);
      scene.add(mesh);
  });
  var light = new THREE.SpotLight(0xffffff);
  light.position.set(10, 20, 20);
  scene.add(light);


  document.body.appendChild(renderer.domElement);

  render();
}

Answer 1

Three.js正在尝试从文件系统加载图像，如屏幕截图中的file:// URL所示。现代浏览器默认禁止使用此功能，但有几种方法可以解决这个问题：

（推荐）从本地HTTP服务器运行代码。如果安装了Python，请从项目目录运行python -m SimpleHTTPServer以启动简单服务器。
（不推荐）启动启用了本地文件访问的Web浏览器（例如Chromium中的--allow-file-access-from-files）。 这是非常不安全的，请勿在此设置有效的浏览器中浏览。

Three.js纹理加载

1 个答案: