eaglelandsonce/RandomCanvasDraw
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>3D Components with Three.js</title>7 <link rel="stylesheet" href="style.css">8 <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.7.570/pdf.min.js"></script>9 <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.7.570/pdf.worker.min.js"></script>10 <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.7.1/jszip.min.js"></script>11 <script src="https://cdnjs.cloudflare.com/ajax/libs/docxtemplater/3.22.2/docxtemplater.min.js"></script>12 <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>13</head>14<body>15 <div id="threejs-container"></div>16 17 <div id="drop-container">18 <div id="resume-drop-area" class="drop-area">19 <p>Drag & drop a Resume here, or click to select one</p>20 <input type="file" id="resumeFileElem" accept=".doc,.docx,.pdf,.mp3,.wav,.ogg" multiple>21 <div id="resumeFiles" class="file-display-area"></div>22 </div>23 <div id="job-desc-drop-area" class="drop-area">24 <p>Drag & drop a Job Description here, or click to select one</p>25 <input type="file" id="jobDescFileElem" accept=".doc,.docx,.pdf,.mp3,.wav,.ogg" multiple>26 <div id="jobDescFiles" class="file-display-area"></div>27 </div>28 </div>29 <div id="fileList"></div>30 <button id="toggleAudioButton" class="audio-button">Turn Audio On</button>31 <audio id="audioPlayer" controls style="display: none;"></audio>32 33 <script>34 // Three.js setup35 const container = document.getElementById('threejs-container');36 const scene = new THREE.Scene();37 const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);38 const renderer = new THREE.WebGLRenderer();39 renderer.setSize(window.innerWidth, window.innerHeight);40 container.appendChild(renderer.domElement);41 42 const components = [];43 let currentComponentIndex = 0;44 45 function create3DComponent(element, width, height) {46 const texture = new THREE.CanvasTexture(element);47 const geometry = new THREE.PlaneGeometry(width, height);48 const material = new THREE.MeshBasicMaterial({ map: texture, transparent: true });49 const mesh = new THREE.Mesh(geometry, material);50 scene.add(mesh);51 components.push(mesh);52 return mesh;53 }54 55 function updateComponentTexture(mesh, element) {56 const texture = new THREE.CanvasTexture(element);57 mesh.material.map = texture;58 mesh.material.needsUpdate = true;59 }60 61 function createHTMLElement(tag, styles, innerText = '') {62 const element = document.createElement(tag);63 Object.assign(element.style, styles);64 element.innerText = innerText;65 document.body.appendChild(element);66 return element;67 }68 69 function nextComponent() {70 components.forEach(mesh => scene.remove(mesh));71 components.length = 0;72 73 currentComponentIndex = (currentComponentIndex + 1) % componentFunctions.length;74 const componentFunction = componentFunctions[currentComponentIndex];75 const element = componentFunction();76 const mesh = create3DComponent(element, 5, 2.5);77 78 element.addEventListener('input', () => updateComponentTexture(mesh, element));79 element.addEventListener('change', () => updateComponentTexture(mesh, element));80 }81 82 const componentFunctions = [83 () => createHTMLElement('button', { width: '200px', height: '50px' }, 'Click Me'),84 () => createHTMLElement('input', { type: 'text', width: '200px', height: '50px' }),85 () => createHTMLElement('input', { type: 'color', width: '200px', height: '50px' }),86 () => createHTMLElement('input', { type: 'checkbox', width: '200px', height: '50px' }),87 () => createHTMLElement('input', { type: 'radio', name: 'radioGroup', width: '200px', height: '50px' }),88 () => createHTMLElement('input', { type: 'range', width: '200px', height: '50px' }),89 () => createHTMLElement('div', { width: '200px', height: '50px', textAlign: 'center', lineHeight: '50px' }, getRandomPhrase())90 ];91 92 function getRandomPhrase() {93 const phrases = [94 'Hello, World!',95 'Welcome to Three.js!',96 '3D Components are cool!',97 'Enjoy your stay!',98 'Have a great day!'99 ];100 return phrases[Math.floor(Math.random() * phrases.length)];101 }102 103 camera.position.z = 5;104 105 function animate() {106 requestAnimationFrame(animate);107 renderer.render(scene, camera);108 }109 110 animate();111 nextComponent();112 setInterval(nextComponent, 5000);113 114 // Original code starts here115 const audioFiles = [116 'audios/start1.mp3',117 'audios/start2.mp3',118 'audios/start3.mp3'119 ];120 let audioEnabled = false;121 const toggleAudioButton = document.getElementById('toggleAudioButton');122 const audioPlayer = document.getElementById('audioPlayer');123 toggleAudioButton.addEventListener('click', () => {124 audioEnabled = !audioEnabled;125 toggleAudioButton.textContent = audioEnabled ? 'Turn Audio Off' : 'Turn Audio On';126 if (!audioEnabled) {127 audioPlayer.pause();128 }129 });130 131 window.toggleAudio = function(state) {132 audioEnabled = state;133 if (!audioEnabled) {134 audioPlayer.pause();135 }136 };137 138 function preventDefaults(e) {139 e.preventDefault();140 e.stopPropagation();141 }142 function handleDrop(type, e) {143 const dt = e.dataTransfer;144 const files = dt.files;145 handleFiles(type, files);146 }147 function handleFiles(type, files) {148 files = [...files];149 files.forEach(file => previewFile(type, file));150 files.forEach(file => processFile(type, file));151 }152 function previewFile(type, file) {153 const li = document.createElement('li');154 li.textContent = `${type}: ${file.name}`;155 fileList.appendChild(li);156 }157 function processFile(type, file) {158 const fileType = file.type;159 const validAudioTypes = ['audio/mpeg', 'audio/wav', 'audio/ogg'];160 const validDocumentTypes = ['application/pdf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'];161 if (validAudioTypes.includes(fileType)) {162 playAudio(file);163 } else if (validDocumentTypes.includes(fileType)) {164 displayDocument(type, file);165 }166 }167 function playAudio(file) {168 const reader = new FileReader();169 reader.onload = function(event) {170 if (audioEnabled) {171 audioPlayer.src = event.target.result;172 audioPlayer.play();173 }174 };175 reader.readAsDataURL(file);176 }177 function displayDocument(type, file) {178 const reader = new FileReader();179 reader.onload = function(event) {180 const fileContent = event.target.result;181 const container = type === 'Resume' ? resumeFilesContainer : jobDescFilesContainer;182 if (file.type === 'application/pdf') {183 extractPDFText(fileContent, container);184 } else if (file.type.includes('wordprocessingml')) {185 extractWordText(fileContent, container);186 }187 };188 reader.readAsArrayBuffer(file);189 }190 function extractPDFText(fileContent, container) {191 const pdfjsLib = window['pdfjs-dist/build/pdf'];192 pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.7.570/pdf.worker.min.js';193 const pdfData = new Uint8Array(fileContent);194 pdfjsLib.getDocument({data: pdfData}).promise.then(function(pdf) {195 let textContent = '';196 const maxPages = pdf.numPages;197 const countPromises = [];198 for (let j = 1; j <= maxPages; j++) {199 const page = pdf.getPage(j);200 countPromises.push(page.then(function(page) {201 const textContentPromise = page.getTextContent();202 return textContentPromise.then(function(text) {203 text.items.forEach(function(item) {204 textContent += item.str + ' ';205 });206 });207 }));208 }209 Promise.all(countPromises).then(function() {210 const pre = document.createElement('pre');211 pre.textContent = textContent;212 container.appendChild(pre);213 });214 });215 }216 function extractWordText(fileContent, container) {217 const zip = new JSZip(fileContent);218 zip.loadAsync(fileContent).then(function(zip) {219 const doc = new window.docxtemplater(zip);220 const text = doc.getFullText();221 const pre = document.createElement('pre');222 pre.textContent = text;223 container.appendChild(pre);224 });225 }226 </script>227</body>228</html>229