Проекты на Three.js и Babylon.js

import * as THREE from "three";
 
function main() {
    const canvas = document.querySelector("#renderCanvas");
    const renderer = new THREE.WebGLRenderer({ antialias: true, canvas });
    renderer.setSize(canvas.width, canvas.height);
 
    const fov = 75;
    const aspect = canvas.width / canvas.height;
    const near = 0.1;
    const far = 10;
    const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
    camera.position.z = 2;
 
    const scene = new THREE.Scene();
 
    const boxWidth = 1;
    const boxHeight = 1;
    const boxDepth = 1;
    const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);
 
    const material = new THREE.MeshBasicMaterial({ color: 0x44aa88 }); // greenish blue
 
    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);
 
    renderer.render(scene, camera);
}
 
main();

import RAPIER from "@dimforge/rapier3d-compat";
 
async function init() {
    await RAPIER.init();
 
    const gravity = { x: 0.0, y: -9.81, z: 0.0 };
    const world = new RAPIER.World(gravity);
 
    console.log(RAPIER.version());
}
 
init();

export default {
    input: "./src/client/main.js",
    output: {
        file: "public/js/bundle.js"
    }
}

import * as THREE from "three";
import { OrbitControls } from "orbit-controls";
import * as CANNON from "cannon-es";
 
let scene;
const world = new CANNON.World({ gravity: new CANNON.Vec3(0, -10, 0) });
const rigidBodies = [];
 
function init()
{
    initScene();
    createGround();
    createBox({ x: 0, y: 5, z: 0.5 });
    createBox({ x: 0.5, y: 2, z: 0 });
}
init();
 
function createGround()
{
    const pos = { x: 0, y: 0, z: 0 };
    const scale = { x: 50, y: 2, z: 50 };
    const quat = { x: 0, y: 0, z: 0, w: 1 };
    const mass = 0;
 
    // Three.js section
 
    const ground = new THREE.Mesh(
        new THREE.BoxBufferGeometry(),
        new THREE.MeshPhongMaterial({ color: 0xa0afa4 }));
 
    ground.position.set(pos.x, pos.y, pos.z);
    ground.scale.set(scale.x, scale.y, scale.z);
 
    ground.receiveShadow = true;
 
    scene.add(ground);
 
    // Cannon-ES section
 
    const colShape = new CANNON.Box(new CANNON.Vec3(scale.x / 2, scale.y / 2, scale.z / 2));
    const body = new CANNON.Body({ mass: mass });
    body.position.set(pos.x, pos.y, pos.z);
    body.quaternion.set(quat.x, quat.y, quat.z, quat.w);
    body.addShape(colShape);
 
    world.addBody(body);
}
 
function createBox(pos)
{
    const scale = { x: 1, y: 1, z: 1 };
    const quat = { x: 0, y: 0, z: 0, w: 1 };
    const mass = 10;
 
    // Three.js section
 
    const box = new THREE.Mesh(
        new THREE.BoxGeometry(1, 1, 1),
        new THREE.MeshPhongMaterial({ color: 0xe77732 }));
    scene.add(box);
 
    box.position.set(pos.x, pos.y, pos.z);
    box.scale.set(scale.x, scale.y, scale.z);
 
    box.castShadow = true;
    box.receiveShadow = true;
 
    scene.add(box);
 
    // Cannon-ES section
 
    const colShape = new CANNON.Box(new CANNON.Vec3(scale.x / 2, scale.y / 2, scale.z / 2));
    const body = new CANNON.Body({ mass: mass });
    body.position.set(pos.x, pos.y, pos.z);
    body.quaternion.set(quat.x, quat.y, quat.z, quat.w);
    body.addShape(colShape);
 
    world.addBody(body);
 
    box.userData.physicsBody = body;
    rigidBodies.push(box);
}
 
function updatePhysics()
{
    world.fixedStep();
 
    for (let i = 0; i < rigidBodies.length; i++)
    {
        let objThree = rigidBodies[i];
        let objCannon = objThree.userData.physicsBody;
 
        objThree.position.copy(objCannon.position);
        objThree.quaternion.copy(objCannon.quaternion);
    }
}
 
function initScene()
{
    // Create the scene
    scene = new THREE.Scene();
    scene.background = new THREE.Color(0xbfd1e5);
 
    // Add hemisphere light
    let hemiLight = new THREE.HemisphereLight(0xffffff, 0xffffff, 0.1);
    hemiLight.color.setHSL(0.6, 0.6, 0.6);
    hemiLight.groundColor.setHSL(0.1, 1, 0.4);
    hemiLight.position.set(0, 50, 0);
    scene.add(hemiLight);
 
    // Add directional light
    let dirLight = new THREE.DirectionalLight(0xffffff, 1);
    dirLight.color.setHSL(0.1, 1, 0.95);
    dirLight.position.set(-1, 1.75, 1);
    dirLight.position.multiplyScalar(100);
    scene.add(dirLight);
 
    dirLight.castShadow = true;
 
    dirLight.shadow.mapSize.width = 2048;
    dirLight.shadow.mapSize.height = 2048;
 
    let d = 50;
 
    dirLight.shadow.camera.left = -d;
    dirLight.shadow.camera.right = d;
    dirLight.shadow.camera.top = d;
    dirLight.shadow.camera.bottom = -d;
 
    dirLight.shadow.camera.far = 13500;
 
    const renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setClearColor(0xbfd1e5);
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
 
    renderer.gammaInput = true;
    renderer.gammaOutput = true;
 
    renderer.shadowMap.enabled = true;
 
    const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.01, 1000);
    camera.position.set(2, 4, 7);
 
    const orbitControls = new OrbitControls(camera, renderer.domElement);
    orbitControls.target = new THREE.Vector3(0, 0, 0);
 
    (function anim()
    {
        requestAnimationFrame(anim);
        orbitControls.update();
        updatePhysics();
        renderer.render(scene, camera);
    })();
 
    window.onresize =
        () =>
        {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        };
}

import { ColladaLoader } from "./node_modules/three/examples/jsm/loaders/ColladaLoader";
import { OrbitControls } from "./node_modules/three/examples/jsm/controls/OrbitControls";
 
console.log(ColladaLoader);
console.log(OrbitControls);

import { ColladaLoader } from "../../../node_modules/three/examples/jsm/loaders/ColladaLoader";
import { OrbitControls } from "../../../node_modules/three/examples/jsm/controls/OrbitControls";
 
console.log(ColladaLoader);
console.log(OrbitControls);