Простейшая 3D программа с использованием Three.js — различия между версиями
Материал из Department of Theoretical and Applied Mechanics
Wikiadmin (обсуждение | вклад) м (Замена текста — «</source>» на «</syntaxhighligh>») |
Денис (обсуждение | вклад) |
||
| (не показаны 2 промежуточные версии 1 участника) | |||
| Строка 12: | Строка 12: | ||
Скачать [[Медиа:ThreeJS_Example_v2-1.zip|ThreeJS_Example_v2-1.zip]] | Скачать [[Медиа:ThreeJS_Example_v2-1.zip|ThreeJS_Example_v2-1.zip]] | ||
| − | Текст программы на языке JavaScript (разработчик [[Цветков Денис]]): < | + | <div class="mw-collapsible mw-collapsed" style="width:100%" > |
| + | '''Текст программы на языке JavaScript (разработчик [[Цветков Денис]]):''' <div class="mw-collapsible-content"> | ||
Файл '''"ThreeJS_Example_v2-1.js"''' | Файл '''"ThreeJS_Example_v2-1.js"''' | ||
<syntaxhighlight lang="javascript" line start="1" enclose="div"> | <syntaxhighlight lang="javascript" line start="1" enclose="div"> | ||
| Строка 104: | Строка 105: | ||
start3DCanvas(); | start3DCanvas(); | ||
} | } | ||
| − | </ | + | </syntaxhighlight> |
Файл '''"ThreeJS_Example_v2-1.html"''' | Файл '''"ThreeJS_Example_v2-1.html"''' | ||
| − | <syntaxhighlight lang=" | + | <syntaxhighlight lang="html5" line start="1" enclose="div"> |
<html> | <html> | ||
<head> | <head> | ||
| Строка 122: | Строка 123: | ||
</body> | </body> | ||
</html> | </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>
