FBX Position

by Paul West

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="canvas3d" 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{width:420px; height:630px; 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 mixers = [];
var raycaster = new THREE.Raycaster(); // create once
var mouse = new THREE.Vector2(); 

var ochild =[];

var sprites =[];
function generateMarker()
{
	jQuery(".txt-blk").each(function(a,b){
		var id = jQuery(this).attr("id");
		jQuery("body").append("<canvas id='canvas"+id+"' width='48' height='48'></canvas>");
		var num = a+1;
		var canid = id;
		createMarker(num,canid);
	});
}

var lastpos=-5;

function createMarker(text,elname)
{
	var canvas = document.getElementById("canvas"+elname);
	var ctx = canvas.getContext("2d");
	var x = 24;
	var y = 24;
	var radius = 23;
	var startAngle = 0;
	var endAngle = Math.PI * 2;
	ctx.fillStyle = "rgb(0, 0, 0)";
	ctx.beginPath();
	ctx.arc(x, y, radius, startAngle, endAngle);
	ctx.fill();
	ctx.strokeStyle = "rgb(255, 255, 255)";
	ctx.lineWidth = 3;
	ctx.beginPath();
	ctx.arc(x, y, radius, startAngle, endAngle);
	ctx.stroke();
	ctx.fillStyle = "rgb(255, 255, 255)";
	ctx.font = "22px sans-serif";
	ctx.textAlign = "center";
	ctx.textBaseline = "middle";
	ctx.fillText(text, x, y);
	jQuery("#canvas"+elname).on("click",function(){
			jQuery(".txt-blk").hide();
			jQuery("#"+elname).show();
	});

	var numberTexture = new THREE.CanvasTexture(document.querySelector("#canvas"+elname));

    var spriteMaterial = new THREE.SpriteMaterial({
        map: numberTexture,
        alphaTest: 0.5,
        transparent: true,
        depthTest: false,
        depthWrite: false,
		useScreenCoordinates : false
    });

    sprite = new THREE.Sprite(spriteMaterial);
	sprite.name = "mark"+text;
	var posx=posy=0;
	if(text==2)
	{
		 posx = -10; 
		 posy = 8;
	}
	else if(text==3)
	{
		 posx = 10;
		 posy = 15;
	}
	else
	{
		 posx =5;
		 posy =-10;
	}
	sprite.position.set(posx, posy, 0);
    sprite.scale.set(2, 2, 1);
	sprites.push(sprite);
    scene.add(sprite);
	lastpos = lastpos +...