0

three.js を使い始めましたが、トラックボール機能を追加する簡単なプラグインがあるかどうか疑問に思っていたので、コードで行っている変更が単純なオブジェクトの「下側」にどのように影響しているかを確認できます。

私は従おうとしました：

http://mrdoob.github.com/three.js/examples/misc_controls_trackball.html

しかし、多くの EventDispatcher エラーが発生しています。

試してみると、私は次のことをしたことを意味します：

  • 「TrackballControls.js」を追加
  • 「Detector.js」を追加

  • このコードを追加しました：

    if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var controls = new THREE.TrackballControls( camera );
controls.rotateSpeed = 1.0;
controls.zoomSpeed = 1.2;
controls.panSpeed = 0.8;
controls.noZoom = false;
controls.noPan = false;
controls.staticMoving = true;
controls.dynamicDampingFactor = 0.3;
controls.keys = [ 65, 83, 68 ];
controls.addEventListener( 'change', render );

この例で使用されている three.js は、次のものとは異なることに気付きました (ただし、問題があるかどうかはわかりません)。

http://cdnjs.cloudflare.com/ajax/libs/three.js/r53/three.min.js

私は始めたばかりなので、どんな提案も非常に役に立ちます。

お時間をいただきありがとうございます！

更新: ここから Three.js の最新ビルドを使用してみました:

https://github.com/mrdoob/three.js/blob/master/build/three.js

TrackballControls.js と Detector.js の公式ビルドが見つからなかったため、次のバージョンを使用しました。

http://threejsdoc.appspot.com/doc/three.js/src.source/extras/controls/TrackballControls.js.html

http://mrdoob.github.com/three.js/examples/js/Detector.js

これは、私が動作させることができなかったコードです ( http://www.aerotwist.com/tutorials/getting-started-with-three-js/とhttp://mrdoob.github.com/three. js/examples/misc_controls_trackball.htmlオブジェクトをリング/トーラスにしようとしています):

<!doctype html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Getting Started with Three.js | Aerotwist</title>
  <meta name="description" content="The home of Creative Coder and developer Paul Lewis. Tutorial, experiments and considered opinions found here.">
  <meta name="author" content="Paul Lewis">


  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="Three.js"></script>
    <script src="TrackballControls.js"></script>
    <script src="Detector.js"></script>
</head>
<style>
  #container {
    background: #000;
    width: 400px;
    height: 300px;
  }
</style>
<body>
<div id="container"></div>
</body>
<script type="text/javascript">
  function animate() {
    requestAnimationFrame( animate );
    controls.update();
  }
  function render() {
    renderer.render( scene, camera );
  }
  var WIDTH = 400,
      HEIGHT = 300;
  // set some camera attributes
  var VIEW_ANGLE = 45,
      ASPECT = WIDTH / HEIGHT,
      NEAR = 0.1,
      FAR = 10000;
  // get the DOM element to attach to
  // - assume we've got jQuery to hand
  var $container = $('#container');
  // create a WebGL renderer, camera
  // and a scene
  var renderer = new THREE.WebGLRenderer();
  var camera =
    new THREE.PerspectiveCamera(
      VIEW_ANGLE,
      ASPECT,
      NEAR,
      FAR);
  var scene = new THREE.Scene();

  // TrackBall code from http://mrdoob.github.com/three.js/examples/misc_controls_trackball.html
  var controls = new THREE.TrackballControls( camera );
  controls.rotateSpeed = 1.0;
  controls.zoomSpeed = 1.2;
  controls.panSpeed = 0.8;
  controls.noZoom = false;
  controls.noPan = false;
  controls.staticMoving = true;
  controls.dynamicDampingFactor = 0.3;
  controls.keys = [ 65, 83, 68 ];
  //controls.addEventListener( 'change', render ); // this was how it used to be at: http://mrdoob.github.com/three.js/examples/misc_controls_trackball.html
  controls.domElement.addEventListener( 'change', render ); // I changed this to fix error message: "controls.addEventListener is not a function"
  // --------------------------
  // add the camera to the scene
  scene.add(camera);
  // the camera starts at 0,0,0
  // so pull it back
  camera.position.z = 300;
  // start the renderer
  renderer.setSize(WIDTH, HEIGHT);
  // attach the render-supplied DOM element
  $container.append(renderer.domElement);
  // ------------------------
  // create the sphere's material
  var sphereMaterial =
    new THREE.MeshLambertMaterial(
      {
        color: 0xCC0000
      });
  // -------------------------------
  // ################ try torus
  var centerpiece = new THREE.TorusGeometry();
  var sphere = new THREE.Mesh(
    centerpiece,
    sphereMaterial);
  // add the sphere to the scene
  scene.add(sphere);
  // ---------------------------
  // create a point light
  var pointLight =
    new THREE.PointLight(0xFFFFFF);
  // set its position
  pointLight.position.x = 10;
  pointLight.position.y = 50;
  pointLight.position.z = 130;
  // add to the scene
  scene.add(pointLight);
  // -------------------------
  // draw!
  renderer.render(scene, camera); 
</script>

ページのどこかをクリックすると、次のエラー メッセージが表示されます。

_eye.copy(...).subSelf is not a function

何か案は？

お時間をいただきありがとうございます！

4

1 に答える 1