三.js 纹理加载答案

【问题标题】：Three.js Texture loading三.js 纹理加载
【发布时间】：2017-09-11 02:09:09
【问题描述】：

这几天我开始使用 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();
}

【问题讨论】：

标签： javascript three.js textures

【解决方案1】：

Three.js 正在尝试从文件系统加载图像，您的屏幕截图中的file:// URL 就是证明。这在现代浏览器中是默认禁止的，但有几种方法可以绕过它：

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

【讨论】：