0

カスタムの 3D 幾何学的形状が必要な 3D webapp を構築するために threeJS を学習しようとしています。これを行う方法のコードを見つけました。しかし、html ファイルを開いても、ブラウザには何も表示されません。

これが私のコードです：

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script src="Three.js"></script>
    <script src="Detector.js"></script>
    <script src="three.min.js"></script>
    <script defer="defer">
      // 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;
        //geom.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();

      var geom = new THREE.Geometry(); 
      var v1 = new THREE.Vector3(-10,10,0);
      var v2 = new THREE.Vector3(10,10,0);
      var v3 = new THREE.Vector3(10,-10,0);

      geom.vertices.push(new THREE.Vertex(v1));
      geom.vertices.push(new THREE.Vertex(v2));
      geom.vertices.push(new THREE.Vertex(v3));

      geom.faces.push( new THREE.Face3(0, 1, 2));
      geom.computeFaceNormals();

      var object = new THREE.Mesh( geom, new THREE.MeshNormalMaterial() );
      //object.doubleSided = true;
      object.overdraw = true;
      scene.addObject(object);

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

コードに何か問題がある場合は教えてください。

4

1 に答える 1

0

複数のエラーが発生する可能性があります。コンソールを確認することをお勧めします。いくつかのエラー ソースは次のとおりです。

  1. THREE.Vertex はありません。これは THREE.Vector に置き換えられました。移行ページを参照してください。だからあなたはただ使うべきですgeom.vertices.push(v1)

  2. 繰り返しますが、移行ページを参照してください。scene.add()代わりにscene.addObject()

animate最後に、別の関数 forでラップするのrequestAnimationFrameは冗長です。animate 関数オブジェクトを直接渡すことができます:requestAnimationFrame(animate)

于 2013-07-05T09:33:05.197 に答える