使用设备的方向绕原点运行 [英] Orbiting around the origin using a device's orientation

问题描述

我正在尝试使用three.js 复制Google Cardboard DemoExhibit"的功能.我直接从 Chrome Experiments 网页 中获取了起始示例，然后添加了代码来绘制一个简单的三角金字塔在 init 方法中:

I am trying to replicate the functionality of Google's Cardboard Demo "Exhibit" with three.js. I took the starting example straight from the Chrome Experiments web page and just dropped in code to draw a simple triangular pyramid in the init method:

function init() {
  renderer = new THREE.WebGLRenderer();
  element = renderer.domElement;
  container = document.getElementById('example');
  container.appendChild(element);

  effect = new THREE.StereoEffect(renderer);

  scene = new THREE.Scene();

  camera = new THREE.PerspectiveCamera(90, 1, 0.001, 700);
  camera.position.set(0, 0, 50);
  scene.add(camera);

  controls = new THREE.OrbitControls(camera, element);
  controls.rotateUp(Math.PI / 4);
  controls.noZoom = true;
  controls.noPan = true;

  var geometry = new THREE.CylinderGeometry( 0, 10, 30, 4, 1 );
  var material = new THREE.MeshPhongMaterial( { color:0xffffff, shading: THREE.FlatShading } );

  var mesh = new THREE.Mesh( geometry, material );
  mesh.updateMatrix();
  mesh.matrixAutoUpdate = false;
  scene.add( mesh );

  var light = new THREE.DirectionalLight( 0xffffff );
  light.position.set( 1, 1, 1 );
  scene.add( light );

  light = new THREE.DirectionalLight( 0x002288 );
  light.position.set( -1, -1, -1 );
  scene.add( light );

  light = new THREE.AmbientLight( 0x222222 );
  scene.add( light );

  function setOrientationControls(e) {
    if (!e.alpha) {
      return;
    }

    controls = new THREE.DeviceOrientationControls(camera);
    controls.connect();
    controls.update();

    element.addEventListener('click', fullscreen, false);

    window.removeEventListener('deviceorientation', setOrientationControls, true);
  }
  window.addEventListener('deviceorientation', setOrientationControls, true);

  window.addEventListener('resize', resize, false);
  setTimeout(resize, 1);
}

桌面上的 OrbitControls 方法效果很好:通过用鼠标拖动，屏幕围绕金字塔运行.然而，在使用 DeviceOrientationControls 的移动设备上，此效果完全丢失，取而代之的是相机在 (0, 0, 0) 处自由移动.我尝试按照 之前的问题建议 并替换 相机与scene使得:

The OrbitControls method on desktop works perfectly: by dragging with the mouse, the screen orbits around the pyramid. On mobile using DeviceOrientationControls however, this effect is entirely lost and instead the camera moves freely at (0, 0, 0). I tried doing as a previous question suggested and replacing the camera with scene such that:

controls = new THREE.DeviceOrientationControls(scene);

然而，这根本不起作用，并且当设备旋转时没有任何移动.我需要更改什么才能通过 DeviceOrientationControls 捕获的动作复制 OrbitControls 行为?

however this does not work at all and nothing moves when the device is rotated. What do I need to change to replicate OrbitControls behavior with the motion captured by DeviceOrientationControls?

推荐答案

要创建设备方向轨道控制器，就像您在此演示中看到的那样，http://novak.us/labs/UmDemo/;它涉及修改现有的 OrbitControls.js.

To create a deviceorientation orbit controler, like you see on this demo, http://novak.us/labs/UmDemo/; It involves modifying the existing OrbitControls.js.

文件更改可以在 github 上的这个提交中看到:https://github.com/snovak/three.js/commit/f6542ab3d95b1c746ab4d39ab5d3253720830dd3

The file changes can be seen in this commit on github: https://github.com/snovak/three.js/commit/f6542ab3d95b1c746ab4d39ab5d3253720830dd3

几个月来我一直想做拉取请求.只是还没来得及解决.需要大量清理.

I've been meaning to do a pull request for months. Just haven't gotten around to it. Needs a bunch of clean up.

你可以在这里下载我修改过的 OrbitControls.js(我也几个月没有合并了，结果可能会有所不同):https://raw.githubusercontent.com/snovak/three.js/master/examples/js/controls/OrbitControls.js

You can download my modified OrbitControls.js here (I haven't merged in months either, results may vary): https://raw.githubusercontent.com/snovak/three.js/master/examples/js/controls/OrbitControls.js

以下是您将如何在自己的脚本中实现修改后的 OrbitControls:

Below is how you would implement the modified OrbitControls in your own scripts:

this.controls = new THREE.OrbitControls( camera, document.getElementById('screen') ) ;

            controls.tiltEnabled = true ;  // default is false.  You need to turn this on to control with the gyro sensor.

            controls.minPolarAngle = Math.PI * 0.4; // radians
            controls.maxPolarAngle = Math.PI * 0.6; // radians
            controls.noZoom = true ;

            // How far you can rotate on the horizontal axis, upper and lower limits.
            // If set, must be a sub-interval of the interval [ - Math.PI, Math.PI ].
            controls.minAzimuthAngle = - Math.PI * 0.1; // radians
            controls.maxAzimuthAngle = Math.PI * 0.1; // radians

            this.UMLogo = scene.children[1];
            controls.target = UMLogo.position;

我希望这能让你到达你想去的地方！:-)

I hope that gets you where you want to be! :-)

这篇关于使用设备的方向绕原点运行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！