A quick threejs 3D model

Three.js is one of the most popular JavaScript libraries for creating and animating 3D computer graphics in a web browser using WebGL. It’s also a great tool for creating 3D games for web browsers.

Since Three.js is based on JavaScript, it’s relatively easy to add any interactivity between 3D objects and user interfaces, such as keyboard and mouse. This makes the library perfectly suitable for making 3D games on the web.

There are main advantages, one of them is, Three.js has built-in PBR rendering, which makes rendering graphics more accurate

Below are some of the Cons for this library

No rendering pipeline: This makes a lot of modern rendering techniques impossible/infeasible to implement with Three.js

Not a game engine: If you’re looking for features beyond rendering – you won’t find many here

Geared toward novices: Because the API caters to novices, many advanced features are hidden

Lack of support: There is no built-in support for spatial indexing, making exact raycasting, or frustum culling, and collision detection is hopelessly inefficient in complex scenarios

import * as THREE from 'js/three.module.js';

var camera, scene, renderer;

var geometry, material, mesh;

animate();

function init() {

  const camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, .01, 20 );

  camera.position.z = 1;

  const scene = new THREE.Scene();

  const geometry = new THREE.BoxGeometry( 0.5, 0.5, 0.5 );

  const material = new THREE.MeshNormalMaterial();

  const mesh = new THREE.Mesh( geometry, material );

  scene.add( mesh );

  const renderer = new THREE.WebGLRenderer( { antialias: true } );

  renderer.setSize( window.innerWidth, window.innerHeight );

  document.body.appendChild( renderer.domElement );

}

function animate() {

    init();

    requestAnimationFrame( animate );

    mesh.rotation.x += .01;

    mesh.rotation.y += .02;

    renderer.render( scene, camera );

}

References:

https://blog.logrocket.com/top-6-javascript-and-html5-game-engines/