0 technology selection

  • Vite 2.6 to do the development server, packer
  • Vanilla. Js to write JavaScript code
  • Css3 to control the page style
  • Yarn manages dependencies of three.js

Quick start project

yarn create vite threejs-esm-demo --template vanilla
cd ./threejs-esm-demo
yarn add three # main library
yarn add @types/three -D Type hint library
Copy the code

1 Project directory structure

+ threejs-esm-demo/
  + node_modules/...
  - index.html
  - main.js
  - style.css
  - ...
Copy the code

2 modifymain.js 和 style.css

main.js

import { 
  PerspectiveCamera,
  Scene,
  BoxGeometry,
  MeshNormalMaterial,
  Mesh,
  WebGLRenderer,
} from 'three'

import './index.css'

let camera
let scene
let renderer
let geometry
let material
let mesh

const init = () = > {
  camera = new PerspectiveCamera(70.window.innerWidth / window.innerHeight, 0.01.10)
  camera.position.z = 1

  scene = new Scene()
  
  geometry = new BoxGeometry(0.2.0.2.0.2)
  material = new MeshNormalMaterial()

  mesh = new Mesh(geometry, material)
  scene.add(mesh)

  renderer = new WebGLRenderer({
    antialias: true
  })
  renderer.setSize(window.innerWidth, window.innerHeight)
  renderer.setAnimationLoop(animation)
  document.querySelector('#app').appendChild(renderer.domElement)
}

const animation = (time) = > {
  mesh.rotation.x = time / 2000
  mesh.rotation.y = time / 1000
  
  camera.aspect = window.innerWidth / window.innerHeight
  camera.updateProjectionMatrix()
  renderer.setSize(window.innerWidth, window.innerHeight)

  renderer.render(scene, camera)
}

window.addEventListener("DOMContentLoaded".() = > {
  init()
})
Copy the code

style.css

html.body {
  padding: 0;
  margin: 0;
}

#app {
  width: 100vw;
  height: 100vh;
}
Copy the code

2.3 run

Yarn Dev can be seen at http://localhost:3000/.

Yarn Build Package the build to the project./dist directory, and use Yarn Serve to view the production mode at http://localhost:5000/.

Three principles

The @types/three package tells VSCode how to recognize the namespace/module of three. js, and also tells the packer how to package the package.

Turn compression off in vite configuration:

import { defineConfig } from 'vite'

export default defineConfig({
  build: {
    minify: false}})Copy the code

Repackage, you can find code like this in the first line of the./dist/index.

.js file:

import { P as PerspectiveCamera, S as Scene, B as BoxGeometry, M as MeshNormalMaterial, a as Mesh, W as WebGLRenderer } from "./vendor.ae523e04.js";
Copy the code

Open the./vendor.

.js file and find the last few lines:

if (typeof window! = ="undefined") {
  if (window.__THREE__) {
    console.warn("WARNING: Multiple instances of Three.js being imported.");
  } else {
    window.__THREE__ = REVISION; }}export { BoxGeometry as B, MeshNormalMaterial as M, PerspectiveCamera as P, Scene as S, WebGLRenderer as W, Mesh as a };
Copy the code

This is what the Vite packager (currently rollup) does, and you’ll find that vendor.

.js is about the same size and content as the official three.js single-file library, These are the dependencies that the Vite wrapper packaged from the @types/three library and the three library itself. It’s ugly, but it works.

The next step 3

  • Look at other plug-ins for three.js, such as how some additional Loader classes are called and imported by develop-mode, production-mode pages. I’ll leave this to the reader to experiment;

  • Use CDN to speed up the build process and the first screen. Even though gzip is only over 100 KB, which is much smaller than a behemoth like Cesium. Js, as an ambitious developer, you should think of every possible optimization step. This plugin allows you to view vite, exclude three packaging from Vite, and introduce three as

  • Experiment with packers, build tools like Webpack, Parcel, Rollup, etc. for older projects.

Source code download

[micro cloud file] threejs-ESM-demo.zip