Skip to content

Instantly share code, notes, and snippets.

@greggman
Created January 24, 2024 22:27
Show Gist options
  • Save greggman/db6aef89ea9583595aa330b12649cfa3 to your computer and use it in GitHub Desktop.
Save greggman/db6aef89ea9583595aa330b12649cfa3 to your computer and use it in GitHub Desktop.
Jitter
html, body {
margin: 0;
overflow: hidden; /* because of #s */
}
canvas {
display: block;
}
#s {
position: absolute;
top: 100px;
background-color: red;
}
<div id="s">sphere</div>
<script src="https://threejsfundamentals.org/threejs/resources/threejs/r94/three.min.js"></script>
function init() {
scene = new THREE.Scene();
camera = new THREE.OrthographicCamera(10 / -2, 10 / 2, 10 / 2, 10 / -2, 1, 1000);
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
let geometry = new THREE.SphereGeometry(1, 32, 32);
let material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);
camera.position.z = 5;
}
function animate() {
requestAnimationFrame(animate);
moveSphere();
renderer.render(scene, camera);
}
sphereDiv = document.querySelector('#s');
const start = Date.now();
function moveSphere() {
let lapse = Date.now() - start;
let time = Date.now() / 2;
sphere.position.x = -5 + ((time - 2500) /120) % 10.5;
sphereDiv.style.left = (time % window.innerWidth) + 'px';
}
init();
animate();
{"name":"Jitter","settings":{},"filenames":["index.html","index.css","index.js"]}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment