How to build a simple 3D website in NodeJS?

Build a 3D website in NodeJS.

This video gives the details of building a very simple website having 3D objects using three.js libraries of NodeJS.

To run it in localhost, one can create http server. For this, one would need the respective library which can be obtained using the below:


npm install -g http-server@latest

I hope you like this video. For any questions, suggestions or appreciation please contact us at: https://programmerworld.co/contact/ or email at: programmerworld1990@gmail.com

Code:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D Website</title>
</head>
<body>
    <script type="module" src="script.js"></script>
</body>
</html>

script.js:

import * as THREE from 'https://cdn.jsdelivr.net/npm/three@latest/build/three.module.js';

// Create the scene
const scene = new THREE.Scene();

// Create a camera
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// Create a renderer
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// Create a cube
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// Animation loop
function animate() {
    requestAnimationFrame(animate);
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
}
animate();

Screenshots:

Leave a Reply Cancel reply