Подскажите куда копать

@SkrAn · Регистрация: 17.01.2018

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

Добрый день. С JS практически не работал, нужно набросать фронт, надеюсь что натолкнете на пример.
Упрощу задачу:
Нужно нарисовать кучу сложных кубиков ( с данными внутри) связанных стрелками.
Не знаю как реализовать свободное перетаскивание этих кубиков ( с кешированием положения), и чтобы стрелки к ним привязанные перестраивались автоматически (не пересекая другие кубики).
Делать все руками ? (расчет координат, клик мыши, перестроение...) Или есть где-то готовые библиотеки? натолкните на пример.

@8Observer8 · 17.01.2018, 22:21

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

Делать все руками ? (расчет координат, клик мыши, перестроение...)

Либо делать на чистом WebGL

Небольшие примеры на WebGL

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

Или есть где-то готовые библиотеки? натолкните на пример.

Либо взять какую-нибудь библиотеку-обёртку над WebGL:

Пример кубика на Three.js

Песочница: https://plnkr.co/edit/BzDbfrep... ?p=preview

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
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>Three.js - Cube</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.MeshLambertMaterial({ color: 0x00ff00 });
        var cube = new THREE.Mesh(geometry, material);
        scene.add(cube);
 
        camera.position.z = 3;
        
        var directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
        directionalLight.position = new THREE.Vector3(1, 1, 1);
        scene.add(directionalLight);
        
        var light = new THREE.AmbientLight( 0x404040 ); // soft white light
        scene.add(light);
 
        var animate = function ()
        {
            requestAnimationFrame(animate);
 
            cube.rotation.x += 0.01;
            cube.rotation.y += 0.01;
 
            renderer.render(scene, camera);
        };
 
        animate();
    </script>
</body>
 
</html>

Добавлено через 16 минут
Пример кубика на Babylon.js

Песочница: https://plnkr.co/edit/D49RTr5U... ?p=preview

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
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>BabylonJS - 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);
            
            var cube;
 
            // 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, 0, 5), 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 "cube" shape; its constructor takes 5 params: name, width, height, depth, scene
                cube = BABYLON.MeshBuilder.CreateBox("box", {width: 1, height: 1, depth: 1}, scene);
 
                // return the created scene
                return scene;
            }
 
            // call the createScene function
            var scene = createScene();
 
            // run the render loop
            engine.runRenderLoop(function ()
            {
                cube.rotation.x += 0.01;
                cube.rotation.y += 0.01;
                scene.render();
            });
 
            // the canvas/window resize event handler
            window.addEventListener('resize', function ()            
            {
                engine.resize();
            });
        });
    </script>
</body>
 
</html>

Новые блоги и статьи Все статьи Все блоги /
Списки и кортежи в Python: различия, особенности, применение py-thonny 13.04.2025 Python славится своей гибкостью при работе с данными. В арсенале языка есть две основные последовательные структуры данных, которые программисты используют ежедневно — списки и кортежи. Эти структуры. . .	Middleware в ASP.NET Core UnmanagedCoder 13.04.2025 В ASP. NET Core термин "middleware" занимает особое место. Что же это такое? Middleware представляет собой программные компоненты, которые формируют конвейер обработки HTTP-запросов в приложении. . . .	Таблицы лута в Unity с MinMaxCurve и AnimationCurve GameUnited 12.04.2025 Создание сбалансированного лута в играх — задача не из простых. Разработчики постоянно ищут способы настройки систем выпадения предметов, которые будут одновременно справедливыми для игроков и. . .	std::expected в C++: Управление ошибками bytestream 12.04.2025 Обработка ошибок всегда была важной и одновременно сложной задачей в программировании на C++. На протяжении долгого времени разработчики использовали различные подходы: возвращаемые коды ошибок,. . .	Nullable типы и операторы объединения null в C# UnmanagedCoder 12.04.2025 Многие шутят, что null — это миллиардная ошибка в программировании. И в этой шутке только доля шутки. Тони Хоар, создатель null-ссылки, сам назвал её своей "ошибкой на миллиард долларов". Почему?. . .
Аутентификация и авторизация JWT в микросервисах с API Gateway stackOverflow 12.04.2025 В традиционных монолитных приложениях безопасность часто реализуется как единый защитный периметр - пользователь проходит аутентификацию один раз, после чего получает доступ ко всем функциям системы. . . .	TypeScript: Интерфейсы vs Типы run.dev 11.04.2025 Современная разработка на JavaScript сталкивается с множеством проблем при масштабировании проектов. Типизация кода стала хорошим инструментом, помогающим избежать ошибок во время выполнения,. . .	Управление топиками и разделами Kafka Javaican 11.04.2025 Apache Kafka — распределенная платформа потоковой передачи данных, которая стала стандартом для построения высоконагруженных систем обмена сообщениями. В современной архитектуре микросервисов,. . .	Миграция монолита в Event-Driven микросервисную архитектуру на C# stackOverflow 11.04.2025 Монолитная архитектура – классический подход к разработке программного обеспечения. Это приложение, построенное как единое целое, где все компоненты тесно связаны между собой. Большинство проектов. . .	Go в Kubernetes: Управление ресурсами golander 11.04.2025 Разработчики Go-приложений в Kubernetes часто сталкиваются с неожиданными проблемами производительности и даже внезапными отказами контейнеров. Причина этого кроется в особенностях взаимодействия. . .

@SkrAn 0 / 0 / 0 Регистрация: 17.01.2018 Сообщений: 1

	Подскажите куда копать 17.01.2018, 07:37. Показов 894. Ответов 1 Метки нет (Все метки) Добрый день. С JS практически не работал, нужно набросать фронт, надеюсь что натолкнете на пример. Упрощу задачу: Нужно нарисовать кучу сложных кубиков ( с данными внутри) связанных стрелками. Не знаю как реализовать свободное перетаскивание этих кубиков ( с кешированием положения), и чтобы стрелки к ним привязанные перестраивались автоматически (не пересекая другие кубики). Делать все руками ? (расчет координат, клик мыши, перестроение...) Или есть где-то готовые библиотеки? натолкните на пример. 0