divyap/thob-capability-map
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: added task 4 in vanilla

Browse Source
This commit is contained in:
divyap 2026-04-05 17:01:28 +05:30
parent 3970740f88
commit 9bba524fc9
2 changed files with 77 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
Week-2/Task-4/vanilla/index.html
View File

@ -1,11 +1,14 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Task 4 — Click To Highlight / Select</title>
<title>Task 4 - Click To Highlight / Select Visual State</title> <style>
body { margin: 0; padding: 0; overflow: hidden; background: white; font-family: sans-serif; }
</style>
</head> </head>
<body> <body>
<script type="module" src="main.js"></script> <h1>Interaction Pattern- click on the object</h1>
<script type="module" src="./main.js"></script>
</body> </body>
</html> </html>

70
Week-2/Task-4/vanilla/main.js
View File

@ -0,0 +1,70 @@
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
const scene = new THREE.Scene();
scene.background = new THREE.Color("white");
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const geometry = new THREE.TorusKnotGeometry(1, 0.4, 100, 16);
const material = new THREE.MeshStandardMaterial({ color: "#ccc", roughness: 0.5 });
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
scene.add(new THREE.AmbientLight(0xffffff, 0.6));
const pointLight = new THREE.PointLight(0xffffff, 1);
pointLight.position.set(5, 5, 5);
scene.add(pointLight);
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();
let isSelected = false;
window.addEventListener("click", (event) => {
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
raycaster.setFromCamera(mouse, camera);
const intersects = raycaster.intersectObject(mesh);
if (intersects.length > 0) {
isSelected = !isSelected;
updateAppearance();
}
});
function updateAppearance() {
if (isSelected) {
mesh.scale.set(1.2, 1.2, 1.2);
mesh.material.color.set("#3498db");
mesh.material.emissive.set("#1e3799");
mesh.material.emissiveIntensity = 0.5;
} else {
mesh.scale.set(1, 1, 1);
mesh.material.color.set("#ccc");
mesh.material.emissive.set("#000");
mesh.material.emissiveIntensity = 0;
}
}
function animate() {
requestAnimationFrame(animate);
controls.update();
mesh.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
window.addEventListener("resize", () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});