SabrinaMarkon · November 9, 2021 11:28 · ctkjose · Oct 22, 2020 · SabrinaMarkon · Oct 27, 2020
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
 <script type="text/javascript" src="https://getfirebug.com/firebug-lite-debug.js"></script>
 <meta name="description" content="Three.js Custom AxisHelper Axis Arrows" />
  	<meta charset="utf-8" />
 	<title>Three.js Custom AxisHelper Axis Arrows</title>
 	<style>
 		#container {
 			background: #000000;
 			width: 100%;
 			height: 100%;
 		}
  </style>
 <meta charset=utf-8 />
 <title>Three.js Custom AxisHelper Axis Arrows</title>
  
 <style id="jsbin-css">

 </style>
 </head>
 <body>
 <div id="container">
 </div>


 </body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/85/three.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.5/dat.gui.min.js"></script>
 	<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>
 	<script src="http://uopeopleweb.com/js/math.js"></script>
 	<script type="text/javascript">

 	// set the scene size
 	var WIDTH = 500, HEIGHT = 500;

 	// set some camera attributes
 	var VIEW_ANGLE = 45, ASPECT = WIDTH / HEIGHT, NEAR = 1, FAR = 1000;

 	// get the DOM element to attach to
 	var $container = $('#container');

 	// create a WebGL renderer, camera, and a scene
      
    var renderer = new THREE.WebGLRenderer();
 	var scene = new THREE.Scene();
 	var clock = new THREE.Clock();
 	var camera = new THREE.PerspectiveCamera(VIEW_ANGLE,ASPECT,NEAR,FAR);
 	// Set position for camera
 	camera.position.z = 40;
    camera.position.y = 15;
      
 	// Add camera to scene
 	scene.add(camera)
   
 	// set up the camera controls.  Please keep in mind that what this does is move the entire scene around.
 	// because the entire scene is moving the position of the camera and lights in relation to objects within 
 	// the scene doesn't change so the lighting on the surface of the object(s) will not change either
 	var cameraControls = new THREE.OrbitControls(camera, renderer.domElement);
 	cameraControls.addEventListener( 'mousemove', renderer );
    cameraControls.autoRotate = true;
      
 	// start the renderer
 	renderer.setSize(WIDTH, HEIGHT);

 	// attach the render-supplied DOM element
 	$container.append(renderer.domElement);

 	// ----------------------------------------------------------------------------------------
 	//  END OF THE STANDARD CODE FOR THE ASSIGNMENT
 	//  Following this is where you must place your own custom code to complete the assignment
 	// ----------------------------------------------------------------------------------------
    
    
    //Function to create/draw Axis helpers
    drawAxisHelpers = function(params) {
      var geometryArrow, meshXArrow, geometryXAxis, materialXAxis, meshXAxis, 
          meshYArrow, geometryYAxis, materialYAxis, meshYAxis, meshZArrow, 
          geometryZAxis, materialZAxis, meshZAxis;

      // This function allows for the changing of parameters for all the axis helpers. I have used .2 as radius
      // and 10 for height for this assignment because it makes the helpers the most visible for my scene
      if (params == null) {
        params = {};
      }
      params.radius = params.radius || 0.20;
      params.height = params.height || 10;
      params.scene = params.scene || scene;
      geometryArrow = new THREE.CylinderGeometry(0, 2 * params.radius, params.height / 5);

      // This part defines and adds the X axis helper
      materialXAxis = new THREE.MeshBasicMaterial({
        color: 0xFF0000
      });
      geometryXAxis = new THREE.CylinderGeometry(params.radius, params.radius, params.height);
      meshXAxis = new THREE.Mesh(geometryXAxis, materialXAxis);
      meshXArrow = new THREE.Mesh(geometryArrow, materialXAxis);
      meshXAxis.add(meshXArrow);
      meshXArrow.position.y += params.height / 2;
      meshXAxis.rotation.z -= 90 * Math.PI / 180;
      meshXAxis.position.x += params.height / 2;
      params.scene.add(meshXAxis);

      // This part defines and adds the Y axis helper
      materialYAxis = new THREE.MeshBasicMaterial({
        color: 0x00FF00
      });
      geometryYAxis = new THREE.CylinderGeometry(params.radius, params.radius, params.height);
      meshYAxis = new THREE.Mesh(geometryYAxis, materialYAxis);
      meshYArrow = new THREE.Mesh(geometryArrow, materialYAxis);
      meshYAxis.add(meshYArrow);
      meshYArrow.position.y += params.height / 2;
      meshYAxis.position.y += params.height / 2;
      params.scene.add(meshYAxis);

      // This part defines and adds the Z axis helper
      materialZAxis = new THREE.MeshBasicMaterial({
        color: 0x0000FF
      });
      geometryZAxis = new THREE.CylinderGeometry(params.radius, params.radius, params.height);
      meshZAxis = new THREE.Mesh(geometryZAxis, materialZAxis);
      meshZArrow = new THREE.Mesh(geometryArrow, materialZAxis);
      meshZAxis.add(meshZArrow);
      meshZAxis.rotation.x += 90 * Math.PI / 180;
      meshZArrow.position.y += params.height / 2;
      meshZAxis.position.z += params.height / 2;
      return params.scene.add(meshZAxis);
    };
  // Run the function to add/draw the axis helpers
  drawAxisHelpers();
      

      
 	// Add the camera
      scene.add(camera);
      
    // Create the gray plane and position it behind the molecule
    var geometryPlane = new THREE.PlaneBufferGeometry(100, 100, 8, 8);
    var materialPlane = new THREE.MeshLambertMaterial({ color: 0xDCDCDC, side: THREE.DoubleSide });
    materialPlane.flatShading = true;
    var plane = new THREE.Mesh(geometryPlane, materialPlane);
    plane.position.y = 0;
    // Rotate plane to make it a floor
    plane.rotateOnAxis(new THREE.Vector3( 1, 0, 0 ), THREE.Math.degToRad(90));
    
    // Add the plane to the scene
    scene.add(plane);
      
    // Add AmbientLight
    var light = new THREE.AmbientLight(0xffffff);
    scene.add(light);

 	// ----------------------------------------------------------------------------------------
 	// END OF YOUR CUSTOM CODE FOR THE ASSIGNMENT
 	// The rendering functions that follow are standard and can be used for this assignment.  
 	// You are welcome to customize them or create your own if you desire, however, you can 
 	// simply use the code provided.
 	//
    
 	// Standard functions for rendering the scene.  Notice how we have the animate function 
 	// which submits a call to requestAnimationFrame to call animate.   This creates a loop
 	// that will render the scene again whenever something within the scene changes.
 	function animate() {
 		requestAnimationFrame(animate);
 		render();
 	}

 	function render() {
 		cameraControls.update();
 		renderer.render(scene, camera);
 	}
 	animate();
 	</script>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<script type="text/javascript" src="https://getfirebug.com/firebug-lite-debug.js"></script>
	<meta name="description" content="Three.js Custom AxisHelper Axis Arrows" />
	<meta charset="utf-8" />
	<title>Three.js Custom AxisHelper Axis Arrows</title>
	<style>
	#container {
	background: #000000;
	width: 100%;
	height: 100%;
	}
	</style>
	<meta charset=utf-8 />
	<title>Three.js Custom AxisHelper Axis Arrows</title>

	<style id="jsbin-css">

	</style>
	</head>
	<body>
	<div id="container">
	</div>


	</body>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/85/three.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.5/dat.gui.min.js"></script>
	<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>
	<script src="http://uopeopleweb.com/js/math.js"></script>
	<script type="text/javascript">

	// set the scene size
	var WIDTH = 500, HEIGHT = 500;

	// set some camera attributes
	var VIEW_ANGLE = 45, ASPECT = WIDTH / HEIGHT, NEAR = 1, FAR = 1000;

	// get the DOM element to attach to
	var $container = $('#container');

	// create a WebGL renderer, camera, and a scene

	var renderer = new THREE.WebGLRenderer();
	var scene = new THREE.Scene();
	var clock = new THREE.Clock();
	var camera = new THREE.PerspectiveCamera(VIEW_ANGLE,ASPECT,NEAR,FAR);
	// Set position for camera
	camera.position.z = 40;
	camera.position.y = 15;

	// Add camera to scene
	scene.add(camera)

	// set up the camera controls. Please keep in mind that what this does is move the entire scene around.
	// because the entire scene is moving the position of the camera and lights in relation to objects within
	// the scene doesn't change so the lighting on the surface of the object(s) will not change either
	var cameraControls = new THREE.OrbitControls(camera, renderer.domElement);
	cameraControls.addEventListener( 'mousemove', renderer );
	cameraControls.autoRotate = true;

	// start the renderer
	renderer.setSize(WIDTH, HEIGHT);

	// attach the render-supplied DOM element
	$container.append(renderer.domElement);

	// ----------------------------------------------------------------------------------------
	// END OF THE STANDARD CODE FOR THE ASSIGNMENT
	// Following this is where you must place your own custom code to complete the assignment
	// ----------------------------------------------------------------------------------------


	//Function to create/draw Axis helpers
	drawAxisHelpers = function(params) {
	var geometryArrow, meshXArrow, geometryXAxis, materialXAxis, meshXAxis,
	meshYArrow, geometryYAxis, materialYAxis, meshYAxis, meshZArrow,
	geometryZAxis, materialZAxis, meshZAxis;

	// This function allows for the changing of parameters for all the axis helpers. I have used .2 as radius
	// and 10 for height for this assignment because it makes the helpers the most visible for my scene
	if (params == null) {
	params = {};
	}
	params.radius = params.radius \|\| 0.20;
	params.height = params.height \|\| 10;
	params.scene = params.scene \|\| scene;
	geometryArrow = new THREE.CylinderGeometry(0, 2 * params.radius, params.height / 5);

	// This part defines and adds the X axis helper
	materialXAxis = new THREE.MeshBasicMaterial({
	color: 0xFF0000
	});
	geometryXAxis = new THREE.CylinderGeometry(params.radius, params.radius, params.height);
	meshXAxis = new THREE.Mesh(geometryXAxis, materialXAxis);
	meshXArrow = new THREE.Mesh(geometryArrow, materialXAxis);
	meshXAxis.add(meshXArrow);
	meshXArrow.position.y += params.height / 2;
	meshXAxis.rotation.z -= 90 * Math.PI / 180;
	meshXAxis.position.x += params.height / 2;
	params.scene.add(meshXAxis);

	// This part defines and adds the Y axis helper
	materialYAxis = new THREE.MeshBasicMaterial({
	color: 0x00FF00
	});
	geometryYAxis = new THREE.CylinderGeometry(params.radius, params.radius, params.height);
	meshYAxis = new THREE.Mesh(geometryYAxis, materialYAxis);
	meshYArrow = new THREE.Mesh(geometryArrow, materialYAxis);
	meshYAxis.add(meshYArrow);
	meshYArrow.position.y += params.height / 2;
	meshYAxis.position.y += params.height / 2;
	params.scene.add(meshYAxis);

	// This part defines and adds the Z axis helper
	materialZAxis = new THREE.MeshBasicMaterial({
	color: 0x0000FF
	});
	geometryZAxis = new THREE.CylinderGeometry(params.radius, params.radius, params.height);
	meshZAxis = new THREE.Mesh(geometryZAxis, materialZAxis);
	meshZArrow = new THREE.Mesh(geometryArrow, materialZAxis);
	meshZAxis.add(meshZArrow);
	meshZAxis.rotation.x += 90 * Math.PI / 180;
	meshZArrow.position.y += params.height / 2;
	meshZAxis.position.z += params.height / 2;
	return params.scene.add(meshZAxis);
	};
	// Run the function to add/draw the axis helpers
	drawAxisHelpers();



	// Add the camera
	scene.add(camera);

	// Create the gray plane and position it behind the molecule
	var geometryPlane = new THREE.PlaneBufferGeometry(100, 100, 8, 8);
	var materialPlane = new THREE.MeshLambertMaterial({ color: 0xDCDCDC, side: THREE.DoubleSide });
	materialPlane.flatShading = true;
	var plane = new THREE.Mesh(geometryPlane, materialPlane);
	plane.position.y = 0;
	// Rotate plane to make it a floor
	plane.rotateOnAxis(new THREE.Vector3( 1, 0, 0 ), THREE.Math.degToRad(90));

	// Add the plane to the scene
	scene.add(plane);

	// Add AmbientLight
	var light = new THREE.AmbientLight(0xffffff);
	scene.add(light);

	// ----------------------------------------------------------------------------------------
	// END OF YOUR CUSTOM CODE FOR THE ASSIGNMENT
	// The rendering functions that follow are standard and can be used for this assignment.
	// You are welcome to customize them or create your own if you desire, however, you can
	// simply use the code provided.
	//

	// Standard functions for rendering the scene. Notice how we have the animate function
	// which submits a call to requestAnimationFrame to call animate. This creates a loop
	// that will render the scene again whenever something within the scene changes.
	function animate() {
	requestAnimationFrame(animate);
	render();
	}

	function render() {
	cameraControls.update();
	renderer.render(scene, camera);
	}
	animate();
	</script>
	</html>