SabrinaMarkon · July 20, 2023 08:51 · hanansx · Dec 17, 2019 · SabrinaMarkon · Dec 21, 2019
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 #2</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 #2</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>