danmaze · December 15, 2020 17:13
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="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>
	<!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>