使用设备的方向围绕原点运行
Orbiting around the origin using a device's orientation
我正在尝试用 three.js 复制 Google 的 Cardboard Demo "Exhibit" 的功能。我直接从 Chrome Experiments web page 中获取了起始示例,并在 init
方法中加入了代码以绘制一个简单的三角锥:
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) 处自由移动。我尝试作为 previous question suggested 并将 camera
替换为 scene
这样:
controls = new THREE.DeviceOrientationControls(scene);
然而,这根本不起作用,并且当设备旋转时没有任何移动。我需要更改什么才能使用 DeviceOrientationControls
捕获的动作复制 OrbitControls
行为?
要创建设备定向轨道控制器,就像您在本演示中看到的那样,http://novak.us/labs/UmDemo/;它涉及修改现有的OrbitControls.js。
可以在 github 的提交中看到文件更改:https://github.com/snovak/three.js/commit/f6542ab3d95b1c746ab4d39ab5d3253720830dd3
几个月来我一直想做一个拉取请求。只是还没想好。需要大量清理。
你可以在这里下载我修改过的OrbitControls.js(我也有几个月没有合并了,结果可能会有所不同):https://raw.githubusercontent.com/snovak/three.js/master/examples/js/controls/OrbitControls.js
以下是您如何在自己的脚本中实现修改后的 OrbitControls:
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;
我希望这能让你到达你想去的地方! :-)
要使用 DeviceOrientationControls
,您必须在动画循环期间调用 controls.update()
,否则控件不会根据设备信息更新其位置。
我正在尝试用 three.js 复制 Google 的 Cardboard Demo "Exhibit" 的功能。我直接从 Chrome Experiments web page 中获取了起始示例,并在 init
方法中加入了代码以绘制一个简单的三角锥:
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) 处自由移动。我尝试作为 previous question suggested 并将 camera
替换为 scene
这样:
controls = new THREE.DeviceOrientationControls(scene);
然而,这根本不起作用,并且当设备旋转时没有任何移动。我需要更改什么才能使用 DeviceOrientationControls
捕获的动作复制 OrbitControls
行为?
要创建设备定向轨道控制器,就像您在本演示中看到的那样,http://novak.us/labs/UmDemo/;它涉及修改现有的OrbitControls.js。
可以在 github 的提交中看到文件更改:https://github.com/snovak/three.js/commit/f6542ab3d95b1c746ab4d39ab5d3253720830dd3
几个月来我一直想做一个拉取请求。只是还没想好。需要大量清理。
你可以在这里下载我修改过的OrbitControls.js(我也有几个月没有合并了,结果可能会有所不同):https://raw.githubusercontent.com/snovak/three.js/master/examples/js/controls/OrbitControls.js
以下是您如何在自己的脚本中实现修改后的 OrbitControls:
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;
我希望这能让你到达你想去的地方! :-)
要使用 DeviceOrientationControls
,您必须在动画循环期间调用 controls.update()
,否则控件不会根据设备信息更新其位置。