Подскажите куда копать - JavaScript - Ответ 12039866

@8Observer8 · 17.01.2018, 22:21

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

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

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

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

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

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

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

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

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

PHP/HTML

<!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

<!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>

Вернуться к обсуждению:
Подскажите куда копать JavaScript

Другие темы раздела
JavaScript Авторизация на странице добавить логин Помогите с кодом. на странице авторизация была через форму js только по паролю,нужно добавить форму логина: в чем ошибка? <script> function Accept() { var login = document.getElementById('login').value; var pass = document.getElementById('pass').value; win = document.getElementById('pass-window'); win = document.getElementById('login-window'); mask =... https://www.cyberforum.ru/ javascript-beginners/ thread2175344.html	Почему внешний JS не работает? JavaScript Не работает внешний JS подключенный в <head>(в <body> тоже не работает) Но работает когда пишешь скрипт внутри <body>, используя <script> Как решить проблему? <!DOCTYPE html> <html> <head> <script src="1.js" type="text/javascript"></script> <meta charset="utf-8"> <title>Hello</title> </head> <body>
JavaScript Автоматизация действий на сайте https://www.cyberforum.ru/ javascript-beginners/ thread2174939.html Пишу приложение для автоматизаций действий на сайте. Пишу на C# использую браузер хромиум, точнее его обёртку CefCharp. До этого все действия делал через IMacros. Суть работы проста. тупо нажимаю кнопочки не сам, а через программу: // нажать на кнопку создать новый сертефикат window.document.querySelectorAll(".frmDTSubNum").click(); iimPlayCode("WAIT SECONDS="+time_Index); //нажать на...	JavaScript Отрисовать функцией елочку https://www.cyberforum.ru/ javascript-beginners/ thread2174905.html Здравствуйте. Есть такая задачка. Ни как не получается решить. Написать функцию, которая отрисовывает строку равнобедренного треугольника. Есть параметры : cntTabs - Кол-во отступов. cntSymbols - Кол-во символов Tab- Символ для отступа Symbol - Символ для отрисовки треугольника. В кратце он должен быть примерно таким:
Перенос строки при определённом количестве знаков JavaScript перенос строки при определённом количестве знаков	JavaScript Замена div'a на другой https://www.cyberforum.ru/ javascript-beginners/ thread2174347.html Какие есть варианты замена дива на другой который на другом сайте или заранее заготовленный где нибудь в скрипте?
JavaScript Userscript. Как исправить бесконечный цикл? https://www.cyberforum.ru/ javascript-beginners/ thread2174237.html Всем добра. Есть юзерскрипт (некоторые переменные и шелуху, не очень информативную, я выбросил): (function (window, undefined) { // нормализуем window var w; if (typeof unsafeWindow != undefined) { w = unsafeWindow; } else {	Нежелательный undefined, как результат JS кода JavaScript Не могу разобраться в этом коде - var arIndx = 1072; var alph = ''; /* for(var i; i < 31; i++) alph += String.fromCharCode(arIndx + i); print(alph); */ function buildString(n, callback){
JavaScript Подгрузка картинок вместе с модальным окном https://www.cyberforum.ru/ javascript-beginners/ thread2174149.html В общем, есть сайт, в нем есть кнопочки для открытия модальных окон, в которых расположены картинки. Как сделать загрузку картинок вместе с модальным окном, а не со всеми файлами сайта? Чтобы увеличить скорость загрузки этой страницы	JavaScript гостевая книга всем привет! Надо сделать простенькую гостевую книгу:пользователь заполняет поля, кликает по отправить и все данные в виде массива передаются на почту и выводятся в конце страницы. Код следующий: <!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,... https://www.cyberforum.ru/ javascript-beginners/ thread2174136.html
JavaScript Шаблоны тестов типа поставить в правильном порядке, ввести нужное слово, совместить и тд Добрый день, если ли у вас шаблоны тестов типа поставить в правильном порядке, вести нужное слово, совместить варианты и тд.	JavaScript Бесконечное обновление функции https://www.cyberforum.ru/ javascript-beginners/ thread2173901.html Привет, такой вопрос. Есть функция, обновляется каждые 20 милесекунд, и как сделать так, чтобы только при одном круге была присвоена переменная xxx = yyy? Возможно ли это?

	17.01.2018, 22:21