npm init

npm install --save three

import {XXX, XXX, XXX} from 'three/build/three.module.js';

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
 
<link href="./styles/main.css" rel="stylesheet" type="text/css">
 
<body>
    <div id="scene-container">
        <!-- Our <canvas> will be inserted here -->
    </div>
</body>
 
<script type="module" src="./src/main.js"></script>
 
</html>

import { World } from './World/world.js';
 
function main() {
    // Get a reference to the container element
    const container = document.querySelector('#scene-container');
 
    // 1. Create an instance of the World app
    const world = new World(container);
 
    // 2. Render the scene
    world.render();
}
 
// call main to start the app
main();

function createRenderer() {
    const renderer = new WebGLRenderer({ antialias: true });
 
    renderer.physicallyCorrectLights = true;
 
    return renderer;
}
 
export { createRenderer };

import { Clock } from "three";
 
const clock = new Clock();
 
class Loop {
    constructor(camera, scene, renderer) {
        this.camera = camera;
        this.scene = scene;
        this.renderer = renderer;
        this.updatables = [];
    }
 
    start() {
        this.renderer.setAnimationLoop(() => {
            // tell every animated object to tick forward one frame
            this.tick();
 
            // render a frame
            this.renderer.render(this.scene, this.camera);
        });
    }
 
    stop() {
        this.renderer.setAnimationLoop(null);
    }
 
    tick() {
        // only call the getDelta function once per frame!
        const delta = clock.getDelta();
 
        // console.log(
        //   `The last frame rendered in ${delta * 1000} milliseconds`,
        // );
 
        for (const object of this.updatables) {
            object.tick(delta);
        }
    }
}
 
export { Loop };

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
 
function createControls(camera, canvas) {
    const controls = new OrbitControls(camera, canvas);
 
    // damping and auto rotation require
    // the controls to be updated each frame
 
    // this.controls.autoRotate = true;
    controls.enableDamping = true;
 
    controls.tick = () => controls.update();
 
    return controls;
}
 
export { createControls };

import { createCamera } from './components/camera.js';
import { createCube } from './components/cube.js';
import { createLights } from './components/lights.js';
import { createScene } from './components/scene.js';
 
import { createControls } from './systems/controls.js';
import { createRenderer } from './systems/renderer.js';
import { Resizer } from './systems/Resizer.js';
// import { Loop } from './systems/Loop.js';
 
let camera;
let renderer;
let scene;
// let loop;
 
class World {
    constructor(container) {
        camera = createCamera();
        renderer = createRenderer();
        scene = createScene();
        // loop = new Loop(camera, scene, renderer);
        container.append(renderer.domElement);
 
        const controls = createControls(camera, renderer.domElement);
        controls.addEventListener('change', () => {
            renderer.render(scene, camera);
        });
 
        const cube = createCube();
        const light = createLights();
 
        // loop.updatables.push(controls);
 
        // stop the cube's animation
        // loop.updatables.push(cube);
 
        scene.add(cube, light);
 
        const resizer = new Resizer(container, camera, renderer);
    }
 
    render() {
        // draw a single frame
        renderer.render(scene, camera);
    }
 
    // start() {
    //     loop.start();
    // }
 
    // stop() {
    //     loop.stop();
    // }
}
 
export { World };

import { AmbientLight, DirectionalLight, HemisphereLight } from 'three';
 
function createLights() {
    const ambientLight = new HemisphereLight(
        'white', // bright sky color
        'darkslategrey', // dim ground color
        5, // intensity
    );
 
    const mainLight = new DirectionalLight('white', 5);
    mainLight.position.set(10, 10, 10);
 
    return { ambientLight, mainLight };
}
 
export { createLights };

import {
    SphereGeometry,
    Group,
    MathUtils,
    Mesh,
    MeshStandardMaterial,
} from 'three';
 
function createMeshGroup() {
    // a group holds other objects
    // but cannot be seen itself
    const group = new Group();
 
    const geometry = new SphereGeometry(0.25, 16, 16);
 
    const material = new MeshStandardMaterial({
        color: 'indigo',
    });
 
    const protoSphere = new Mesh(geometry, material);
 
    // add the protoSphere to the group
    group.add(protoSphere);
 
    // create twenty clones of the protoSphere
    // and add each to the group
    for (let i = 0; i < 1; i += 0.05) {
        const sphere = protoSphere.clone();
 
        // position the spheres on around a circle
        sphere.position.x = Math.cos(2 * Math.PI * i);
        sphere.position.y = Math.sin(2 * Math.PI * i);
 
        sphere.scale.multiplyScalar(0.01 + i);
 
        group.add(sphere);
    }
 
    // every sphere inside the group will be scaled
    group.scale.multiplyScalar(2);
 
    const radiansPerSecond = MathUtils.degToRad(30);
 
    // each frame, rotate the entire group of spheres
    group.tick = (delta) => {
        group.rotation.z -= delta * radiansPerSecond;
    };
 
    return group;
}
 
export { createMeshGroup };

import { createCamera } from './components/camera.js';
import {
    createAxesHelper,
    createGridHelper,
} from './components/helpers.js';
import { createLights } from './components/lights.js';
import { createScene } from './components/scene.js';
import { Train } from './components/Train/Train.js';
 
import { createControls } from './systems/controls.js';
import { createRenderer } from './systems/renderer.js';
import { Resizer } from './systems/Resizer.js';
import { Loop } from './systems/Loop.js';
 
let camera;
let renderer;
let scene;
let loop;
 
class World {
    constructor(container) {
        camera = createCamera();
        renderer = createRenderer();
        scene = createScene();
        loop = new Loop(camera, scene, renderer);
        container.append(renderer.domElement);
 
        const controls = createControls(camera, renderer.domElement);
        const { ambientLight, mainLight } = createLights();
        const train = new Train();
 
        loop.updatables.push(controls, train);
        scene.add(ambientLight, mainLight, train);
 
        const resizer = new Resizer(container, camera, renderer);
 
        scene.add(createAxesHelper(), createGridHelper());
    }
 
    render() {
        renderer.render(scene, camera);
    }
 
    start() {
        loop.start();
    }
 
    stop() {
        loop.stop();
    }
}
 
export { World };

import { Group, MathUtils } from 'three';
 
import { createMeshes } from './meshes.js';
 
const wheelSpeed = MathUtils.degToRad(24);
 
class Train extends Group {
    constructor() {
        super();
 
        this.meshes = createMeshes();
 
        this.add(
            this.meshes.nose,
            this.meshes.cabin,
            this.meshes.chimney,
            this.meshes.smallWheelRear,
            this.meshes.smallWheelCenter,
            this.meshes.smallWheelFront,
            this.meshes.bigWheel,
        );
    }
 
    tick(delta) {
        this.meshes.bigWheel.rotation.y += wheelSpeed * delta;
        this.meshes.smallWheelRear.rotation.y += wheelSpeed * delta;
        this.meshes.smallWheelCenter.rotation.y += wheelSpeed * delta;
        this.meshes.smallWheelFront.rotation.y += wheelSpeed * delta;
    }
}
 
export { Train };

import { World } from './World/World.js';
 
async function main() {
    // Get a reference to the container element
    const container = document.querySelector('#scene-container');
 
    // create a new world
    const world = new World(container);
 
    // complete async tasks
    await world.init();
 
    // start the animation loop
    world.start();
}
 
main().catch((err) => {
    console.error(err);
});

import { loadBirds } from './components/birds/birds.js';
import { createCamera } from './components/camera.js';
import { createLights } from './components/lights.js';
import { createScene } from './components/scene.js';
 
import { createControls } from './systems/controls.js';
import { createRenderer } from './systems/renderer.js';
import { Resizer } from './systems/Resizer.js';
import { Loop } from './systems/Loop.js';
 
let camera;
let controls;
let renderer;
let scene;
let loop;
 
class World {
    constructor(container) {
        camera = createCamera();
        renderer = createRenderer();
        scene = createScene();
        loop = new Loop(camera, scene, renderer);
        container.append(renderer.domElement);
        controls = createControls(camera, renderer.domElement);
 
        const { ambientLight, mainLight } = createLights();
 
        loop.updatables.push(controls);
        scene.add(ambientLight, mainLight);
 
        const resizer = new Resizer(container, camera, renderer);
    }
 
    async init() {
        const { parrot, flamingo, stork } = await loadBirds();
 
        // move the target to the center of the front bird
        controls.target.copy(parrot.position);
 
        loop.updatables.push(parrot, flamingo, stork);
        scene.add(parrot, flamingo, stork);
    }
 
    render() {
        renderer.render(scene, camera);
    }
 
    start() {
        loop.start();
    }
 
    stop() {
        loop.stop();
    }
}
 
export { World };