<!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

Use the rotation attribute of Object3D in three.js to rotate an object on its axis.

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