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

@8Observer8 · Регистрация: 05.10.2013

Студворк — интернет-сервис помощи студентам

Предлагаю делиться здесь проектами/примерами на Three.js и Babylon.js

Для затравки выложу примеры из начальных официальных туториалов.

Three.js

Официальный начальный туториал на русском по Three.js: Основы. На данный момент актуальна версия Three.js 0.182.0 от 10 декабря 2025 года.

Пример из официального туториала с небольшими изменениями на Three.js 0.182.0 в песочнице Plunker: https://plnkr.co/edit/QUrQ1I6rh8ZBN9BS

Исходники примера:

index.html

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
 
<html>
 
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Getting started in Three.js</title>
</head>
 
<body>
    <canvas id="renderCanvas" width="300" height="300"></canvas>
 
    <script type="importmap">
        {
            "imports": {
                "three": "https://cdn.jsdelivr.net/npm/three@0.182.0/build/three.module.min.js"
            }
        }
    </script>
 
    <script type="module" src="./js/index.js"></script>
</body>
 
</html>

js/index.js

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
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();

Пример на старой версии Three.js 89

Демка в песочнице Plunker

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>Three.js - Getting Started</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/89/three.min.js"></script>
 
    <style>
        body {
            margin: 0;
        }
 
        canvas {
            width: 100%;
            height: 100%
        }
    </style>
</head>
 
<body>
    <script>
        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
 
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);
 
        var geometry = new THREE.BoxGeometry(1, 1, 1);
        var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
        var cube = new THREE.Mesh(geometry, material);
        scene.add(cube);
 
        camera.position.z = 5;
 
        var animate = function ()
        {
            requestAnimationFrame(animate);
 
            cube.rotation.x += 0.1;
            cube.rotation.y += 0.1;
 
            renderer.render(scene, camera);
        };
 
        animate();
    </script>
</body>
 
</html>

Babylon.js

Getting Started (Babylon.js)

Пример со старой версий Babylon.js 2.5.0 в песочнице Plunker. На начало 2026 года актуальна версия Babylon.js 8.45.4

Исходники

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>Babylon.js - Getting Started</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babylonjs/2.5.0/babylon.js"></script>
 
    <style>
        html,
        body {
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
 
        #renderCanvas {
            width: 100%;
            height: 100%;
            touch-action: none;
        }
    </style>
</head>
 
<body>
    <canvas id="renderCanvas"></canvas>
 
    <script>
        window.addEventListener('DOMContentLoaded', function ()
        {
            // get the canvas DOM element
            var canvas = document.getElementById('renderCanvas');
 
            // load the 3D engine
            var engine = new BABYLON.Engine(canvas, true);
 
            // createScene function that creates and return the scene
            var createScene = function ()
            {
                // create a basic BJS Scene object
                var scene = new BABYLON.Scene(engine);
 
                // create a FreeCamera, and set its position to (x:0, y:5, z:-10)
                var camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(0, 5, -10), scene);
 
                // target the camera to scene origin
                camera.setTarget(BABYLON.Vector3.Zero());
 
                // attach the camera to the canvas
                camera.attachControl(canvas, false);
 
                // create a basic light, aiming 0,1,0 - meaning, to the sky
                var light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0, 1, 0), scene);
 
                // create a built-in "sphere" shape; its constructor takes 5 params: name, width, depth, subdivisions, scene
                var sphere = BABYLON.Mesh.CreateSphere('sphere1', 16, 2, scene);
 
                // move the sphere upward 1/2 of its height
                sphere.position.y = 1;
 
                // create a built-in "ground" shape; its constructor takes the same 5 params as the sphere's one
                var ground = BABYLON.Mesh.CreateGround('ground1', 6, 6, 2, scene);
 
                // return the created scene
                return scene;
            }
 
            // call the createScene function
            var scene = createScene();
 
            // run the render loop
            engine.runRenderLoop(function ()
            {
                scene.render();
            });
 
            // the canvas/window resize event handler
            window.addEventListener('resize', function ()            
            {
                engine.resize();
            });
        });
    </script>
</body>
 
</html>

@8Observer8 · 11.05.2024, 20:52 **[ТС]**

Простой контроллер от третьего лица на Three.js, OimoPhysics и JavaScript

Камера следует за кораблём. Камеру можно вращать вокруг объекта с помощью зажатой левой кнопкой мыши. Камеру можно приближать и отдалять с помощью колёсика мыши. На сцене есть куб через который корабль не может пройти, потому что вокруг куба статический коллайдер, а вокруг корабля динамический коллайдер в форме сферы.

Демка на бесплатном хостинге Glitch

Песочница Plunker: https://plnkr.co/edit/ENV8AfwIztG5YS7g?preview

GitHub репозиторий

Миниатюры

@8Observer8 · 20.10.2024, 15:48 **[ТС]**

Рисование отрезка между двумя указанными точками

Демка в песочнице

Название: 910291bbdd524e466bf781738759a1923ec76c07.png
Просмотров: 287

Размер: 539 байт

Название: 910291bbdd524e466bf781738759a1923ec76c07.png
Просмотров: 287

Размер: 539 байт

index.html

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
 
<html>
 
<head>
    <meta charset="utf-8">
    <title>Draw a line using Three.js and JavaScript</title>
</head>
 
<body>
    <script type="importmap">
        {
            "imports": {
                "three": "https://unpkg.com/three@0.154.0/build/three.module.js",
                "orbit-controls": "https://unpkg.com/three@0.154.0/examples/jsm/controls/OrbitControls.js"
            }
        }
    </script>
 
    <script type="module" src="./js/index.js"></script>
</body>
 
</html>

index.js

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
import * as THREE from "three";
import { OrbitControls } from "orbit-controls";
 
async function init() {
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);
    camera.position.y = 0;
    camera.position.z = 10;
 
    const renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(300, 300);
    renderer.setClearColor(0x000000, 1);
    document.body.appendChild(renderer.domElement);
 
    const orbitControls = new OrbitControls(camera, renderer.domElement);
    orbitControls.target = new THREE.Vector3(0, 0, 0);
 
    const curveMaterial = new THREE.LineBasicMaterial({
        color: 0xffffff,
        vertexColors: true,
        linewidth: 3
    });
    const curveGeometry = new THREE.BufferGeometry();
 
    const curve = new THREE.LineSegments(curveGeometry, curveMaterial);
    scene.add(curve);
 
    const curveVertexPositions = [];
    curveVertexPositions.push(0);
    curveVertexPositions.push(0);
    curveVertexPositions.push(0);
    curveVertexPositions.push(5);
    curveVertexPositions.push(5);
    curveVertexPositions.push(0);
    const amountOfPoints = curveVertexPositions.length / 3;
 
    const curveVertexColors = [];
    for (let i = 0; i < amountOfPoints; i++) {
        curveVertexColors.push(0);
        curveVertexColors.push(1);
        curveVertexColors.push(0);
        curveVertexColors.push(1);
    }
 
    curve.geometry.setAttribute("position",
        new THREE.BufferAttribute(new Float32Array(curveVertexPositions), 3));
    curve.geometry.setAttribute("color",
        new THREE.BufferAttribute(new Float32Array(curveVertexColors), 4));
 
    function render() {
        requestAnimationFrame(render);
        orbitControls.update();
        renderer.render(scene, camera);
    }
 
    render();
}
 
init();

@8Observer8 · 01.11.2024, 02:11 **[ТС]**

Загрузка кривой из Blender 2.7 из файла Collada (.dae) и рисование отрезков между точками кривой с помощь Three.js

Файл Collada (.dae) представляет из себя XML-файл. Кривая "Bezier" (либо "Nurbs Curve") должна быть преобразована из кривой в Mesh с помощью опции Blender: "Object" > "Covert to" > "Mesh from Curve". Точки кривой соединяются отрезками, как в примере выше.

Демка в песочнице

Название: 9d5ae84e0ccd2ec3e759f96a01c232c24cf25249.png
Просмотров: 276

Размер: 784 байт

Название: 9d5ae84e0ccd2ec3e759f96a01c232c24cf25249.png
Просмотров: 276

Размер: 784 байт

Для того, чтобы загрузить свою кривую:

Кривую нужно создать в Blender: "Shift+A" > выбрать "Curve" > выбрать "Bezier" (либо "Nurbs Curve")
Добавляем новые точки управление кривой. Для этого переходил в режим редактирования на Tab. Выделяем две соседние точки управления, нажимаем клавишу W и выбираем "Subdivide"
Переводим кривую в Mesh. Перед этим лучше сделать копию кривой. Переходим в режим "Object Mode" на Tab. Делаем дубликат кривой на "Shift+D" > "Enter". Перемещаем кривую на новый слой нажатием на клавишу M. Кликаем на нужный слой на панели снизу в середине. Далее, переводим выделенную кривую в Mesh, в меню: "Object" > "Covert to" > "Mesh from Curve"
Экспортируем в файл Collada (.dae). В меню кликните: "File" > "Export" > "Collada (.dae)" > поставьте галочку "Selection Only" > называем файл "curve.dae"
Закидываем перетаскиванием мыши созданный файл в песочницу в папку "assets": https://plnkr.co/edit/BPZba3X1xbHkC7XU?preview

index.html

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
 
<html>
 
<head>
    <meta charset="utf-8">
    <title>Draw a mesh curve from Blender using Three.js, and JavaScript</title>
</head>
 
<body>
    <script type="importmap">
        {
            "imports": {
                "three": "https://unpkg.com/three@0.154.0/build/three.module.js",
                "orbit-controls": "https://unpkg.com/three@0.154.0/examples/jsm/controls/OrbitControls.js"
            }
        }
    </script>
 
    <script type="module" src="./js/index.js"></script>
</body>
 
</html>

js/index.js

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
import * as THREE from "three";
import { OrbitControls } from "orbit-controls";
 
async function init() {
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);
    camera.position.y = 0;
    camera.position.z = 4;
 
    const renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(300, 300);
    renderer.setClearColor(0x000000, 1);
    document.body.appendChild(renderer.domElement);
 
    const orbitControls = new OrbitControls(camera, renderer.domElement);
    orbitControls.target = new THREE.Vector3(0, 0, 0);
 
    const curveMaterial = new THREE.LineBasicMaterial({
        color: 0xffffff,
        vertexColors: true,
        linewidth: 3
    });
    const curveGeometry = new THREE.BufferGeometry();
 
    const curve = new THREE.LineSegments(curveGeometry, curveMaterial);
    scene.add(curve);
 
    const contentResponse = await fetch("./assets/curve.dae");
    const content = await contentResponse.text();
    const parser = new DOMParser();
    const xmlDoc = parser.parseFromString(content, "text/xml");
    const positionsStr = xmlDoc.getElementsByTagName("float_array")[0].textContent;
    // const positionsStr = "-1.409149 -0.06045043 0.01904559 -1.391453 -0.01293981 0.01904559 -1.372099 0.03396666 0.01904559 -1.351116 0.07998359 0.01904559 -1.328534 0.1248248 0.01904559 -1.304382 0.1682051 0.01904559 -1.278689 0.2098382 0.01904559 -1.251483 0.2494385 0.01904559 -1.222796 0.2867208 0.01904559 -1.192656 0.3213987 0.01904559 -1.161091 0.3531867 0.01904559 -1.128133 0.3817992 0.01904559 -1.093808 0.4069504 0.01904559 -1.058148 0.4283545 0.01904559 -1.021181 0.4457259 0.01904559 -0.982937 0.4587786 0.01904559 -0.9434444 0.4672275 0.01904559 -0.902733 0.4707862 0.01904559 -0.8608318 0.4691693 0.01904559 -0.8177703 0.4620909 0.01904559 -0.7735778 0.4492712 0.01904559 -0.728294 0.4307824 0.01904559 -0.6819739 0.4072429 0.01904559 -0.6346741 0.3793167 0.01904559 -0.5864512 0.3476695 0.01904559 -0.5373617 0.3129655 0.01904559 -0.4874619 0.2758697 0.01904559 -0.4368086 0.2370473 0.01904559 -0.3854581 0.1971629 0.01904559 -0.3334671 0.1568814 0.01904559 -0.280892 0.1168675 0.01904559 -0.2277894 0.07778632 0.01904559 -0.1742157 0.04030263 0.01904559 -0.1202277 0.005081176 0.01904559 -0.0658816 -0.02721309 0.01904559 -0.0112341 -0.05591535 0.01904559 0.04365825 -0.08036077 0.01904559 0.09873908 -0.09988433 0.01904559 0.1539518 -0.1138213 0.01904559 0.2092399 -0.1215069 0.01904559 0.264546 -0.1223455 0.01904559 0.3198035 -0.1165465 0.01904559 0.3749397 -0.1048389 0.01904559 0.4298819 -0.08795994 0.01904559 0.4845573 -0.06664711 0.01904559 0.5388932 -0.04163795 0.01904559 0.5928168 -0.01366996 0.01904559 0.6462553 0.01651942 0.01904559 0.699136 0.04819297 0.01904559 0.7513862 0.08061277 0.01904559 0.8029329 0.1130416 0.01904559 0.8537037 0.1447421 0.01904559 0.9036256 0.1749768 0.01904559 0.9526258 0.2030078 0.01904559 1.000632 0.2280982 0.01904559 1.04757 0.2495102 0.01904559 1.093369 0.2665067 0.01904559 1.137956 0.2783498 0.01904559 1.181257 0.2843022 0.01904559 1.223199 0.2836264 0.01904559";
    const positions = positionsStr.split(" ").map((value) => { return parseFloat(value); });
 
    const curveVertexPositions = [];
    for (let i = 0; i < positions.length / 3 - 1; i++) {
        // Begin point
        curveVertexPositions.push(positions[i * 3 + 0]);
        curveVertexPositions.push(positions[i * 3 + 1]);
        curveVertexPositions.push(positions[i * 3 + 2]);
        // End point
        curveVertexPositions.push(positions[i * 3 + 3]);
        curveVertexPositions.push(positions[i * 3 + 4]);
        curveVertexPositions.push(positions[i * 3 + 5]);
    }
 
    const amountOfPoints = curveVertexPositions.length / 3;
 
    const curveVertexColors = [];
    for (let i = 0; i < amountOfPoints; i++) {
        curveVertexColors.push(0);
        curveVertexColors.push(1);
        curveVertexColors.push(0);
        curveVertexColors.push(1);
    }
 
    curve.geometry.setAttribute("position",
        new THREE.BufferAttribute(new Float32Array(curveVertexPositions), 3));
    curve.geometry.setAttribute("color",
        new THREE.BufferAttribute(new Float32Array(curveVertexColors), 4));
 
    function render() {
        requestAnimationFrame(render);
        orbitControls.update();
        renderer.render(scene, camera);
    }
 
    render();
}
 
init();

assets/curve.dae

XML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<?xml version="1.0" encoding="utf-8"?>
<COLLADA xmlns="http://www.collada.org/2005/11/COLLADASchema" version="1.4.1">
  <asset>
    <contributor>
      <author>Blender User</author>
      <authoring_tool>Blender 2.71.0 commit date:2014-06-25, commit time:18:36, hash:9337574</authoring_tool>
    </contributor>
    <created>2024-10-25T01:17:56</created>
    <modified>2024-10-25T01:17:56</modified>
    <unit name="meter" meter="1"/>
    <up_axis>Z_UP</up_axis>
  </asset>
  <library_images/>
  <library_geometries>
    <geometry id="Mesh-mesh" name="Mesh">
      <mesh>
        <source id="Mesh-mesh-positions">
          <float_array id="Mesh-mesh-positions-array" count="216">-1.959279 0.7002723 0.4047946 -1.895665 0.6951529 0.4022891 -1.829969 0.6813059 0.3981596 -1.762481 0.6599143 0.3925457 -1.693493 0.6321612 0.385587 -1.623295 0.5992293 0.3774232 -1.552179 0.5623021 0.3681938 -1.480434 0.5225623 0.3580385 -1.408352 0.481193 0.3470969 -1.336224 0.4393771 0.3355085 -1.264341 0.3982979 0.3234131 -1.192992 0.3591382 0.3109502 -1.12247 0.323081 0.2982594 -1.053064 0.2913093 0.2854804 -0.9850668 0.2650063 0.2727527 -0.9187676 0.2453548 0.260216 -0.8544579 0.233538 0.2480099 -0.7924284 0.2307388 0.236274 -0.7329684 0.2381348 0.2251476 -0.6761651 0.2562507 0.2147329 -0.6217133 0.2843428 0.2050602 -0.5692633 0.3215221 0.1961514 -0.5184649 0.3668996 0.1880284 -0.468968 0.4195858 0.1807132 -0.4204228 0.4786917 0.1742278 -0.3724793 0.5433283 0.1685941 -0.3247872 0.6126061 0.163834 -0.2769967 0.6856362 0.1599695 -0.2287579 0.7615295 0.1570225 -0.1797205 0.8393965 0.1550151 -0.1295348 0.9183485 0.1539691 -0.07785069 0.997496 0.1539064 -0.02431803 1.07595 0.1548491 0.03141295 1.152821 0.1568191 0.08969247 1.227221 0.1598383 0.1508704 1.298259 0.1639287 0.2152797 1.365064 0.1691086 0.2828598 1.427131 0.1753142 0.353156 1.484328 0.1823991 0.4256972 1.536537 0.1902136 0.5000118 1.583642 0.1986076 0.5756283 1.625526 0.2074316 0.6520754 1.662072 0.2165355 0.7288815 1.693162 0.2257696 0.8055752 1.71868 0.234984 0.881685 1.738509 0.2440289 0.9567395 1.752531 0.2527544 1.030267 1.76063 0.2610107 1.101797 1.762689 0.268648 1.170857 1.75859 0.2755163 1.236975 1.748217 0.281466 1.299682 1.731452 0.286347 1.358504 1.708179 0.2900096 1.41297 1.678281 0.292304 1.462666 1.641682 0.2930995 1.507668 1.598675 0.2924321 1.548305 1.54974 0.2904235 1.584908 1.49536 0.2871968 1.617808 1.436016 0.2828741 1.647337 1.37219 0.2775784 1.673826 1.304366 0.2714321 1.697607 1.233024 0.2645578 1.71901 1.158648 0.2570782 1.738368 1.081719 0.249116 1.75601 1.00272 0.2407937 1.772269 0.9221323 0.232234 1.787477 0.840439 0.2235594 1.801963 0.7581217 0.2148925 1.81606 0.6756628 0.2063561 1.830099 0.5935446 0.1980727 1.844411 0.5122491 0.1901649 1.859328 0.4322584 0.1827553</float_array>
          <technique_common>
            <accessor source="#Mesh-mesh-positions-array" count="72" stride="3">
              <param name="X" type="float"/>
              <param name="Y" type="float"/>
              <param name="Z" type="float"/>
            </accessor>
          </technique_common>
        </source>
        <source id="Mesh-mesh-normals">
          <float_array id="Mesh-mesh-normals-array" count="0"/>
          <technique_common>
            <accessor source="#Mesh-mesh-normals-array" count="0" stride="3">
              <param name="X" type="float"/>
              <param name="Y" type="float"/>
              <param name="Z" type="float"/>
            </accessor>
          </technique_common>
        </source>
        <vertices id="Mesh-mesh-vertices">
          <input semantic="POSITION" source="#Mesh-mesh-positions"/>
        </vertices>
        <lines count="71">
          <input semantic="VERTEX" source="#Mesh-mesh-vertices" offset="0"/>
          <p>1 0 2 1 3 2 4 3 5 4 6 5 7 6 8 7 9 8 10 9 11 10 12 11 13 12 14 13 15 14 16 15 17 16 18 17 19 18 20 19 21 20 22 21 23 22 24 23 25 24 26 25 27 26 28 27 29 28 30 29 31 30 32 31 33 32 34 33 35 34 36 35 37 36 38 37 39 38 40 39 41 40 42 41 43 42 44 43 45 44 46 45 47 46 48 47 49 48 50 49 51 50 52 51 53 52 54 53 55 54 56 55 57 56 58 57 59 58 60 59 61 60 62 61 63 62 64 63 65 64 66 65 67 66 68 67 69 68 70 69 71 70</p>
        </lines>
      </mesh>
    </geometry>
  </library_geometries>
  <library_visual_scenes>
    <visual_scene id="Scene" name="Scene">
      <node id="NurbsCurve" name="NurbsCurve" type="NODE">
        <matrix sid="transform">1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 1</matrix>
        <instance_geometry url="#Mesh-mesh"/>
      </node>
    </visual_scene>
  </library_visual_scenes>
  <scene>
    <instance_visual_scene url="#Scene"/>
  </scene>
</COLLADA>

@8Observer8 · 04.06.2025, 03:25 **[ТС]**

Рисование коллайдеров физического движка Box2D-WASM v3 на Three.js

Erin Catto (автор Box2D) переписал с нуля Box2D v2 с С++ на Си и появилась версия Box2D v3. Birch-san собрал Box2D v3 в WASM, чтобы можно было использовать Box2D v3 на JavaScript.

В этом примере я объединил Box2D-WASM v3 и Three.js, чтобы можно было видеть коллайдеры. Для прямоугольников Box2D-WASM даёт точки углов, между которыми рисуются линии, а для кругового коллайдера Box2D-WASM даёт координаты центра и радиус, а окружность рисуется с помощью коротких линий. Можно использовать мышку для управления камерой. Используется стандартный OrbitControls и Three.js

Демка в песочнице

Название: debug-drawer-box2d-wasm-v3-threejs-js-plunker.gif
Просмотров: 245

Размер: 128.8 Кб

Название: debug-drawer-box2d-wasm-v3-threejs-js-plunker.gif
Просмотров: 245

Размер: 128.8 Кб

@Igor3D · 05.06.2025, 18:29

Сообщение от 8Observer8

чтобы можно было видеть коллайдеры.

А зачем они вообще нужны, эти коллайдеры? Движок физики сам разбирается с collision detection, разве нет?

@8Observer8 · 05.06.2025, 20:07 **[ТС]**

Сообщение от Igor3D

А зачем они вообще нужны, эти коллайдеры? Движок физики сам разбирается с collision detection, разве нет?

Box2D предоставляет средства, чтобы можно было визуализировать коллайдеры для разработки и отладки. Например, в Bullet Physics есть класс btDebugDraw от которого нужно наследоваться и переопределить его чисто виртуальные методы, например, этот метод для рисования отрезка между двумя точками с заданным цветом:

C++
1
virtual void drawLine(const btVector3& from, const btVector3& to, const btVector3& color) = 0;

Этот метод автоматически будет вызываться для каждого отрезка коллайдера. Достаточно уметь рисовать линию между двумя точками заданного цвета, чтобы случилась визуализация коллайдеров, например, вот демка в браузере для перемещения от первого лица на C++ OpenGL, Bullet Physics и SDL3. Здесь я просто рисую отрезки между "from" и "to" с цветом "color", которые получаю в методе drawLine класса btDebugDraw

Миниатюры

@Igor3D · 05.06.2025, 20:55

Хорошо, спрошу иначе. Вот самый простой пример Bullet "Hello world" - шарик падает на плоскость и не проходит сквозь нее, а отскакивает как положено. При этом никаких "коллидеров" не создается. А Вам зачем они нужны?

@8Observer8 · 05.06.2025, 22:35 **[ТС]**

Сообщение от Igor3D

При этом никаких "коллидеров" не создается.

Я коллайдерами называю невидимые объекты с формами типа btBoxShape, btSphereShape, btCapsuleShape и т.д. Допустим, если вы создадите квартиру по которой нужно будет передвигаться от первого лица, то на место стен нужно будет поставить статические box-коллайдеры, чтобы динамический коллайдер (сферический или капсульный), с закреплённой камерой, не проходил сквозь статические, то есть сквозь стены. Чтобы расставить статические box-коллайдеры их нужно визуализировать в помощью btDebugDraw, а в релизе визуализацию коллайдеров можно отключить.

https://raft.fandom.com/ru/wiki/Коллайдер

Коллайдер (Collider) - невидимая упрощённая форма объекта, привязанная к нему, для расчёта столкновений с другими объектами. Этот термин настолько прочно вошел в сленг разработчиков игр, что его можно считать общеизвестным среди опытных игроков.

Физический движок использует коллайдеры, чтобы придать предметам объём. Таким образом, объекты не проходят друг сквозь друга, а также можно встретить разные эффекты при их столкновении или трении. Например, выброшенные на плот вещи не проходят сквозь него, а остаются лежать на поверхности, при столкновении с плотом падающий предмет издаёт звук и т.д. Многие структуры имеют объём и не позволяют игроку проходить сквозь них (ведь персонаж - тоже физический объект со своим коллайдером).

При описании коллайдера животных во время атаки игроком часто используют термин - хитбокс (hitbox). При попадании копьём по хитбоксу кабана, он получает урон и остро реагирует. А хитбокс трескуна расположен чуть выше, когда он поднимает камень с земли, поэтому целиться из лука лучше примерно в голову, а выстрел в тело может промазать.

Вы можете открыть сайт https://chatgpt.com/ и задать вопрос "Что такое коллайдер в Bullet Physics". Мне был выдан ответ:

В Bullet Physics термин коллайдер (collider) относится к форме или объёму, используемому для обнаружения столкновений между объектами в физической симуляции. Коллайдеры определяют границы физического объекта, но не содержат массу, скорость или другие физические свойства — за это отвечает жёсткое тело (rigid body).

Подробно:

Коллайдер (Форма столкновения)

Форма столкновения (collision shape) в Bullet — это геометрическая форма, используемая для определения пересечений с другими формами.
Определяет "твёрдую" часть объекта для целей столкновений.
Не содержит физического состояния (например, позицию или скорость) — этим управляет жёсткое тело.

Основные типы коллайдеров

Bullet предоставляет несколько встроенных форм:

btBoxShape – Прямоугольный параллелепипед.
btSphereShape – Сфера.
btCapsuleShape – Капсула (цилиндр с полусферическими концами).
btCylinderShape – Цилиндр.
btConvexHullShape – Выпуклая оболочка из набора точек.
btBvhTriangleMeshShape – Статическая треугольная сетка (для уровня/сценария).

Коллайдер vs Жёсткое тело

Жёсткое тело (btRigidBody) — это физический объект с массой, скоростью и т.д.
Коллайдер (форма столкновения, например btBoxShape) — это его форма.

Пример подключения формы к телу:

C++
1
2
3
4
btCollisionShape* shape = new btBoxShape(btVector3(1,1,1));
btDefaultMotionState* motionState = new btDefaultMotionState(startTransform);
btRigidBody::btRigidBodyConstructionInfo rbInfo(mass, motionState, shape);
btRigidBody* body = new btRigidBody(rbInfo);

Статические и динамические коллайдеры

Статические коллайдеры: Не имеют массы и не двигаются (например, пол, стены).
Динамические коллайдеры: Прикреплены к подвижным телам, участвуют во взаимодействиях.

Резюме

В Bullet Physics коллайдер (или форма столкновения) — это геометрическое описание объекта, используемое для обнаружения столкновений. Коллайдер прикрепляется к жёсткому телу, чтобы участвовать в физическом моделировании.

@Igor3D · 06.06.2025, 00:31

Сообщение от 8Observer8

Допустим, если вы создадите квартиру по которой нужно будет передвигаться от первого лица, то на место стен нужно будет поставить статические box-коллайдеры, чтобы динамический коллайдер (сферический или капсульный), с закреплённой камерой, не проходил сквозь статические, то есть сквозь стены. Чтобы расставить статические box-коллайдеры их нужно визуализировать в помощью btDebugDraw, а в релизе визуализацию коллайдеров можно отключить.

Если есть нормальная модель комнаты, то никаких коллайдеров дополнительно не нужно. Просто создаете "static" rigidBody, задавая меш этой комнаты в качестве шейпа. Насколько я помню, движок создает bvh дерево для такого меша (рекомендуется сливать статические объекты в один меш). Коллизии (пересечения объектов) считаются довольно шустро с таким деревом, даже для приличной деталировки, иметь объем статический меш не обязан, может произвольно (само) пересекаться. Общем, со статикой все хорошо.

Для "dynamic" rigidBody (с объемом, массой, скоростью) - да, прямолинейное создание шейпа из меша может тормозить, к тому же создать его может быть непросто. Проблема не столько в числе полигонов, сколько в форме, напр чайник - не "convex" тело, придется возюкаться разбивать его на части (convex decomposition). Поэтому для таких объектов частенько лучше использовать упрощенную "proxy shape". Это совсем не значит что к объекту "что-то добавляется", просто форма меняется на простую (со всеми вытекающими). Конечно такая замена - решение юзера движка.

В любом случае понятие "коллайдер" движку чуждо. Др словами в мире физики и так все объекты "коллайдеры", наоборот, надо прилагать усилия чтобы разрешить взаимо-пересечения.

Сообщение от 8Observer8

В Bullet Physics коллайдер (или форма столкновения) — это геометрическое описание объекта, используемое для обнаружения столкновений.

Геометрическое описание - это shape, и оно единственное, на все про все, нет никаких других описаний для того/этого

Не по теме:

Вики-знания хороши когда человек совсем уж нулевой :)

@8Observer8 · 06.06.2025, 00:51 **[ТС]**

Рисование коллайдеров Box2D v2 на Three.js с помощью порта @box2d/core

Используется порт Box2D v2 под названием @box2d/core - пакет NPM. Загрузил документацию Box2D v2 на Netlify: https://box2d-v2-docs.netlify.app/ Документацию Box2D v2 можно скачать с официального репозитория с этой страницы: Final release of version 2

Box2D v3 заменил v2, но @box2D/core проще в изучении, чем Box2D-WASM, так как код проще. По v2 много туториалов.

В релизе рисование коллайдеров отключается комментированием этих строк в файле index.js в функции render():

JavaScript
1
2
3
    // debugDrawer.begin();
    // DrawShapes(debugDrawer, world);
    // debugDrawer.end();

Демка в песочнице

Миниатюры

@Igor3D · 06.06.2025, 10:11

Вот колокол, первая попавшаяся модель. Как, с помощью движка, сделать анимацию "колокол звенит"?

@Igor3D · 07.06.2025, 17:04

Ну что, опять "сделал вид что не слышит"?

Где-то читал что лучшие результаты ("творческий рост" и все такое) достигаются при решении задач с вероятностью успеха примерно 50%. Др словами задача должна быть достаточно трудна, но не безнадежна. Увы, при отсутствии всякой критики (да и просто общения) Вы скатываетесь в вероятность >95%, Вас пугают любые трудности

Возвращаясь к колоколу. Ясно он должен анимироваться движком, как и язычок, значит однозначно "dynamic" rigidBody. Но какую шейпу дать движку? Вот и примените все что знаете о "коллайдерах" (если это слово так уж нужно). Но для начала нужно чтобы колокол висел (а не падал). Какие есть мысли?

@8Observer8 · 21.08.2025, 16:13 **[ТС]**

Рисования кончика (tip'а) на Three.js и Box2D-core v2

Кончик (tip) необходим при отладке, чтобы видеть, что коллайдер типа Circle вращается или не вращается, а коллайдер типа Box изменил или не изменил ориентацию в пространстве.

Демка в песочнице: https://plnkr.co/edit/3zHt7EqT06LEh8Z3

@8Observer8 · 23.08.2025, 12:04 **[ТС]**

Рисование коллайдеров для физического движка Ammo.js с помощью Three.js

Ammo.js - это сборка Bullet Physics в WebAssembly. Ammo.js был преобразован в ES-модуль по инструкции: Конвертация Ammo.js в ES6-модуль. У Ammo.js (и Bullet Physics) есть встроенный класс btDebugDraw для помощи в отладке приложения - для визуализации коллайдеров во время отладки. Класс btDebugDraw предоставляет метод drawLine(from, to, color), который в режиме отладки вызывается автоматически для каждого отрезка коллайдера. В теле метода drawLine(from, to, color) доступны три аргумента: from, to, color, где from - вектор начала отрезка, to - вектор конца отрезка, color - цвет отрезка. Для рисования коллайдера на Three.js достаточно нарисовать отрезок между from и to заданного цвета color.

Демка в песочнице: https://plnkr.co/edit/MeORlGl8cKOCTdbF

@8Observer8 · 06.03.2026, 13:45 **[ТС]**

Простейший кастомный джойстик на чистом HTML и CSS для мобильный устройств, написанный с помощью бесплатного Gemini

Кубик рисуется с помощью библиотеки Three.js. Для упрощения здесь НЕ используется физический движок для перемещений. В реальном приложении при перемещении главного героя (ГГ) проще всего использовать готовый физический движок типа Ammo.js (то есть сборка C++-движка Bullet Physics в WebAssembly), Rapier (то есть сборка Rust-движка Rapier в WebAssembly) и т. д., чтобы ГГ не проходил сквозь препятствия: деревья, заборы, стены домов - и мог подниматься на холмы, наклонные поверхности, ступеньки и т. д. В этом веб-приложении реализовано управление камерой, которое вы можете сделать по моей пошаговой инструкции: Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование

Демка для Desktop-браузеров (управление: WASD или клавиши-стрелки)

QR-Code для запуска в браузере на мобильном устройстве:

Название: 56a3b5f7-7cd8-4008-9f05-1ad017f733ac.png
Просмотров: 6

Размер: 2.4 Кб

Название: 56a3b5f7-7cd8-4008-9f05-1ad017f733ac.png
Просмотров: 6

Размер: 2.4 Кб

index.html

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="./css/style.css">
    <title>Example</title>
</head>
 
<body>
    <canvas id="renderCanvas"></canvas>
 
    <script type="importmap">
        {
            "imports": {
                "three": "https://cdn.jsdelivr.net/npm/three@0.183.2/build/three.module.min.js",
                "orbit-controls": "https://cdn.jsdelivr.net/npm/three@0.183.2/examples/jsm/controls/OrbitControls.js"
            }
        }
    </script>
 
    <script type="module" src="./js/index.js"></script>
</body>
 
</html>

js/index.js

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
import * as THREE from "three";
import { OrbitControls } from "orbit-controls";
 
let renderer, scene, camera, controls, cube;
 
// Movement tracking state
const moveState = { forward: 0, backward: 0, left: 0, right: 0 };
const moveSpeed = 0.15;
 
function main() {
    init();
    setupInputs(); // Initialize Desktop + Mobile controls
    window.onresize = onWindowResize;
    animate();
}
 
window.onload = main;
 
function init() {
    const canvas = document.getElementById("renderCanvas");
 
    renderer = new THREE.WebGLRenderer({ antialias: true, canvas });
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setPixelRatio(window.devicePixelRatio);
 
    scene = new THREE.Scene();
    scene.background = new THREE.Color(0x222222);
 
    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 100);
    camera.position.set(0, 15, 20);
 
    controls = new OrbitControls(camera, renderer.domElement);
    controls.enableDamping = true; // Smooth movement
 
    const geometry = new THREE.BoxGeometry(2, 2, 2);
    const material = new THREE.MeshStandardMaterial({ color: 0x00ff88 });
    cube = new THREE.Mesh(geometry, material);
    scene.add(cube);
 
    const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
    directionalLight.position.set(5, 4, 3);
    scene.add(directionalLight);
 
    const ambientLight = new THREE.AmbientLight(0xffffff, 0.4);
    scene.add(ambientLight);
}
 
// Input Handling Logic
function setupInputs() {
    // Desktop: WASD & Arraws
    const handleKey = (e, isPressed) => {
        const value = isPressed ? 1 : 0;
 
        switch (e.code) {
            case 'KeyW':
            case 'ArrowUp':
                moveState.forward = value;
                break;
            case 'KeyS':
            case 'ArrowDown':
                moveState.backward = value;
                break;
            case 'KeyA':
            case 'ArrowLeft':
                moveState.left = value;
                break;
            case 'KeyD':
            case 'ArrowRight':
                moveState.right = value;
                break;
        }
    };
 
    window.addEventListener('keydown', (e) => handleKey(e, true));
    window.addEventListener('keyup', (e) => handleKey(e, false));
 
    // Mobile: Detect and create Joystick
    const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
    if (isMobile) {
        createJoystickUI();
    }
}
 
function createJoystickUI() {
    // Create simple DOM elements for joystick
    const base = document.createElement('div');
    base.style = "position:absolute; bottom:50px; left:50px; width: 100px; height: 100px; " +
        "background:rgba(255,255,255,0.2); border-radius:50%; touch-action:none; z-index:10;";
 
    const stick = document.createElement('div');
    stick.style = "position:absolute; top:25px; left:25px; width:50px; height:50px; " +
        "background:white; border-radius:50%; transition: transform 0.1s;";
 
    base.appendChild(stick);
    document.body.appendChild(base);
 
    base.addEventListener('touchmove', (e) => {
        const touch = e.touches[0];
        const rect = base.getBoundingClientRect();
        const centerX = rect.left + rect.width / 2;
        const centerY = rect.top + rect.height / 2;
 
        // Calculate normalized vector (-1 to 1)
        let dx = (touch.clientX - centerX) / 50;
        let dy = (touch.clientY - centerY) / 50;
 
        // Clamp values
        const dist = Math.sqrt(dx * dx + dy * dy);
        if (dist > 1) {
            dx /= dist;
            dy /= dist;
        }
 
        stick.style.transform = `translate(${dx * 40}px, ${dy * 40}px)`;
 
        // Map to moveState
        moveState.right = dx > 0.2 ? dx : 0;
        moveState.left = dx < -0.2 ? -dx : 0;
        moveState.backward = dy > 0.2 ? dy : 0;
        moveState.forward = dy < -0.2 ? -dy : 0;
    });
 
    base.addEventListener('touchend', () => {
        stick.style.transform = `translate(0px, 0px)`;
        moveState.forward = moveState.backward = moveState.left = moveState.right = 0;
    });
}
 
function animate() {
    requestAnimationFrame(animate);
 
    // Apply movement to the cube
    // We calculate movement based on camera orientation or local axes
    cube.position.z += (moveState.backward - moveState.forward) * moveSpeed;
    cube.position.x += (moveState.right - moveState.left) * moveSpeed;
 
    controls.update();
    renderer.render(scene, camera);
}
 
function onWindowResize() {
    // Update the camera's aspect ratio
    camera.aspect = window.innerWidth / window.innerHeight;
 
    // Recalculate the projection matrix
    camera.updateProjectionMatrix();
 
    // Update the renderer size
    renderer.setSize(window.innerWidth, window.innerHeight);
 
    // Handle high-DPI scaling for the new size
    renderer.setPixelRatio(window.devicePixelRatio);
}

css/style.css

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
body,
html {
    overflow: hidden;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
 
#renderCanvas {
    width: 100%;
    height: 100%;
}

Миниатюры

@zalec · 06.03.2026, 17:45

Надо двигать кубик в зависимости от направления камеры. Если джостик вверх, или нажать W, то кубик движется вперед в плоскости камеры.

Новые блоги и статьи Все статьи Все блоги /
Скрипты Tampermonkey для CyberForum, ChatGPT, Claude и пр. Jin X 06.09.2026 Скрипты Tampermonkey для CyberForum, ChatGPT, Claude и пр. Работая с форумом и нейросетями в браузере часто хочется что-то подкорректировать или добавить какого-то функционала. Ниже прикреплён. . .	Программа опроса у.з. расходомера SLS-720F Argus19 02.09.2026 Программа опроса у. з. расходомера SLS-720F Программа опрашивает один раз в минуту три ультразвуковых расходомера SLS-720F через интерфейс RS-485 по протоколу Modbus RTU. Опрашиваются регистры. . .	Hyper-V: Компьютер должен поддерживать доверенный платформенный модуль 2.0. Maks 31.08.2026 При установке Windows 11 на виртуальную машину Hyper-V 2-го поколения вылезла такая ошибка: Решение: в параметрах виртуальной машины, в разделе "Безопасность" (Security) активировать флаг. . .	Архитектура биовида Стива в Майнкрафте: Зачем бонобо кубический каннибализм anaschu 30.08.2026 Кубический Вагинокапитализм в Minecraft: Математический инвариант ОДУ и рок Стивов-бонобо Главная задача разработанной «Модели Всего» — наглядно продемонстрировать наличие системной «судьбы». . .
Оттачиваю умение писать js программы. russiannick 30.08.2026 Проектом выходного дня стало написание Книги шифров Виженера. Итогом стала версия 200, синий туман. Синий туман назван так, потому что замораживает текст под собой. Нажатие синих кнопок управляют. . .	мат медиц модель 30. презентация проекта anaschu 27.08.2026 хоп хоп хоп хидахоп, а я кладую))	Как у меня протекала болезнь zorxor 27.08.2026 Здравствуйте, друзья! Эта запись блога предназначена именно для вас - для моих дорогих друзей, которые знали меня лично. Чтобы ответить на вопрос - а что же со мной произошло на самом деле? Я учился. . .	Нашел вот забавное видео о измерениях. Лучшее что я видел на эту тему kumehtar 26.08.2026 ILETXiw9bMQ Основная суть и тезисы по измерениям: 0D (Нулевое измерение): точка, не имеющая длины, ширины, высоты или объема. Объект не может перемещаться в 0D. 1D (Первое измерение):. . .

@Igor3D 1979 / 835 / 115 Регистрация: 01.10.2012 Сообщений: 5,175 Записей в блоге: 2
	05.06.2025, 20:55
	Хорошо, спрошу иначе. Вот самый простой пример Bullet "Hello world" - шарик падает на плоскость и не проходит сквозь нее, а отскакивает как положено. При этом никаких "коллидеров" не создается. А Вам зачем они нужны? 0

@Igor3D 1979 / 835 / 115 Регистрация: 01.10.2012 Сообщений: 5,175 Записей в блоге: 2
	06.06.2025, 10:11
	Вот колокол, первая попавшаяся модель. Как, с помощью движка, сделать анимацию "колокол звенит"? Миниатюры 0

@Igor3D 1979 / 835 / 115 Регистрация: 01.10.2012 Сообщений: 5,175 Записей в блоге: 2
	07.06.2025, 17:04
	Ну что, опять "сделал вид что не слышит"? Где-то читал что лучшие результаты ("творческий рост" и все такое) достигаются при решении задач с вероятностью успеха примерно 50%. Др словами задача должна быть достаточно трудна, но не безнадежна. Увы, при отсутствии всякой критики (да и просто общения) Вы скатываетесь в вероятность >95%, Вас пугают любые трудности Возвращаясь к колоколу. Ясно он должен анимироваться движком, как и язычок, значит однозначно "dynamic" rigidBody. Но какую шейпу дать движку? Вот и примените все что знаете о "коллайдерах" (если это слово так уж нужно). Но для начала нужно чтобы колокол висел (а не падал). Какие есть мысли? 0

@zalec 77 / 55 / 22 Регистрация: 03.03.2019 Сообщений: 179
	06.03.2026, 17:45
	Надо двигать кубик в зависимости от направления камеры. Если джостик вверх, или нажать W, то кубик движется вперед в плоскости камеры. 1