FBX Position
HTML
<script src="https://security-press.com/fbx/js/jquery.js"></script>
<script src="https://security-press.com/fbx/js/three.js"></script>
<script src="https://security-press.com/fbx/js/inflate.min.js"></script>
<script src="https://security-press.com/fbx/js/FBXLoader.js"></script>
<script src="https://security-press.com/fbx/js/orbitcontrols.js"></script>
CSS
body {
margin: 0px;
background-color: #000000;
color: #fff;
text-align: center;
overflow: hidden;
}
#info {
position: absolute;
top: 0px;
width: 100%;
padding: 15pt;
z-index: 100;
}
JavaScript
var scene, camera, renderer, mesh, light, container, geometry, controls;
var mixers = [];
var clock = new THREE.Clock();
function init() {
container = document.createElement('div');
document.body.appendChild(container);
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 30, 130);
// var gridHelper = new THREE.GridHelper(200, 10);
// scene.add(gridHelper);
var manager = new THREE.LoadingManager();
manager.crossOrigin = '';
manager.onProgress = function(item, loaded, total) {
console.log(item, loaded, total);
};
var loader = new THREE.FBXLoader(manager);
loader.crossOrigin = '';
// loader.load('the/FBXHighPoly.fbx', function(object) {
loader.load('https://security-press.com/fbx/model/DigestiveAnimation.fbx', function(object) {
object.mixer = new THREE.AnimationMixer( object );
mixers.push( object.mixer );
var box3 = new THREE.Box3().setFromObject(object);
var shift = box3.getCenter();
object.position.sub(shift);
var action = object.mixer.clipAction( object.animations[ 0 ] );
action.play();
scene.add(object);
}, onProgress, onError);
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
controls = new THREE.OrbitControls(camera, renderer.domElement);
light = new THREE.HemisphereLight(0xffffff, 0x444444, 1.0);
light.position.set(0, 1, 0);
scene.add(light);
light = new THREE.DirectionalLight(0xffffff, 1.0);
light.position.set(0, 1, 0);
scene.add(light);
animate();
}
var onProgress = function(xhr) {
if (xhr.lengthComputable) {
var percentComplete = xhr.loaded / xhr.total * 100;
console.log(Math.round(percentComplete, 2) + '% downloaded');
}
};
var onError = function(xhr) {
console.error(xhr);
};
function animate() {
requestAnimationFrame( animate );
if ( mixers.length > 0 ) {
for (...