4

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

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

4

2 回答 2

8

这可能是因为 MeshLambertMaterial 需要环境光，你有但它可能设置不正确。尝试改用 MeshBasicMaterial。

于 2013-12-16T19:39:28.283 回答
0

我已经测试了您放置的相同代码，并且效果很好。

我唯一改变的是图像的路径：

map: THREE.ImageUtils.loadTexture('img/textures/test.png')

仔细检查图像是否位于当前文件夹中，如果是，请尝试使用另一张图像（这对我来说非常适合：https ://aec-apps.com/sites/default/files/styles/app_160_160/public/屏幕%20Shot%202013-10-25%20at%2000.28.49.png）。

希望能帮助到你！

于 2014-05-28T22:03:24.157 回答