CS4406 Programming Assignment Unit 5
Here’s a Three.js code snippet to implement the methane molecule model with correct colors,
geometry, lighting, shadows, and rotation controls as per the assignment instructions.
URL:
https://codepen.io/luyayi95/pen/LEpGxvb
https://codepen.io/luyayi95/pen/LEpGxvb
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r148/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
=== SCENE SETUP ===
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x000000); // black background
const camera = new THREE.PerspectiveCamera(45, window.innerWidth /
window.innerHeight, 0.1, 1000);
camera.position.set(4, 4, 6);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
document.body.appendChild(renderer.domElement);
// === LIGHTING ===
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(5, 10, 7);
light.castShadow = true;
scene.add(light);
// === GREEN PLANE ===
const planeGeometry = new THREE.PlaneGeometry(20, 20);
const planeMaterial = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
const plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.rotation.x = -Math.PI / 2;
plane.receiveShadow = true;
scene.add(plane);
// === MATERIALS ===
const carbonMaterial = new THREE.MeshStandardMaterial({ color: 0xff0000 }); // Red carbon
const hydrogenMaterial = new THREE.MeshStandardMaterial({ color: 0x0000ff }); // Blue
hydrogen
const bondMaterial = new THREE.MeshStandardMaterial({
color: 0xffffff,
emissive: 0x888888 // Light gray emissive bond
});
// === MOLECULE GROUP ===
const molecule = new THREE.Group(); // Allows molecule-only rotation
// === CENTER CARBON ATOM ===
const carbon = new THREE.Mesh(new THREE.SphereGeometry(0.4, 32, 32), carbonMaterial);
carbon.castShadow = true;
carbon.position.set(0, 0, 0);
molecule.add(carbon);
// === HYDROGEN POSITIONS (Tetrahedral Geometry) ===
const hydrogenPositions = [
new THREE.Vector3(1, 1, 1),
new THREE.Vector3(-1, -1, 1),
new THREE.Vector3(-1, 1, -1),
new THREE.Vector3(1, -1, -1)
];
// === CREATE HYDROGEN ATOMS AND BONDS ===
hydrogenPositions.forEach(pos => {
const hydrogen = new THREE.Mesh(new THREE.SphereGeometry(0.2, 32, 32),
hydrogenMaterial);
hydrogen.position.copy(pos);
hydrogen.castShadow = true;
molecule.add(hydrogen);
// Bond between carbon and hydrogen
const bondLength = pos.length();
const bondGeometry = new THREE.CylinderGeometry(0.05, 0.05, bondLength, 32);
const bond = new THREE.Mesh(bondGeometry, bondMaterial);
bond.castShadow = true;
// Position bond between the two atoms
const midpoint = pos.clone().multiplyScalar(0.5);
bond.position.copy(midpoint);
// Rotate the bond to face the hydrogen atom
bond.lookAt(pos);
bond.rotateX(Math.PI / 2);
molecule.add(bond);
});
// Add molecule group to the scene
scene.add(molecule);
// === ORBIT CONTROLS FOR ROTATION ===
const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enablePan = false;
controls.enableZoom = true;
controls.target.copy(carbon.position);
controls.update();
// === ANIMATION LOOP ===
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
// === HANDLE RESIZE ===
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
Output
