create a web page that displays an animated rotating 3d cube in javascript

To create an animated, rotating 3D cube in JavaScript, we can use the Three.js library. Here's an example:

First, we need to include the Three.js library in our HTML file. We can do this by including the following script tag:


index.tsx
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
90 chars
2 lines

Next, we'll create a div in our HTML file where the cube will be displayed:


index.tsx
<div id="cubeContainer"></div>
31 chars
2 lines

In our JavaScript file, we'll create a scene, a camera, a renderer, and a cube object:


index.tsx
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById("cubeContainer").appendChild(renderer.domElement);

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
501 chars
16 lines

We can then set the cube to rotate by adding the following code to our render loop:


index.tsx
function animate() {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
}
animate();
156 chars
8 lines

Finally, we'll style our container div with CSS to make the cube appear in the center of the page:


index.tsx
#cubeContainer {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
119 chars
8 lines

That's it! With these steps, we've created an animated, rotating 3D cube in JavaScript using the Three.js library.

similar javascript code snippets

create a carousel in html in javascript

how to float an html element horizontally but fix it vertically in javascript

divide div in four parts in javascript

wrap li items within span in javascript

create a div that scrolls horizontally and adjust the height of its content to always be 80% of the screen height in javascript

if no checkbox is selected make button inactive in javascript

create a button in the center of the screen and when its clicked make an alert saying "you touched the button" in javascript

create a blue square and center it in the screen and make its size medium and whenever you click it make an alert saying "you clicked the square" in javascript

create a div of images that is always no bigger than 80% of the display height and the images scale accordingly. when you hover over an image it zooms slighly and the other images gray out in javascript

create a div that scrolls horizontally and adjust its height to always be 80% of the screen height in javascript

related categories