Skip to content

Instantly share code, notes, and snippets.

@BeauxBarker

BeauxBarker/index.html

Created October 10, 2019 01:52
Show Gist options
  • Save BeauxBarker/b252ab78935d404e95cc4b596b8a3109 to your computer and use it in GitHub Desktop.
Save BeauxBarker/b252ab78935d404e95cc4b596b8a3109 to your computer and use it in GitHub Desktop.
Download ZIP
Three.js Methane Molecule #2 CS4406 Computer Graphics - Exercise #5 // source https://jsbin.com/riguwud
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://getfirebug.com/firebug-lite-debug.js"></script>
<meta name="description" content="CS4406 Computer Graphics - Exercise #5" />
<meta charset="utf-8" />
<title>Three.js Methane Molecule #2</title>
<style>
#container {
background: #666666;
color: #cccccc;
width: 100%;
height: 100%;
padding: .5rem;
}
</style>
<meta charset=utf-8 />
<title>Three.js Methane Molecule
Assignment 5 </title>
<style id="jsbin-css">
</style>
</head>
<body>
<div id="container">
<h4>Drag mouse to translate/rotate. Scroll mouse to scale.</h4>
</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 src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/Detector.js"></script>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script type="text/javascript">
// set the scene size
var WIDTH = 400,
HEIGHT = 400;
// set some camera attributes
var VIEW_ANGLE = 45,
ASPECT = WIDTH / HEIGHT,
NEAR = 1,
FAR = 5000;
// get the DOM element to attach to
var $container = $('#container');
// create a WebGL renderer
var renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
//create scene
var scene = new THREE.Scene();
scene.background = new THREE.Color(0x888888);
var clock = new THREE.Clock();
//create camera and add to scene
var camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR);
camera.position.z = 200;
scene.add(camera)
//diable rotating camera
var cameraControls = new THREE.OrbitControls(camera, renderer.domElement);
//cameraControls.addEventListener('mousemove', renderer);
//cameraControls.autoRotate = true;
cameraControls.enabled = false;
// 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
// ----------------------------------------------------------------------------------------
// create a point light and add to scene
var light = new THREE.SpotLight(0xffffff);
light.castShadow = true;
light.position.set(40, 40, 200);
scene.add(light);
//Set up shadow properties for the light
//code from https://threejs.org/docs/#api/lights/shadows/SpotLightShadow
light.shadow.mapSize.width = 200; // default
light.shadow.mapSize.height = 200; // default
light.shadow.camera.near = 0.5; // default
light.shadow.camera.far = 600 // defaul
//helper is useful in locating shadows, but is
//not necessary for viewing
//var helper = new THREE.CameraHelper(light.shadow.camera);
//scene.add(helper);
//create "molecule" that will hold the atoms
var molecule = new THREE.Object3D();
//create colors of materials
var blueMaterial = new THREE.MeshStandardMaterial({color: 0x038dff});
var redMaterial = new THREE.MeshStandardMaterial({color: 0xff0000});
var whiteMaterial = new THREE.MeshStandardMaterial({color: 0xffffff});
//create carbon atom
var carbonGeometry = new THREE.SphereBufferGeometry(20, 32, 32);
var carbon = new THREE.Mesh(carbonGeometry, redMaterial);
carbon.castShadow = true;
carbon.receiveShadow = true;
molecule.add(carbon);
// create hydrogen atom and cylinder to use as model for others
var hydrogenGeometry = new THREE.SphereBufferGeometry(7, 16, 16);
hydrogenGeometry.translate(0, 30, 0);
var hydrogen = new THREE.Mesh(hydrogenGeometry, blueMaterial);
hydrogen.castShadow = true;
hydrogen.receiveShadow = true;
var bondGeometry = new THREE.CylinderGeometry(3, 3, 30, 16);
bondGeometry.translate(0, 15, 0);
var bond = new THREE.Mesh(bondGeometry, whiteMaterial);
bond.castShadow = true;
bond.receiveShadow = true;
//create atom-bond object to combine hydrogen and bond
var atomBond = new THREE.Object3D();
atomBond.add(hydrogen);
atomBond.add(bond);
//create 4 copies of the atomBond to add hydrogen to the Carbon
var h1 = atomBond.clone();
h1.position.setY(15);
molecule.add(h1);
var h2 = atomBond.clone();
h2.position.setX(10);
h2.position.setY(-10);
h2.position.setZ(-10);
h2.rotateZ(Math.PI * 4 / 3);
h2.rotateX(Math.PI * 7/4);
molecule.add(h2);
var h3 = atomBond.clone();
h3.position.setY(-12);
h3.position.setZ(12);
h3.rotateX(Math.PI * 3 / 4);
molecule.add(h3);
var h4 = atomBond.clone();
h4.rotateZ(Math.PI * 2 / 3);
h4.rotateX(Math.PI * 7 / 4);
h4.position.setX(-10);
h4.position.setZ(-10);
h4.position.setY(-10);
molecule.add(h4);
//add the whole molecule to the scene
scene.add(molecule);
//add plane to the scene
var planeGeometry = new THREE.PlaneBufferGeometry(300, 300, 32, 32);
var planeMaterial = new THREE.MeshStandardMaterial({
color: 0xcc00cc,
side: THREE.DoubleSide
});
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.position.set(0, 0, -200);
plane.receiveShadow = true;
scene.add(plane);
//Using mouse to rotate the molecule
//code from https://gamedev.stackexchange.com/a/130930
var isDragging = false;
var previousMousePosition = {
x: 0,
y: 0
};
const toRadians = (angle) => {
return angle * (Math.PI / 180);
};
const toDegrees = (angle) => {
return angle * (180 / Math.PI);
};
const renderArea = renderer.domElement;
renderArea.addEventListener('mousedown', (e) => {
isDragging = true;
});
renderArea.addEventListener('mousemove', (e) => {
var deltaMove = {
x: e.offsetX - previousMousePosition.x,
y: e.offsetY - previousMousePosition.y
};
if (isDragging) {
let deltaRotationQuaternion = new THREE.Quaternion().
setFromEuler(
new THREE.Euler(toRadians(deltaMove.y * 1), toRadians(deltaMove.x * 1), 0, 'XYZ')
);
molecule.quaternion.multiplyQuaternions(deltaRotationQuaternion, molecule.quaternion);
}
previousMousePosition = {
x: e.offsetX,
y: e.offsetY
};
});
document.addEventListener('mouseup', (e) => {
isDragging = false;
});
// 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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment