Skip to content

Instantly share code, notes, and snippets.

@BeauxBarker

BeauxBarker/index.html

Created October 9, 2019 23:49
Show Gist options
  • Save BeauxBarker/944725dabce360e83cac0dbfdb942f1a to your computer and use it in GitHub Desktop.
Save BeauxBarker/944725dabce360e83cac0dbfdb942f1a to your computer and use it in GitHub Desktop.
Download ZIP
// source https://jsbin.com
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 - Assignment #5" />
<meta charset="utf-8" />
<title>Assignment 5 # for CS4406 Computer Graphics</title>
<style>
#container {
background: #000;
width: 100%;
height: 100%;
}
</style>
<meta charset=utf-8 />
<style id="jsbin-css"></style>
</head>
<body>
<div id="container"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="http://uopeopleweb.com/js/dat.gui.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r58/three.min.js"></script>
<script src="http://uopeopleweb.com/js/OrbitControls.js"></script>
<script src="http://uopeopleweb.com/js/math.js"></script>
<script src="http://uopeopleweb.com/js/Detector.js"></script>
<script type="text/javascript">
// set the scene size
var WIDTH = 600, HEIGHT = 600;
// 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');
var renderer = new THREE.CanvasRenderer();
var scene = new THREE.Scene();
var clock = new THREE.Clock();
var camera = new THREE.PerspectiveCamera(VIEW_ANGLE,ASPECT,NEAR,FAR);
// the camera starts at 0,0,0 so pull it back for some assignments you may need to adjust this value
// some distance to make the scene visible properly
camera.position.z = 200;
camera.position.y =100;
// add the camera to the scene
scene.add(camera)
// set up the camera controls. Please keep in mind that what this does is move the entire scene around.
renderer.shadowMapEnabled = true;
renderer.shadowMapSoft = true;
renderer.shadowMapType = THREE.BasicShadowMap;
renderer.shadowMapAutoUpdate = true;
renderer.shadowCameraNear = 50;
renderer.shadowCameraFar = 300;
renderer.shadowCameraFov = 50;
renderer.shadowMapBias = 0.0039;
renderer.shadowMapDarkness = 0.5;
renderer.shadowMapWidth = 800;
renderer.shadowMapHeight = 800;
//CAMERA CONTROLS
var cameraControls = new THREE.OrbitControls(camera, renderer.domElement);
cameraControls.addEventListener( 'mousemove', renderer );
// start the renderer
renderer.setSize(WIDTH, HEIGHT);
// attach the render-supplied DOM element
$container.append(renderer.domElement);
// ----------------------------------------------------------------------------------------
// Example of Code that you can adapt to get around the issue of Cross-Domain issues and
// CORS restrictions using textures. We have this problem when using jsbin.com as a
// development environment becuase we cannot load texture images to the local server.
// Rather we need to pull them from location using a web URL. You can use the images
// that we have put on the uopeopleweb.com site along with the following code (modified
// of course for your particular program)
//
// Notice that what this code does is create a new Texture object called Texture1 and loads
// the texture image into the object.
//
// var Texture1 = new THREE.Texture();
// var loader = new THREE.ImageLoader();
//
// loader.addEventListener( 'load', function ( event ) {
// Texture1.image = event.content;
// Texture1.needsUpdate = true;
// } );
//
// loader.load( 'http://uopeopleweb.com/js/paper.jpg' );
// ----------------------------------------------------------------------------------------
// END OF THE STANDARD CODE FOR THE ASSIGNMENT
// Following this is where you must place your own custom code to complete the assignment
// ----------------------------------------------------------------------------------------
//CENTER SPHERE
//create the sphere for the molecule's center
var center = new THREE.SphereGeometry(17,20,20);
var materialCenter = new THREE.MeshPhongMaterial( { ambient: 0x980023, color:0x980023, specular: 0x980023, shininess: 90,wireframe: false } );
meshCenter = new THREE.Mesh(center, materialCenter);
meshCenter.position.z = 0;
meshCenter.position.x = 0;
meshCenter.position.y =0;
meshCenter.receiveShadow = true;
meshCenter.castShadow =true;
scene.add(meshCenter);
//MATERIALS
//creates one material, used in all cylinders
var material1 = new THREE.MeshPhongMaterial( { ambient: 0xffffff, color:0xffffff, specular: 0xffffff, shininess: 60, wireframe: false } );
//creates one material, used in all small balls
var materialSphere1 = new THREE.MeshPhongMaterial( { ambient: 0xffffff, color:0x64aad0, specular: 0xffffff, shininess: 60,wireframe: false } );
//create the TOP cylinder
var cylinder1 = new THREE.CylinderGeometry(3, 3, 35, 5, 5);
meshCylinder1 = new THREE.Mesh(cylinder1, material1 );
meshCylinder1.position.y = 20;
meshCylinder1.overdraw = true;
scene.add(meshCylinder1);
//create TOP sphere
var sphere1 = new THREE.SphereGeometry(8,9,9);
meshSphere1 = new THREE.Mesh(sphere1, materialSphere1);
meshSphere1.position.z = 0;
meshSphere1.position.x = 0;
meshSphere1.position.y =43;
meshSphere1.receiveShadow = true;
meshSphere1.castShadow =true;
scene.add(meshSphere1); //adds sphere to canvas
//create the SECOND cylinder
var cylinder2 = new THREE.CylinderGeometry(3, 3, 40, 5, 5);
meshCylinder2 = new THREE.Mesh(cylinder2, material1 );
meshCylinder2.position.y = -5;
meshCylinder2.position.x = 20;
meshCylinder2.position.z = 14;
meshCylinder2.rotation.z= 38* Math.PI / 180;
meshCylinder2.rotation.x= -38* Math.PI / 180;
cylinder2.overdraw = true;
meshCylinder2.receiveShadow = true;
meshCylinder2.castShadow =true;
scene.add(meshCylinder2); //adds cylinder to canvas
//creates SECOND side sphere
var sphere2 = new THREE.SphereGeometry(8,9,9);
meshSphere2 = new THREE.Mesh(sphere2, materialSphere1);
meshSphere2.position.y =-20;
meshSphere2.position.z = 22;
meshSphere2.position.x = 31;
meshSphere2.receiveShadow = true;
meshSphere2.castShadow =true;
scene.add(meshSphere2); //adds sphere to canvas
//create the THIRD cylinder
var cylinder4 = new THREE.CylinderGeometry(3, 3, 40, 5, 5);
meshCylinder4 = new THREE.Mesh(cylinder4, material1 );
meshCylinder4.position.y = -10;
meshCylinder4.position.x = -30;
meshCylinder4.position.z = 0;
meshCylinder4.rotation.y = -0;
meshCylinder4.rotation.x = 0;
meshCylinder4.rotation.z =-50 * Math.PI / 180;
meshCylinder4.receiveShadow = true;
meshCylinder4.castShadow =true;
scene.add(meshCylinder4);
//creates THIRD side sphere
var sphere4 = new THREE.SphereGeometry(8,9,9);
meshSphere4 = new THREE.Mesh(sphere4, materialSphere1);
meshSphere4.position.y =-20;
meshSphere4.position.z = 0;
meshSphere4.position.x = -40;
meshSphere4.receiveShadow = true;
meshSphere4.castShadow =true;
scene.add(meshSphere4);
//create the 4TH cylinder
var cylinder5= new THREE.CylinderGeometry(3, 3, 40, 5, 5);
meshCylinder5 = new THREE.Mesh(cylinder5, material1 );
meshCylinder5.position.x = 0;
meshCylinder5.position.y = -10;
meshCylinder5.position.z = -30;
meshCylinder5.rotation.y = -55;
meshCylinder5.rotation.z = -5.3;
meshCylinder5.receiveShadow = true;
meshCylinder5.castShadow =true;
scene.add(meshCylinder5);
//creates 4TH side sphere
var sphere5 = new THREE.SphereGeometry(8,9,9);
meshSphere5 = new THREE.Mesh(sphere5, materialSphere1);
meshSphere5.position.y = -20;
meshSphere5.position.z = -45;
meshSphere5.position.x = 0;
meshSphere5.receiveShadow = true;
meshSphere5.castShadow =true;
scene.add(meshSphere5);
//PLANE
// creates a 300x300 plane
var planeMaterial = new THREE.MeshBasicMaterial( { color: 0x3c601c, wireframe: false, side: THREE.DoubleSide } );
var plane = new THREE.PlaneGeometry(300, 300, 10, 10);
planeMesh = new THREE.Mesh(plane, planeMaterial);
plane.overdraw = true;
//sets the position of the plane about y axis
planeMesh.position.y += -30;
//rotates the plane 90 degrees to a horizontal plane
planeMesh.rotation.x = Math.PI / 2;
planeMesh.receiveShadow = true;
// planeMesh.castShadow = true;
//adds plane to scene
scene.add(planeMesh);
//POINT LIGHT
//add a point light
var pointLight = new THREE.PointLight();
pointLight.position.set(15,60,50);
pointLight.castShadow = true;
pointLight.shadowBias = -0.002;
scene.add(pointLight);
// add directional light
var theLight = new THREE.DirectionalLight( 0xffffff );
theLight.position.set( 0, 10, 2 ).normalize();
theLight.target.position.set(0, 0, 0);
theLight.castShadow = true;
theLight.intensity = 1;
theLight.shadowDarkness = 0.2;
scene.add(theLight); //adds light to scene
// add subtle blue ambient lighting
var ambientLight = new THREE.AmbientLight(0x000044);
scene.add(ambientLight);
//add a spot light
var spotLight = new THREE.SpotLight( 0xffffff, 1, 0, Math.PI/2, 1 );
spotLight.position.set( -10, -20, -100 );
spotLight.target.position.set( 0, -30, 0 );
spotLight.intensity = 1.5
spotLight.castShadow = true;
spotLight.shadowMapWidth = 130;
spotLight.shadowMapHeight = 130;
spotLight.shadowDarkness = 0.7;
spotLight.shadowCameraFov = 40;
//defines boundary of box of light
spotLight.shadowCameraNear = 2;
spotLight.shadowCameraFar = 5;
spotLight.shadowCameraLeft = -0.5;
spotLight.shadowCameraRight = 0.5;
spotLight.shadowCameraTop = 0.5;
spotLight.shadowCameraBottom = -0.5;
scene.add(spotLight);
// ----------------------------------------------------------------------------------------
// END OF YOUR CUSTOM CODE FOR THE ASSIGNMENT
function animate() {
requestAnimationFrame(animate);
render();
}
function render() {
cameraControls.update();
renderer.render(scene, camera);
}
animate();
</script>
</body>
<script src="https://code.jquery.com/jquery-git.js"></script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment