<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>My first three.js app</title>
		<style>
			body { margin: 0; }
		</style>
	</head>
	<body>
		<script src="https://threejs.org/build/three.js"></script>
		<script>
			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.body.appendChild( renderer.domElement );

			const geometry = new THREE.BoxGeometry( 1, 1, 1 );
			const material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
			const sphere = new THREE.Mesh( geometry, material );
			scene.add( sphere );

			camera.position.z = 2;

			function animate() {
				requestAnimationFrame( animate );

				sphere.rotation.y += 0.01;
				// sphere.rotation.y += Math.PI / 10;

				renderer.render( scene, camera );
			};

			animate();
		</script>
	</body>
</html>

codemirror

const geometry = new THREE.ConeGeometry (1, 3, 32);
const material = new THREE.MeshBasicMaterial({color: 0xEA654});
const cone = new THREE.Mesh(geometry, material);

* `THREE.ConeGeometry`: It creates a cone geometry with the parameters it has been passed.
* `THREE.MeshBasicMaterial`: It creates the required material that we need to apply to our geometry. We also pass the constructor, the `color` we want to set.
* `THREE.Mesh`: It takes as parameters, `geometry` and `material`, and gives us the required shape.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>My first three.js app</title>
		<style>
			body { margin: 0; }
		</style>
	</head>
	<body>
		<script src="https://threejs.org/build/three.js"></script>
		<script>
			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.body.appendChild( renderer.domElement );

			const geometry = new THREE.ConeGeometry( 1, 3, 32 );
			const material = new THREE.MeshBasicMaterial( { color: 0xEA6549 } );
			const sphere = new THREE.Mesh( geometry, material );
			scene.add( sphere );

			camera.position.z = 5;

			function animate() {
				requestAnimationFrame( animate );

				// sphere.rotation.y += 0.01;
				// sphere.rotation.y += Math.PI / 10;

				renderer.render( scene, camera );
			};

			animate();
		</script>
	</body>
</html>

We can set the rotation for this cone by using the `set` method.

* The `set` property takes as a parameter a 3D vector. Below is how we use `set`:
```js
sphere.rotation.set(Math.PI/2,0,0)
```

This rotates the cone by 90 degrees along the x-axis.

<!DOCTYPE html>
<html>
	<head>
		<title>Three Rotation</title>
		<style>
			body { margin: 0; }
		</style>
	</head>
	<body>
		<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
		<script type="importmap">
		{
			"imports": {
			"three": "https://unpkg.com/three/build/three.module.js"
			}
		}
		</script>
		<script type="module">

			import * as THREE from 'three';
			
			const scene = new THREE.Scene();
			const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
			camera.position.z = 5;

			const renderer = new THREE.WebGLRenderer();
			renderer.setSize(window.innerWidth, window.innerHeight);
			document.body.appendChild(renderer.domElement);

			const geometry = new THREE.ConeGeometry(1, 3, 32);
			const material = new THREE.MeshBasicMaterial({ color: 0xEA6549 });
			const sphere = new THREE.Mesh(geometry, material);

			sphere.rotation.set(Math.PI/2,0,0)

			scene.add(sphere);

			function animate() {
				
				requestAnimationFrame(animate);

				renderer.render(scene, camera);
			};

			animate();
		</script>
	</body>
</html>

> **Note:** To read more on how to create a scene, please visit this [link](https://www.educative.io/answers/how-to-create-a-scene-in-threejs).

How to rotate an object on its own axis in three.js

Three.js is a JavaScript library that is built on top of WebGL and is used for rendering animations on the web.Note: If you are unfamiliar with three.js, please follow this link to read more.Objects in three.js have properties that allow them to be translated, transformed, and rotated. In this Answer, we ll focus on making an object rotate around its axis.This can be done using the rotation attribute of an Object3DThis is the base class for most objects in three.js.The rotation attributeThis attribute is used for rotating an object about its axis. Below is how we invoke it:

How to rotate an object on its own axis in three.js

The `rotation` attribute

The `set` property with the `rotation` attribute

Explanation

How to rotate an object on its own axis in three.js

The rotation attribute

The set property with the rotation attribute

Explanation

The `rotation` attribute

The `set` property with the `rotation` attribute