three.js 中的纹理没有控制台错误仍然无法正常工作

Question

我是 three.js 的新手，需要为学校做一个项目。对于这个项目，我的立方体需要一个纹理。但是屏幕保持黑色..并且没有控制台错误！我已经尽力了所以这是我最后一次改变哈哈。

我的代码：

<script src="js/three.min.js"></script>
<script>
  var scene = new THREE.Scene();
  var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

  var renderer = new THREE.WebGLRenderer();
  renderer.setSize( window.innerWidth, window.innerHeight );
  document.body.appendChild( renderer.domElement );

  var geometry = new THREE.BoxGeometry( 1, 1, 1 );
  // +
 var material = new THREE.MeshLambertMaterial({
       map: THREE.ImageUtils.loadTexture('images/crate2.jpg')
   })

  // =
  var cube = new THREE.Mesh( geometry, material );
  scene.add( cube );

  camera.position.z = 5;

  var render = function () {
    requestAnimationFrame( render );

    cube.rotation.x += 0.1;
    cube.rotation.y += 0.05;

    renderer.render(scene, camera);
  };

  render();

</script>

Answer 1

您的场景中没有灯光。像下面这样添加一个应该可以

// Create ambient light and add to scene.
var light = new THREE.AmbientLight(0xffffff); // white light
scene.add(light);

我会在 js fiddle 中添加一个 link，但它们似乎已经改变，我再也找不到从哪里获得 link。无论如何，只是广告一些灯。

Answer 2

也许加一盏灯会有帮助？那或尝试使用 THREE.MeshBasicMaterial

three.js 中的纹理没有控制台错误仍然无法正常工作

Texture in three.js no console errors still not working

three.js

texture-mapping