Простейшая 3D программа с использованием Three.js — различия между версиями

Материал из Department of Theoretical and Applied Mechanics
Перейти к: навигация, поиск
 
 
(не показано 10 промежуточных версий 2 участников)
Строка 1: Строка 1:
 
[[Виртуальная лаборатория]] > [[Простейшая 3D программа с использованием Three.js]] <HR>
 
[[Виртуальная лаборатория]] > [[Простейшая 3D программа с использованием Three.js]] <HR>
 +
Здесь расположена простейшая 3D программа, написанная с помощью библиотеки Three.js.
 +
 
[http://ru.wikipedia.org/wiki/Three.js Three.js] — это кроссбраузерная библиотека JavaScript, используемая для создания и отображения анимированной компьютерной 3D графики при разработке веб-приложений.
 
[http://ru.wikipedia.org/wiki/Three.js Three.js] — это кроссбраузерная библиотека JavaScript, используемая для создания и отображения анимированной компьютерной 3D графики при разработке веб-приложений.
  
−
{{#widget:Iframe |url=http://tm.spbstu.ru/htmlets/Tcvetkov/3D/Example_ThreeJS/ThreeJS_Example_v2-1.html |width=550 |height=620 |border=0 }}
+
 
 +
'''Чтобы работало управление, нужно щелкнуть окно программы.'''
 +
 
 +
{{#widget:Iframe |url=http://tm.spbstu.ru/htmlets/Tcvetkov/3D/Example_ThreeJS/ThreeJS_Example_v2-1.html |width=550 |height=600 |border=0 }}
 +
 
 +
 
 +
Скачать [[Медиа:ThreeJS_Example_v2-1.zip|ThreeJS_Example_v2-1.zip]]
 +
 
 +
<div class="mw-collapsible mw-collapsed" style="width:100%" >
 +
'''Текст программы на языке JavaScript (разработчик [[Цветков Денис]]):''' <div class="mw-collapsible-content">
 +
Файл '''"ThreeJS_Example_v2-1.js"'''
 +
<syntaxhighlight lang="javascript" line start="1" enclose="div">
 +
function Main_ThreeJS_example() {
 +
 
 +
    //-- Параметры --//
 +
    var width = 500;
 +
    var height = 500;
 +
 
 +
    // Переменные
 +
    var theta = 0, phi= 0;              // углы поворота
 +
    var zStart = 2;                    // чтобы можно было восстановить начальное состояние по кнопке [home]
 +
    var z = zStart;                    // расстояние до куба
 +
    var cube, camera, renderer, scene;
 +
 
 +
    // Работа с клавиатурой
 +
    var currentlyPressedKeys = {};
 +
    var keys = [33, 34, 36, 37, 38, 39, 40];
 +
    function handleKeys() {                                    // обработка нажатий клавиш
 +
        if (currentlyPressedKeys[33]) {z -= 0.02;}              // Page Up
 +
        if (currentlyPressedKeys[34]) {z += 0.02;}              // Page Down
 +
        if (currentlyPressedKeys[37]) {phi = -2;}              // Влево
 +
        if (currentlyPressedKeys[39]) {phi = 2;}                // Вправо
 +
        if (currentlyPressedKeys[38]) {theta = -2;}            // Вверх
 +
        if (currentlyPressedKeys[40]) {theta = 2;}              // Вниз
 +
    }
 +
    function handleKeyDown(event) {                            // клавиша нажата
 +
        currentlyPressedKeys[event.keyCode] = true;
 +
 
 +
        if (event.keyCode == "36") {                            // Home
 +
            camera.rotation.x = camera.rotation.y = camera.rotation.z = 0;
 +
            z = zStart;
 +
        }
 +
 
 +
        for (var k = 0; k < keys.length; k++)                  // чтобы не блокировать лишние клавиши
 +
            if (keys[k] == event.keyCode) return false;
 +
    }
 +
    function handleKeyUp(event) {                              // клавиша отпущена
 +
        currentlyPressedKeys[event.keyCode] = false;
 +
    }
 +
 
 +
 
 +
    var render = function () {
 +
        handleKeys();
 +
        requestAnimationFrame(render);
 +
        setCameraPos();
 +
        renderer.render(scene, camera);
 +
    };
 +
 
 +
    function setCameraPos() {                                  // функция поворота
 +
        camera.rotateOnAxis({x:1, y:0, z:0}, -theta * Math.PI / 180 );
 +
        camera.rotateOnAxis({x:0, y:1, z:0}, -phi * Math.PI / 180 );
 +
        phi = 0; theta = 0;
 +
 
 +
        camera.position.x = z * Math.sin(camera.rotation.y);
 +
        camera.position.y = z * Math.sin(-camera.rotation.x) * Math.cos(camera.rotation.y);
 +
        camera.position.z = z * Math.cos(-camera.rotation.x) * Math.cos(camera.rotation.y);
 +
    }
 +
 
 +
    function start3DCanvas() {
 +
        scene = new THREE.Scene();
 +
        camera = new THREE.PerspectiveCamera(60, width/height, 0.1, 1000);
 +
        scene.add(camera);
 +
 
 +
        renderer = new THREE.WebGLRenderer();
 +
        renderer.setSize(width, height);
 +
        renderer.setClearColor( 0xeeeeff, 1);
 +
 
 +
        var geometry = new THREE.BoxGeometry(1,1,1);            // геометрия фигуры, задаем куб
 +
        var material = new THREE.MeshLambertMaterial({          // материал куба, в данном случае - текстура
 +
            map: THREE.ImageUtils.loadTexture('teormeh.png')
 +
        });
 +
 
 +
        cube = new THREE.Mesh(geometry, material);
 +
        cube.updateMatrix();
 +
        cube.overdraw = true;
 +
        scene.add(cube);
 +
 
 +
        var ambientLight = new THREE.AmbientLight(0xffffff);    // освещение, без него куб будет черным
 +
        scene.add(ambientLight);
 +
 
 +
        document.onkeydown = handleKeyDown;
 +
        document.onkeyup = handleKeyUp;
 +
 
 +
        ThreeJS_div.appendChild(renderer.domElement);
 +
 
 +
        render();
 +
    }
 +
 
 +
    // Запуск программы
 +
    start3DCanvas();
 +
}
 +
</syntaxhighlight>
 +
Файл '''"ThreeJS_Example_v2-1.html"'''
 +
<syntaxhighlight lang="html5" line start="1" enclose="div">
 +
<html>
 +
<head>
 +
    <title>ThreeJS Example</title>
 +
    <script src="three.min.js"></script>
 +
    <script src="ThreeJS_Example_v2-1.js"></script>
 +
</head>
 +
<body onload="Main_ThreeJS_example();">
 +
<div id="ThreeJS_div"></div>
 +
<ul>
 +
    <li>Стрелочки - поворот куба
 +
    <li><code>[Home]</code> - вернуть куб в исходное положение
 +
    <li><code>[Page Up]</code>/<code>[Page Down]</code> - приближение/отдаление
 +
</ul>
 +
</body>
 +
</html>
 +
</syntaxhighlight>
 +
</div>
 +
</div>
  
  

Текущая версия на 09:43, 11 марта 2015

Виртуальная лаборатория > Простейшая 3D программа с использованием Three.js

Здесь расположена простейшая 3D программа, написанная с помощью библиотеки Three.js.

Three.js — это кроссбраузерная библиотека JavaScript, используемая для создания и отображения анимированной компьютерной 3D графики при разработке веб-приложений.


Чтобы работало управление, нужно щелкнуть окно программы.


Скачать ThreeJS_Example_v2-1.zip

Текст программы на языке JavaScript (разработчик Цветков Денис):

Файл "ThreeJS_Example_v2-1.js" 

 1 function Main_ThreeJS_example() {
 2 
 3     //-- Параметры --//
 4     var width = 500;
 5     var height = 500;
 6 
 7     // Переменные
 8     var theta = 0, phi= 0;              // углы поворота
 9     var zStart = 2;                     // чтобы можно было восстановить начальное состояние по кнопке [home]
10     var z = zStart;                     // расстояние до куба
11     var cube, camera, renderer, scene;
12 
13     // Работа с клавиатурой
14     var currentlyPressedKeys = {};
15     var keys = [33, 34, 36, 37, 38, 39, 40];
16     function handleKeys() {                                     // обработка нажатий клавиш
17         if (currentlyPressedKeys[33]) {z -= 0.02;}              // Page Up
18         if (currentlyPressedKeys[34]) {z += 0.02;}              // Page Down
19         if (currentlyPressedKeys[37]) {phi = -2;}               // Влево
20         if (currentlyPressedKeys[39]) {phi = 2;}                // Вправо
21         if (currentlyPressedKeys[38]) {theta = -2;}             // Вверх
22         if (currentlyPressedKeys[40]) {theta = 2;}              // Вниз
23     }
24     function handleKeyDown(event) {                             // клавиша нажата
25         currentlyPressedKeys[event.keyCode] = true;
26 
27         if (event.keyCode == "36") {                            // Home
28             camera.rotation.x = camera.rotation.y = camera.rotation.z = 0;
29             z = zStart;
30         }
31 
32         for (var k = 0; k < keys.length; k++)                   // чтобы не блокировать лишние клавиши
33             if (keys[k] == event.keyCode) return false;
34     }
35     function handleKeyUp(event) {                               // клавиша отпущена
36         currentlyPressedKeys[event.keyCode] = false;
37     }
38 
39 
40     var render = function () {
41         handleKeys();
42         requestAnimationFrame(render);
43         setCameraPos();
44         renderer.render(scene, camera);
45     };
46 
47     function setCameraPos() {                                   // функция поворота
48         camera.rotateOnAxis({x:1, y:0, z:0}, -theta * Math.PI / 180 );
49         camera.rotateOnAxis({x:0, y:1, z:0}, -phi * Math.PI / 180 );
50         phi = 0; theta = 0;
51 
52         camera.position.x = z * Math.sin(camera.rotation.y);
53         camera.position.y = z * Math.sin(-camera.rotation.x) * Math.cos(camera.rotation.y);
54         camera.position.z = z * Math.cos(-camera.rotation.x) * Math.cos(camera.rotation.y);
55     }
56 
57     function start3DCanvas() {
58         scene = new THREE.Scene();
59         camera = new THREE.PerspectiveCamera(60, width/height, 0.1, 1000);
60         scene.add(camera);
61 
62         renderer = new THREE.WebGLRenderer();
63         renderer.setSize(width, height);
64         renderer.setClearColor( 0xeeeeff, 1);
65 
66         var geometry = new THREE.BoxGeometry(1,1,1);            // геометрия фигуры, задаем куб
67         var material = new THREE.MeshLambertMaterial({          // материал куба, в данном случае - текстура
68             map: THREE.ImageUtils.loadTexture('teormeh.png')
69         });
70 
71         cube = new THREE.Mesh(geometry, material);
72         cube.updateMatrix();
73         cube.overdraw = true;
74         scene.add(cube);
75 
76         var ambientLight = new THREE.AmbientLight(0xffffff);    // освещение, без него куб будет черным
77         scene.add(ambientLight);
78 
79         document.onkeydown = handleKeyDown;
80         document.onkeyup = handleKeyUp;
81 
82         ThreeJS_div.appendChild(renderer.domElement);
83 
84         render();
85     }
86 
87     // Запуск программы
88     start3DCanvas();
89 }

Файл "ThreeJS_Example_v2-1.html" 

 1 <html>
 2 <head>
 3     <title>ThreeJS Example</title>
 4     <script src="three.min.js"></script>
 5     <script src="ThreeJS_Example_v2-1.js"></script>
 6 </head>
 7 <body onload="Main_ThreeJS_example();">
 8 <div id="ThreeJS_div"></div>
 9 <ul>
10     <li>Стрелочки - поворот куба
11     <li><code>[Home]</code> - вернуть куб в исходное положение
12     <li><code>[Page Up]</code>/<code>[Page Down]</code> - приближение/отдаление
13 </ul>
14 </body>
15 </html>
Источник — «http://tm.spbstu.ru/?title=Простейшая_3D_программа_с_использованием_Three.js&oldid=32585»