three.js立方体黑色，但我添加了纹理？_Three.js_Textures

three.js立方体黑色，但我添加了纹理？

three.js

three.js立方体黑色，但我添加了纹理？,three.js,textures,Three.js,Textures,我试着给我用JS/THREE.JS制作的立方体添加纹理。但当我在浏览器中打开它时，它是全黑的吗这是我的代码： <html> <head> <title>My first Three.js app</title> <style>canvas { width: 100%; height: 100% }</style> </head> <body

我试着给我用JS/THREE.JS制作的立方体添加纹理。但当我在浏览器中打开它时，它是全黑的吗

这是我的代码：

    <html>
    <head>
        <title>My first Three.js app</title>
        <style>canvas { width: 100%; height: 100% }</style>
    </head>
    <body>
        <script src="https://rawgithub.com/mrdoob/three.js/master/build/three.js"></script>
        <script>
      // revolutions per second
      var angularSpeed = 0.2; 
      var lastTime = 0;

      // this function is executed on each animation frame
      function animate(){
        // update
        var time = (new Date()).getTime();
        var timeDiff = time - lastTime;
        var angleChange = angularSpeed * timeDiff * 2 * Math.PI / 1000;
        cube.rotation.y += angleChange;
        lastTime = time;

        // render
        renderer.render(scene, camera);

        // request new frame
        requestAnimationFrame(function(){
            animate();
        });
      }

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

      // camera
      var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
      camera.position.z = 500;

      // scene
      var scene = new THREE.Scene();

      // material
      var material = new THREE.MeshLambertMaterial({
        map: THREE.ImageUtils.loadTexture('crate.jpg')
      });

      // cube
      var cube = new THREE.Mesh(new THREE.CubeGeometry(200, 200, 200), material);
      cube.overdraw = true;
      cube.rotation.x = Math.PI * 0.1;
      scene.add(cube);

      // add subtle ambient lighting
      var ambientLight = new THREE.AmbientLight(0xbbbbbb);
      scene.add(ambientLight);

      // directional lighting
      var directionalLight = new THREE.DirectionalLight(0xffffff);
      directionalLight.position.set(1, 1, 1).normalize();
      scene.add(directionalLight);

      // start animation
      animate();
        </script>
    </body>
</html>


我的前三个.js应用程序
画布{宽度：100%；高度：100%}
//每秒转数
var角速度=0.2；
var lastTime=0；
//此功能在每个动画帧上执行
函数animate（）{
//更新
var time=（新日期（））.getTime（）；
var timeDiff=时间-上次时间；
var angleChange=角速度*时间差*2*数学PI/1000；
立方体旋转y+=角度变化；
lastTime=时间；
//渲染
渲染器。渲染（场景、摄影机）；
//请求新帧
requestAnimationFrame（函数（）{
制作动画（）；
});
}
//渲染器
var renderer=new THREE.WebGLRenderer（）；
renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（renderer.doElement）；
//摄像机
var摄像机=新的三透视摄像机（45，window.innerWidth/window.innerHeight，11000）；
摄像机位置z=500；
//场面
var scene=new THREE.scene（）；
//材料
var material=新的3.0网格LambertMaterial({
map:THREE.ImageUtils.loadTexture（'crate.jpg'））
});
//立方体
var cube=新的三网格（新的三立方测量法（200200200200），材料）；
cube.overdraw=true；
cube.rotation.x=Math.PI*0.1；
场景.添加（立方体）；
//添加微妙的环境照明
var环境光=新的三个环境光（0xbbbbbb）；
场景。添加（环境光）；
//定向照明
var方向灯=新的三个方向灯（0xffffff）；
directionalLight.position.set（1,1,1）.normalize（）；
场景。添加（方向光）；
//启动动画
制作动画（）；

我使用了这个指南：

这可能是因为有需要环境光的Meshlambert材质，但可能设置不正确。尝试改用MeshBasicMaterial。

我已经测试了您输入的相同代码，它工作得非常好
我唯一更改的是图像的路径：

map: THREE.ImageUtils.loadTexture('img/textures/test.png')
仔细检查图像是否位于当前文件夹中，如果位于，请尝试使用其他图像（此图像非常适合我：）

希望有帮助
可能有控制台错误吗？如果您在本地计算机上，您将需要一个本地服务器或向浏览器添加一些选项这是必要的，因为现代浏览器的跨源策略。对我来说，这不起作用。箱子还是完全平的。