Skip to content

Instantly share code, notes, and snippets.

@SabrinaMarkon
Last active November 9, 2021 11:28
Show Gist options
  • Save SabrinaMarkon/80805d3851e157bf1523704316619c9d to your computer and use it in GitHub Desktop.
Save SabrinaMarkon/80805d3851e157bf1523704316619c9d to your computer and use it in GitHub Desktop.
Three.js Custom AxisHelper Axis Arrows - https://jsbin.com/vaqudin
<!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>
@SabrinaMarkon
Copy link
Author

Nice, this is exactly what I was looking for...

Thanks!!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment