FBX Position
by Amit Tank
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>
<div class="playerbox" id="playerbox"></div>
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;
}
.playerbox {
height: 500px;
width: 400px;
background: #bebebe;
display: block;
position: relative;
}
JavaScript
var scene, camera, renderer, mesh, light, directionalLight, container, geometry, controls, width, height, object1, texture;
var clock = new THREE.Clock();
var delta = 0;
var mixers = [];
function generateMarker() {
jQuery(".txt-blk").each(function(a, b) {
console.log(a + 1);
});
}
function init() {
container = jQuery("#playerbox")[0];
width = jQuery("#playerbox").innerWidth();
height = jQuery("#playerbox").innerHeight();
scene = new THREE.Scene();
scene.background = new THREE.Color(0x595959);
camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
var vFOV = camera.fov * Math.PI / 180; // convert vertical fov to radians
var dist = height / (2 * Math.tan(camera.fov * Math.PI / 360));
var vheight = 2 * Math.tan(vFOV / 2) * dist; // visible height
camera.position.set(0, 0, 0);
var manager = new THREE.LoadingManager();
manager.crossOrigin = '';
manager.onProgress = function(item, loaded, total) {
console.log(item, loaded, total);
};
texture = new THREE.TextureLoader().load("https://security-press.com/fbx/model/DigestiveSystem_2k.png", function(tx) {
tx.anisotropy = 0;
tx.magFilter = THREE.NearestFilter;
tx.minFilter = THREE.LinearFilter;
});
//var material = new THREE.MeshBasicMaterial();
//material.transparent =true
var material = new THREE.MeshStandardMaterial({map: texture, roughness: 0, metalness:0.4,fog:true,});
material.skinning = true
//var material=new THREE.MeshLambertMaterial({ map: texture});
var loader = new THREE.FBXLoader(manager);
loader.crossOrigin = '';
loader.load('https://security-press.com/fbx/model/FBXHighPoly.fbx', function(object) {
// object.materials[0].shading = THREE.SmoothShading;
// object.computeVertexNormals();
object.traverse(function(child) {
if (child instanceof THREE.Mesh) {
child.material = material;
child.castShadow = true;
child.receiveShadow = true;
...