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

Question

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

我尝试使用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>

Run Code Online (Sandbox Code Playgroud)

我使用本指南来做到这一点:http: //www.html5canvastutorials.com/three/html5-canvas-webgl-texture-with-three-js/

Answer 1

Leo*_*eon 7

这可能是因为MeshLambertMaterial需要环境光,你可能没有正确设置.请尝试使用MeshBasicMaterial.

归档时间：	12 年，2 月前
查看次数：	7456 次
最近记录：	11 年，6 月前