|
|
@@ -1,172 +0,0 @@
|
|
|
-<!DOCTYPE html>
|
|
|
-<html lang="en">
|
|
|
- <head>
|
|
|
- <title>three.js webgl - gimbal lock</title>
|
|
|
- <meta charset="utf-8" />
|
|
|
- <meta
|
|
|
- name="viewport"
|
|
|
- content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
|
|
|
- />
|
|
|
- <style>
|
|
|
- body {
|
|
|
- color: #000;
|
|
|
- font-family: Monospace;
|
|
|
- font-size: 13px;
|
|
|
- text-align: center;
|
|
|
- font-weight: bold;
|
|
|
-
|
|
|
- background-color: #fff;
|
|
|
- margin: 0px;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
-
|
|
|
- #info {
|
|
|
- color: #000;
|
|
|
- position: absolute;
|
|
|
- top: 0px;
|
|
|
- width: 100%;
|
|
|
- padding: 5px;
|
|
|
- }
|
|
|
-
|
|
|
- a {
|
|
|
- color: red;
|
|
|
- }
|
|
|
- </style>
|
|
|
- </head>
|
|
|
-
|
|
|
- <body>
|
|
|
- <div id="container"></div>
|
|
|
- <div id="info">
|
|
|
- <a href="http://threejs.org" target="_blank">three.js</a> - gimbal lock
|
|
|
- example
|
|
|
- <p>
|
|
|
- The object slowly rotates back and forth; one of its Euler angle
|
|
|
- components is close to pi/2.
|
|
|
- </p>
|
|
|
- <p>
|
|
|
- Every frame, with probability 0.5, the orientation is transformed into a
|
|
|
- quaternion then back into Euler angles.
|
|
|
- </p>
|
|
|
- <p>
|
|
|
- This causes an observable glitch when the calculation is imprecise due
|
|
|
- to gimbal lock.
|
|
|
- </p>
|
|
|
- </div>
|
|
|
-
|
|
|
- <script src="../build/three.js"></script>
|
|
|
-
|
|
|
- <script src="js/controls/OrbitControls.js"></script>
|
|
|
-
|
|
|
- <script src="js/libs/stats.min.js"></script>
|
|
|
-
|
|
|
- <script>
|
|
|
- var stats;
|
|
|
-
|
|
|
- var camera, controls, scene, renderer, mesh;
|
|
|
-
|
|
|
- init();
|
|
|
- render(); // remove when using next line for animation loop (requestAnimationFrame)
|
|
|
- animate();
|
|
|
-
|
|
|
- function init() {
|
|
|
- scene = new THREE.Scene();
|
|
|
- scene.fog = new THREE.FogExp2(0xcccccc, 0.002);
|
|
|
-
|
|
|
- renderer = new THREE.WebGLRenderer();
|
|
|
- renderer.setClearColor(scene.fog.color);
|
|
|
- renderer.setPixelRatio(window.devicePixelRatio);
|
|
|
- renderer.setSize(window.innerWidth, window.innerHeight);
|
|
|
-
|
|
|
- var container = document.getElementById('container');
|
|
|
- container.appendChild(renderer.domElement);
|
|
|
-
|
|
|
- camera = new THREE.PerspectiveCamera(
|
|
|
- 60,
|
|
|
- window.innerWidth / window.innerHeight,
|
|
|
- 1,
|
|
|
- 1000
|
|
|
- );
|
|
|
- camera.position.copy(new THREE.Vector3(-10, -22, 17));
|
|
|
- camera.rotation.copy(new THREE.Euler(0.9, -0.3, 0.4, 'XYZ'));
|
|
|
-
|
|
|
- controls = new THREE.OrbitControls(camera, renderer.domElement);
|
|
|
- controls.addEventListener('change', render); // remove when using animation loop
|
|
|
- // enable animation loop when using damping or autorotation
|
|
|
- //controls.enableDamping = true;
|
|
|
- //controls.dampingFactor = 0.25;
|
|
|
- controls.enableZoom = false;
|
|
|
-
|
|
|
- // world
|
|
|
-
|
|
|
- var geometry = new THREE.CylinderGeometry(0, 10, 30, 16, 10);
|
|
|
- var material = new THREE.MeshPhongMaterial({
|
|
|
- color: 0xffffff,
|
|
|
- shading: THREE.FlatShading,
|
|
|
- });
|
|
|
-
|
|
|
- mesh = new THREE.Mesh(geometry, material);
|
|
|
- scene.add(mesh);
|
|
|
-
|
|
|
- // lights
|
|
|
-
|
|
|
- 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);
|
|
|
-
|
|
|
- //
|
|
|
-
|
|
|
- stats = new Stats();
|
|
|
- container.appendChild(stats.dom);
|
|
|
-
|
|
|
- //
|
|
|
-
|
|
|
- window.addEventListener('resize', onWindowResize, false);
|
|
|
- }
|
|
|
-
|
|
|
- function onWindowResize() {
|
|
|
- camera.aspect = window.innerWidth / window.innerHeight;
|
|
|
- camera.updateProjectionMatrix();
|
|
|
-
|
|
|
- renderer.setSize(window.innerWidth, window.innerHeight);
|
|
|
- }
|
|
|
-
|
|
|
- function animate() {
|
|
|
- requestAnimationFrame(animate);
|
|
|
-
|
|
|
- controls.update(); // required if controls.enableDamping = true, or if controls.autoRotate = true
|
|
|
-
|
|
|
- stats.update();
|
|
|
-
|
|
|
- render();
|
|
|
- }
|
|
|
-
|
|
|
- var startTime = Date.now();
|
|
|
-
|
|
|
- function render() {
|
|
|
- var timer = (Date.now() - startTime) * 0.00025;
|
|
|
- var theta = Math.PI / 2 + Math.sin(timer) * 0.1;
|
|
|
- // var theta = 1.575;
|
|
|
-
|
|
|
- var euler = new THREE.Euler(0.7, theta, 0.5, 'ZYX');
|
|
|
-
|
|
|
- if (Math.random() < 0.5) {
|
|
|
- let quat = new THREE.Quaternion().setFromEuler(euler);
|
|
|
- let matrix = new THREE.Matrix4().makeRotationFromQuaternion(quat);
|
|
|
- var newEuler = new THREE.Euler().setFromRotationMatrix(matrix, 'ZYX');
|
|
|
-
|
|
|
- euler = newEuler;
|
|
|
- }
|
|
|
- mesh.setRotationFromEuler(euler);
|
|
|
-
|
|
|
- renderer.render(scene, camera);
|
|
|
- }
|
|
|
- </script>
|
|
|
- </body>
|
|
|
-</html>
|
TheophileMot