JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://threejs.org/build/three.min.js"></script>
<script src="http://threejs.org/examples/js/Detector.js"></script>
<script src="http://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="http://threejs.org/examples/js/controls/TransformControls.js"></script>
<script src="http://eddy.cx/dev/3d/models.js"></script>
CSS
body { overflow: hidden; }
JavaScript
;;var inner = new THREE.Object3D(),
arm = new THREE.Object3D(),
model = new THREE.Object3D();
var totalPitch = 0, totalYaw = 0, totalRoll = 0;
var prevMat = new THREE.Matrix4();
function calculateAngles() {
var mat = model.matrix;
mat.transpose();
var diff = new THREE.Matrix4();
diff.copy(mat);
diff.multiply(prevMat);
var e = new THREE.Euler();
e.setFromRotationMatrix(diff, 'XZY');
totalPitch -= e.z;
totalYaw -= e.y;
totalRoll -= e.x;
prevMat.copy(mat);
prevMat.transpose();
updateSimAngles(totalPitch, totalRoll);
}
////////////////////////////////////////////////
// No need to change anything below this line
////////////////////////////////////////////////
function updateSimAngles(pitch, roll) {
if (!inner || !arm)
return;
inner.rotation.set(roll, 0, pitch, 'ZXY');
arm.rotation.z = pitch;
render();
}
var camera, scene, renderer;
var red = new THREE.MeshPhongMaterial( { color: 0xfe0000 } );
var black = new THREE.MeshPhongMaterial( { color: 0x222222 } );
function render() {
renderer.render(scene, camera);
}
function init() {
camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.z = 15;
camera.position.y = 5;
camera.lookAt(new THREE.Vector3(0, 1, 0));
scene = new THREE.Scene();
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setClearColor(0xffffff);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
var container = document.createElement('div');
container.appendChild(renderer.domElement);
document.body.appendChild(container);
var controls = new THREE.OrbitControls(camera);
controls.damping = 0.05;
controls.addEventListener('change', render);
window.addEventListener('resize', onWindowResize, false);
// Grid
var size = 15;
var geometry = new THREE.Geometry();
var material = new THREE.LineBasicMaterial({ color: 0x47adc9 });
for (var i =...