pachacamac · September 11, 2015 17:28
diff --git a/visualizer.html b/visualizer.html
 <!DOCTYPE html>
 <html xmlns='http://www.w3.org/1999/xhtml'>
  <head>
    <meta content='text/html; charset=utf-8' http-equiv='Content-Type'>
    <title>visualize</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.min.js"></script>
    <script src="https://mrdoob.github.io/three.js/examples/js/controls/TrackballControls.js"></script>
  </head>
  <body>
  </body>
  <script>
    var Visualizer = (function(options){
      var camera, scene, renderer, controls, TO_RAD = Math.PI / 180;

      function init(){
        var width = 800, height = 600;
        renderer = new THREE.WebGLRenderer();
        renderer.setSize( width, height );
        document.body.appendChild( renderer.domElement );
        scene = new THREE.Scene();
        camera = new THREE.PerspectiveCamera(
            45,              // Field of view
            width / height,  // Aspect ratio
            .1,              // Near
            10000            // Far
        );
        camera.position.set( 8, 8, 8 );
        camera.lookAt( scene.position );

        controls = new THREE.TrackballControls( camera );
        controls.rotateSpeed = 1.0;
        controls.zoomSpeed = 1.2;
        controls.panSpeed = 0.8;
        controls.noZoom = false;
        controls.noPan = false;
        controls.staticMoving = true;
        controls.dynamicDampingFactor = 0.3;
        controls.keys = [ 65, 83, 68 ];
        //controls.addEventListener( 'change', render );

        renderer.setClearColor( 0x000000, 1);

        // add stuff
        addAxes(10);

        //target
        addCube(0,0,0,0xff0000);
        //player
        addCube(3,3,0,0x0000ff, .1, .1, .1);
        //shoot
        //scene.add(buildAxis(new THREE.Vector3(3,3,1),  new THREE.Vector3(1,1,1),  0xffffff, true));
        scene.add(aimLine(3,3,0, 135,30, 3));
      }

      function yaw_rotate(x1,y1,z1, yaw, x2,y2,z2){
        x2 = x2 || 0; y2 = y2 || 0; z2 = z2 || 0;
        return [
          ((x1-x2)*Math.cos(yaw*TO_RAD)-(y1-y2)*Math.sin(yaw*TO_RAD))+x2,
          ((y1-y2)*Math.cos(yaw*TO_RAD)+(x1-x2)*Math.sin(yaw*TO_RAD))+y2,
          z1
        ];
      }

      function pitch_rotate(x1,y1,z1, pitch, x2,y2,z2){
        x2 = x2 || 0; y2 = y2 || 0; z2 = z2 || 0;
        return [
          x1,
          ((y1-y2)*Math.cos(pitch*TO_RAD)-(z1-z2)*Math.sin(pitch*TO_RAD))+y2,
          ((y1-y2)*Math.sin(pitch*TO_RAD)+(z1-z2)*Math.cos(pitch*TO_RAD))+z2,
        ];
      }

      function aimLine(x,y,z, yaw,pitch, distance, color,dashed){
        yaw = -(180 - yaw)
        var d = Math.sqrt(Math.pow(y,2) + Math.pow(x,2));
        var x2 = x, y2 = y - d, z2 = z;
        // var q = pitch_rotate(x,y,z, pitch, x2,y2,z2);
        // q = yaw_rotate(q[0],q[1],q[2], yaw, x2,y2,z2);

        console.log(d);
        var q = yaw_rotate(x2,y2,z2, yaw, x,y,z);
        q = pitch_rotate(q[0],q[1],q[2], -pitch, x,y,z);
        x2 = q[0]; y2 = q[1]; z2 = q[2];
        // z2 = Math.tan(pitch * TO_RAD) * distance;
        addCube(x2,y2,z2,0xffff00);
        return buildAxis(new THREE.Vector3(x,y,z), new THREE.Vector3(x2,y2,z2), color||0xAAAAAA, dashed||false);
      }

      function addAxes(length){
        var axes = new THREE.Object3D();
        axes.add( buildAxis( new THREE.Vector3( 0, 0, 0 ), new THREE.Vector3( length, 0, 0 ), 0xFF0000, false ) ); // +X
        axes.add( buildAxis( new THREE.Vector3( 0, 0, 0 ), new THREE.Vector3( -length, 0, 0 ), 0xFF0000, true) ); // -X
        axes.add( buildAxis( new THREE.Vector3( 0, 0, 0 ), new THREE.Vector3( 0, length, 0 ), 0x00FF00, false ) ); // +Y
        axes.add( buildAxis( new THREE.Vector3( 0, 0, 0 ), new THREE.Vector3( 0, -length, 0 ), 0x00FF00, true ) ); // -Y
        axes.add( buildAxis( new THREE.Vector3( 0, 0, 0 ), new THREE.Vector3( 0, 0, length ), 0x0000FF, false ) ); // +Z
        axes.add( buildAxis( new THREE.Vector3( 0, 0, 0 ), new THREE.Vector3( 0, 0, -length ), 0x0000FF, true ) ); // -Z
        scene.add(axes);
      }

      function buildAxis( src, dst, colorHex, dashed ) {
        var geom = new THREE.Geometry(), mat;
        if(dashed) { mat = new THREE.LineDashedMaterial({ linewidth: 1, color: colorHex, dashSize: .1, gapSize: .1 });
        }else{ mat = new THREE.LineBasicMaterial({ linewidth: 1, color: colorHex });}
        geom.vertices.push( src.clone() );
        geom.vertices.push( dst.clone() );
        geom.computeLineDistances(); // This one is SUPER important, otherwise dashed lines will appear as simple plain lines
        var axis = new THREE.Line( geom, mat, THREE.LinePieces );
        return axis;
      }

      function addCube(x,y,z,color,w,h,d){
        w = w || .1;
        h = h || .1;
        d = d || .1;
        var geometry = new THREE.BoxGeometry(w, h, d);
        var material = new THREE.MeshBasicMaterial( { color: color } );
        cube = new THREE.Mesh( geometry, material );
        cube.translateX(x);
        cube.translateY(y);
        cube.translateZ(z);
        scene.add( cube );
        return cube;
      }

      function rotate(obj, x, y, z){
        var f = Math.PI / 180.0;
        obj.rotation.x = x * f;
        obj.rotation.y = y * f;
        obj.rotation.z = z * f;
      }


      function render() {
        requestAnimationFrame( render );
        controls.update();
        renderer.render( scene, camera );
      }

      init();
      render();

      // return {
      //   init: init,
      // };
    });

    document.addEventListener("DOMContentLoaded", function(event) {
      Visualizer();
    });

  </script>
 </html>
	<!DOCTYPE html>
	<html xmlns='http://www.w3.org/1999/xhtml'>
	<head>
	<meta content='text/html; charset=utf-8' http-equiv='Content-Type'>
	<title>visualize</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.min.js"></script>
	<script src="https://mrdoob.github.io/three.js/examples/js/controls/TrackballControls.js"></script>
	</head>
	<body>
	</body>
	<script>
	var Visualizer = (function(options){
	var camera, scene, renderer, controls, TO_RAD = Math.PI / 180;

	function init(){
	var width = 800, height = 600;
	renderer = new THREE.WebGLRenderer();
	renderer.setSize( width, height );
	document.body.appendChild( renderer.domElement );
	scene = new THREE.Scene();
	camera = new THREE.PerspectiveCamera(
	45, // Field of view
	width / height, // Aspect ratio
	.1, // Near
	10000 // Far
	);
	camera.position.set( 8, 8, 8 );
	camera.lookAt( scene.position );

	controls = new THREE.TrackballControls( camera );
	controls.rotateSpeed = 1.0;
	controls.zoomSpeed = 1.2;
	controls.panSpeed = 0.8;
	controls.noZoom = false;
	controls.noPan = false;
	controls.staticMoving = true;
	controls.dynamicDampingFactor = 0.3;
	controls.keys = [ 65, 83, 68 ];
	//controls.addEventListener( 'change', render );

	renderer.setClearColor( 0x000000, 1);

	// add stuff
	addAxes(10);

	//target
	addCube(0,0,0,0xff0000);
	//player
	addCube(3,3,0,0x0000ff, .1, .1, .1);
	//shoot
	//scene.add(buildAxis(new THREE.Vector3(3,3,1), new THREE.Vector3(1,1,1), 0xffffff, true));
	scene.add(aimLine(3,3,0, 135,30, 3));
	}

	function yaw_rotate(x1,y1,z1, yaw, x2,y2,z2){
	x2 = x2 \|\| 0; y2 = y2 \|\| 0; z2 = z2 \|\| 0;
	return [
	((x1-x2)Math.cos(yawTO_RAD)-(y1-y2)Math.sin(yawTO_RAD))+x2,
	((y1-y2)Math.cos(yawTO_RAD)+(x1-x2)Math.sin(yawTO_RAD))+y2,
	z1
	];
	}

	function pitch_rotate(x1,y1,z1, pitch, x2,y2,z2){
	x2 = x2 \|\| 0; y2 = y2 \|\| 0; z2 = z2 \|\| 0;
	return [
	x1,
	((y1-y2)Math.cos(pitchTO_RAD)-(z1-z2)Math.sin(pitchTO_RAD))+y2,
	((y1-y2)Math.sin(pitchTO_RAD)+(z1-z2)Math.cos(pitchTO_RAD))+z2,
	];
	}

	function aimLine(x,y,z, yaw,pitch, distance, color,dashed){
	yaw = -(180 - yaw)
	var d = Math.sqrt(Math.pow(y,2) + Math.pow(x,2));
	var x2 = x, y2 = y - d, z2 = z;
	// var q = pitch_rotate(x,y,z, pitch, x2,y2,z2);
	// q = yaw_rotate(q[0],q[1],q[2], yaw, x2,y2,z2);

	console.log(d);
	var q = yaw_rotate(x2,y2,z2, yaw, x,y,z);
	q = pitch_rotate(q[0],q[1],q[2], -pitch, x,y,z);
	x2 = q[0]; y2 = q[1]; z2 = q[2];
	// z2 = Math.tan(pitch * TO_RAD) * distance;
	addCube(x2,y2,z2,0xffff00);
	return buildAxis(new THREE.Vector3(x,y,z), new THREE.Vector3(x2,y2,z2), color\|\|0xAAAAAA, dashed\|\|false);
	}

	function addAxes(length){
	var axes = new THREE.Object3D();
	axes.add( buildAxis( new THREE.Vector3( 0, 0, 0 ), new THREE.Vector3( length, 0, 0 ), 0xFF0000, false ) ); // +X
	axes.add( buildAxis( new THREE.Vector3( 0, 0, 0 ), new THREE.Vector3( -length, 0, 0 ), 0xFF0000, true) ); // -X
	axes.add( buildAxis( new THREE.Vector3( 0, 0, 0 ), new THREE.Vector3( 0, length, 0 ), 0x00FF00, false ) ); // +Y
	axes.add( buildAxis( new THREE.Vector3( 0, 0, 0 ), new THREE.Vector3( 0, -length, 0 ), 0x00FF00, true ) ); // -Y
	axes.add( buildAxis( new THREE.Vector3( 0, 0, 0 ), new THREE.Vector3( 0, 0, length ), 0x0000FF, false ) ); // +Z
	axes.add( buildAxis( new THREE.Vector3( 0, 0, 0 ), new THREE.Vector3( 0, 0, -length ), 0x0000FF, true ) ); // -Z
	scene.add(axes);
	}

	function buildAxis( src, dst, colorHex, dashed ) {
	var geom = new THREE.Geometry(), mat;
	if(dashed) { mat = new THREE.LineDashedMaterial({ linewidth: 1, color: colorHex, dashSize: .1, gapSize: .1 });
	}else{ mat = new THREE.LineBasicMaterial({ linewidth: 1, color: colorHex });}
	geom.vertices.push( src.clone() );
	geom.vertices.push( dst.clone() );
	geom.computeLineDistances(); // This one is SUPER important, otherwise dashed lines will appear as simple plain lines
	var axis = new THREE.Line( geom, mat, THREE.LinePieces );
	return axis;
	}

	function addCube(x,y,z,color,w,h,d){
	w = w \|\| .1;
	h = h \|\| .1;
	d = d \|\| .1;
	var geometry = new THREE.BoxGeometry(w, h, d);
	var material = new THREE.MeshBasicMaterial( { color: color } );
	cube = new THREE.Mesh( geometry, material );
	cube.translateX(x);
	cube.translateY(y);
	cube.translateZ(z);
	scene.add( cube );
	return cube;
	}

	function rotate(obj, x, y, z){
	var f = Math.PI / 180.0;
	obj.rotation.x = x * f;
	obj.rotation.y = y * f;
	obj.rotation.z = z * f;
	}


	function render() {
	requestAnimationFrame( render );
	controls.update();
	renderer.render( scene, camera );
	}

	init();
	render();

	// return {
	// init: init,
	// };
	});

	document.addEventListener("DOMContentLoaded", function(event) {
	Visualizer();
	});

	</script>
	</html>
No results found