Last active
January 17, 2024 16:21
-
-
Save xryuseix/0133603d9b890f93928df82b4356e165 to your computer and use it in GitHub Desktop.
image rotate with three.js
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <title>Particles Animation with Three.js</title> | |
| <link rel="stylesheet" href="styles.css"> | |
| </head> | |
| <body> | |
| <div id="canvas"></div> | |
| <div id="container"> | |
| <div id="content"> | |
| <h1>これはタイトル</h1> | |
| <p>いい感じの文章</p> | |
| </div> | |
| <div id="sep"> | |
| <div id="sep-content">ABC</div> | |
| <div id="sep-content">DEF</div> | |
| </div> | |
| <div id="content"> | |
| <p>あれがこうで</p> | |
| <p>それはそうだった</p> | |
| </div> | |
| <div id="content"> | |
| <p>そういえば</p> | |
| <p>そんなことはなかった</p> | |
| </div> | |
| <div id="content"> | |
| <p>かもしれない</p> | |
| </div> | |
| </div> | |
| </body> | |
| <script src="https://threejs.org/build/three.js"></script> | |
| <script src="main.js"></script> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| let renderer, scene, camera, particles; | |
| let width = window.innerWidth; | |
| let height = window.innerHeight; | |
| function init() { | |
| renderer = new THREE.WebGLRenderer(); | |
| renderer.setSize( width, height ); | |
| document.getElementById('canvas').appendChild( renderer.domElement ); | |
| scene = new THREE.Scene(); | |
| camera = new THREE.PerspectiveCamera(30, width / height, 1, 1000); | |
| camera.position.set(0, 0, 50); | |
| camera.lookAt(scene.position); | |
| let loader = new THREE.TextureLoader(); | |
| loader.load('girl.webp', createParticles); | |
| } | |
| function createParticles(texture) { | |
| let material = new THREE.PointsMaterial({ size: 0.05, vertexColors: true }); | |
| let geometry = new THREE.BufferGeometry(); | |
| // the image will be loaded into this canvas | |
| let canvas = document.createElement('canvas'); | |
| let context = canvas.getContext('2d'); | |
| // set canvas dimensions | |
| canvas.width = texture.image.width; | |
| canvas.height = texture.image.height; | |
| // draw image on canvas | |
| context.drawImage(texture.image, 0, 0, canvas.width, canvas.height); | |
| // get pixel data from canvas | |
| let data = context.getImageData(0, 0, canvas.width, canvas.height).data; | |
| let vertices = new Float32Array(canvas.width * canvas.height * 3); | |
| let colors = new Float32Array(canvas.width * canvas.height * 4); | |
| for (let y = 0; y < canvas.height; y++) { | |
| for (let x = 0; x < canvas.width; x++) { | |
| let vIdx = (y * canvas.width + x) * 3; | |
| const scale = 0.01; | |
| vertices[vIdx] = (x - canvas.width / 2) * scale | |
| vertices[vIdx + 1] = (-y + canvas.height / 2) * scale; | |
| vertices[vIdx + 2] = 0; | |
| let cIdx = (y * canvas.width + x) * 4; | |
| colors[cIdx] = data[cIdx] / 255; | |
| colors[cIdx + 1] = data[cIdx + 1] / 255; | |
| colors[cIdx + 2] = data[cIdx + 2] / 255; | |
| // colors[cIdx + 3] = undefined; // not used | |
| } | |
| } | |
| geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3)); | |
| geometry.setAttribute('color', new THREE.BufferAttribute(colors, 4)); | |
| particles = new THREE.Points(geometry, material); | |
| scene.add(particles); | |
| } | |
| function animate() { | |
| requestAnimationFrame(animate); | |
| render(); | |
| } | |
| function render() { | |
| renderer.render(scene, camera); | |
| } | |
| init(); | |
| animate(); | |
| window.addEventListener('resize', function() { | |
| width = window.innerWidth; | |
| height = window.innerHeight; | |
| renderer.setSize(width, height); | |
| camera.aspect = width / height; | |
| camera.updateProjectionMatrix(); | |
| }) | |
| window.addEventListener('mousemove', function(e) { | |
| let mouseX = e.clientX; | |
| let mouseY = e.clientY; | |
| let x = (mouseX / width) * 2 - 1; | |
| let y = -(mouseY / height) * 2 + 1; | |
| particles.rotation.y = x * 0.5; | |
| particles.rotation.x = -y * 0.5; | |
| }) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body{ | |
| width:100%; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| body #canvas{ | |
| width: 100%; | |
| height:100%; | |
| min-height:100%; | |
| overflow: hidden; | |
| position: fixed;} | |
| #container { | |
| position: absolute; | |
| top:0; | |
| right:20px; | |
| left:20px; | |
| color: aliceblue; | |
| background-color: rgba(0, 0, 0, 0.3); | |
| } | |
| #content { | |
| border: 1px solid #fff; | |
| padding: 10px; | |
| margin: 10px; | |
| border-radius: 5px; | |
| margin-top: 10vh; | |
| margin-bottom: 10vh; | |
| } | |
| #sep { | |
| display: flex; | |
| text-align: center; | |
| justify-content: center; | |
| } | |
| #sep-content { | |
| border: 1px solid #fff; | |
| padding: 20px; | |
| margin: 10px; | |
| margin-top: 15vh; | |
| margin-bottom: 15vh; | |
| border-radius: 5px; | |
| width: 30vw; | |
| height: 10vw; | |
| background-color: rgba(0, 0, 255, 0.3) | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment