From 2a39171446c1b60cf4a3b5a7e5ba53a0ef1bcf2d Mon Sep 17 00:00:00 2001 From: divyap Date: Mon, 30 Mar 2026 14:21:43 +0530 Subject: [PATCH] feat: implement texture mapping in vanilla --- Week-1/Task-2/vanilla/index.html | 12 ++++++ Week-1/Task-2/vanilla/main.js | 62 ++++++++++++++++++++++++++++++ Week-1/Task-2/vanilla/package.json | 17 ++++++++ Week-1/Task-2/vanilla/style.css | 31 +++++++++++++++ 4 files changed, 122 insertions(+) create mode 100644 Week-1/Task-2/vanilla/index.html create mode 100644 Week-1/Task-2/vanilla/main.js create mode 100644 Week-1/Task-2/vanilla/package.json create mode 100644 Week-1/Task-2/vanilla/style.css diff --git a/Week-1/Task-2/vanilla/index.html b/Week-1/Task-2/vanilla/index.html new file mode 100644 index 0000000..0176b94 --- /dev/null +++ b/Week-1/Task-2/vanilla/index.html @@ -0,0 +1,12 @@ + + + + + + Task 2 — Texture Mapping (Vanilla Three.js) + + + + + + diff --git a/Week-1/Task-2/vanilla/main.js b/Week-1/Task-2/vanilla/main.js new file mode 100644 index 0000000..bfb2249 --- /dev/null +++ b/Week-1/Task-2/vanilla/main.js @@ -0,0 +1,62 @@ +import * as THREE from 'three' + +const scene = new THREE.Scene() +scene.background = new THREE.Color('pink') + +const camera = new THREE.PerspectiveCamera( + 75, + window.innerWidth / window.innerHeight, + 0.1, + 1000 +) +camera.position.z = 5 + +const renderer = new THREE.WebGLRenderer() +renderer.setSize(window.innerWidth, window.innerHeight) +document.body.appendChild(renderer.domElement) +const canvas = document.createElement('canvas') +canvas.width = 256 +canvas.height = 256 + +const ctx = canvas.getContext('2d') + +ctx.fillStyle = 'white' +ctx.fillRect(0, 0, 256, 256) + +ctx.fillStyle = 'black' +ctx.fillRect(0, 0, 128, 128) +ctx.fillRect(128, 128, 128, 128) + +const texture = new THREE.CanvasTexture(canvas) + +const geometry = new THREE.BoxGeometry(2, 2, 2) + +const material = new THREE.MeshBasicMaterial({ map: texture }) + +const light1 = new THREE.AmbientLight(0xffffff, 0.5) +scene.add(light1) + +const light2 = new THREE.PointLight(0xffffff, 1) +light2.position.set(5, 5, 5) +scene.add(light2) + +const cube = new THREE.Mesh(geometry, material) +scene.add(cube) + +function animate() { + requestAnimationFrame(animate) + + cube.rotation.x += 0.01 + cube.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) +}) + diff --git a/Week-1/Task-2/vanilla/package.json b/Week-1/Task-2/vanilla/package.json new file mode 100644 index 0000000..0c22458 --- /dev/null +++ b/Week-1/Task-2/vanilla/package.json @@ -0,0 +1,17 @@ +{ + "name": "task-2-vanilla", + "version": "0.0.0", + "private": true, + "type": "module", + "scripts": { + "dev": "vite", + "build": "vite build", + "preview": "vite preview" + }, + "devDependencies": { + "vite": "^5.0.0" + }, + "dependencies": { + "three": "^0.163.0" + } +} diff --git a/Week-1/Task-2/vanilla/style.css b/Week-1/Task-2/vanilla/style.css new file mode 100644 index 0000000..2ccc07a --- /dev/null +++ b/Week-1/Task-2/vanilla/style.css @@ -0,0 +1,31 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body, html { + width: 100%; + height: 100%; + overflow: hidden; + background: #111; +} + +canvas { + display: block; +} + +#info { + position: fixed; + top: 16px; + left: 50%; + transform: translateX(-50%); + color: #fff; + font-family: system-ui, sans-serif; + font-size: 14px; + background: rgba(0, 0, 0, 0.5); + padding: 6px 16px; + border-radius: 20px; + pointer-events: none; + z-index: 10; +}