JavaScript in 3D: an Introduction to Three.js - refreshing a bit

the two most important classes in Three.js are Vector3 and Box3 .

Vector3

The most basic 3D class, containing three numbers x , y and z . This can be used to represent a point in 3D space or a direction and length. For example:

const vect = new THREE.Vector3(1, 1, 1);

Box3

This class represents a cuboid (3D box). Its main purpose is to get the bounding box of other objects — that is, the smallest possible cuboid that a 3D object could fit in. Every Box3 is aligned to the world x , y and z axes.

const vect = new THREE.Vector3(1, 1, 1);

const box = new THREE.Box3(vect);

Meshes

In Three.js, the basic visual element in a scene is a Mesh. This is a 3D object made up of triangular polygons. It’s built using two objects:

a Geometry — which defines its shape,

a Material — which defines its appearance.

Geometry

Depending on your use-case, you’ll either want to define a geometry within Three.js or import one from a file.

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

const geometry = new THREE.SphereGeometry( 20, 64, 64 );

const geometry = new THREE.ConeBufferGeometry( 5, 20, 32 );

const geometry = new THREE.TorusKnotGeometry(10, 1.3, 500, 6, 6, 20);

Three.js comes with 10 mesh materials, each with its own advantages and customisable properties. We’ll look into a handful of the most useful ones.

MeshNormalMaterial

Useful for: getting up and running quickly

const material = new THREE.MeshNormalMaterial();

const material = new THREE.MeshBasicMaterial({ 

  wireframe: true, 

  color: 0xdaa520

});

MeshLambertMaterial

Useful for: high performance (but lower accuracy)

This is the first material which is affected by lights, so to see what we’re doing we’ll need to add some light to our scene. In the code below, we’ll add to spotlights, with a hint of yellow to create a warmer effect:

const scene = new THREE.Scene();

const frontSpot = new THREE.SpotLight(0xeeeece);

frontSpot.position.set(1000, 1000, 1000);

scene.add(frontSpot);

const frontSpot2 = new THREE.SpotLight(0xddddce);

frontSpot2.position.set(-500, -500, -500);

scene.add(frontSpot2);

MeshPhongMaterial

Useful for: medium performance and accuracy

This material offers a compromise between performance and appearance, and therefore it’s a good middle-ground for applications that need to be performant while also achieving a higher level of quality than the MeshLambertMaterial.

MeshStandardMaterial

Useful for: high accuracy (but lower performance)

Loaders

it’s possible to manually define the geometry of your meshes. However, in practice, many people will often prefer to import their geometries from 3D files. Luckily, Three.js has plenty of supported loaders, covering most of the major 3D file formats.

The basic ObjectLoader loads a JSON resource, using the JSON Object/Scene format. But most loaders need to be imported manually

// GLTF

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

// OBJ

import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js';

// STL

import { STLLoader } from 'three/examples/jsm/loaders/STLLoader.js';

// FBX

import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader.js';

// 3MF

import { 3MFLoader } from 'three/examples/jsm/loaders/3MFLoader.js';

The recommended file format for online viewing is GLTF , on the grounds that it’s ‘focused on runtime asset delivery, compact to transmit and fast to load’.

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

import model from '../models/sample.gltf';

let loader = new GLTFLoader();

loader.load(model, function (geometry) {

  // if the model is loaded successfully, add it to your scene here

}, undefined, function (err) {

  console.error(err);

});

references

https://medium.com/javascript-in-plain-english/javascript-in-3d-an-introduction-to-three-js-780f1e4a2e6d