Rotating Cube

Developer
Omar Shehata
Size
2,151 Kb
Views
26,312
  1. Rotating Cube Previews
  2. Rotating Cube HTML Codes
  3. Rotating Cube CSS Codes
  4. Rotating Cube JS Codes

How do I make an rotating cube?

What is a rotating cube? How do you make a rotating cube? This script and codes were developed by Omar Shehata on 13 August 2022, Saturday.

Rotating Cube Previews
IQ Test

Rotating Cube - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Rotating Cube</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script src='http://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Rotating Cube - Script Codes CSS Codes

body { margin: 0; }	canvas { width: 100%; height: 100% }

Rotating Cube - Script Codes JS Codes

//Create the scene object
var scene = new THREE.Scene();
//We need a camera to see anything!
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
//This is our renderer
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
//To create an object, we need 3 things
//The goemetry, which could be a primitive like a box, a sphere, or something custom
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
//The kind of material it's made from
var material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
//And a mesh object that binds them together
var cube = new THREE.Mesh( geometry, material );
//And don't forget to add it to the scene!
scene.add( cube );
//At this point, the cube is there, but you won't see it because it's right behind the camera
//Let's move the cube back on the Z axis to see it
cube.position.z = -2;
//This function will run 60 times per frame to render our scene
var render = function () { requestAnimationFrame( render ); //Rotate the cube! cube.rotation.x += 0.01; cube.rotation.y += 0.01; renderer.render(scene, camera);
};
render();
Rotating Cube - Script Codes
Rotating Cube - Script Codes
Home Page Home
Developer Omar Shehata
Username omarshe7ta
Uploaded August 13, 2022
Rating 3
Size 2,151 Kb
Views 26,312
Do you need developer help for Rotating Cube?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Omar Shehata (omarshe7ta) Script Codes
Name
WebMonkey Test
Pixijs.v3 Basic Shader
Ball Demo
Framebuffer - Final
Smoke Shader Complete
Smoke Shader - Frame Buffer
ACM Drawing Practice
Featherlight Zoom Test
Framebuffer - Texture Render
Smoke Shader - Diffuse
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!