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/ Screen%20Shot%202013-10-25%20at%2000.28.49.png )。

それが役に立てば幸い！

于 2014-05-28T22:03:24.157 に答える