How to use es6 import to import threejs?

In ES6, you can import specific features or the entire three.js library using the import statement.

First, ensure that you have installed three.js using npm or yarn.

sh
npm install three

or

sh
yarn add three

After installation, you can import three.js in your JavaScript module as follows:

javascript
// Import the entire three.js core library
import * as THREE from 'three';

// Example: Create a scene
const scene = new THREE.Scene();

If you only need specific parts of the library, you can use specific import statements to import only what you need, which helps reduce the final bundle size. For example, if you only need a PerspectiveCamera and a Mesh, you can import them as follows:

javascript
// Import specific components
import { PerspectiveCamera, Mesh } from 'three';

// Example: Create a perspective camera
const camera = new PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

// Example: Create a mesh (requiring a geometry and material)
const mesh = new Mesh(geometry, material);

This is the basic way to import three.js using ES6 modules. Of course, in actual projects, you may also need to handle module bundlers (such as Webpack or Rollup) and possibly Babel configuration to ensure your code runs correctly in various browser environments.