From 980fe00a74a9ad013b945755415ace2e5429c3c2 Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Wed, 27 Oct 2021 02:31:24 +0300 Subject: [RU] Remove notranslate (#2874) --- .../index.html | 36 +++++++++++----------- 1 file changed, 18 insertions(+), 18 deletions(-) (limited to 'files/ru/games/techniques') diff --git a/files/ru/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.html b/files/ru/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.html index 8c89ecc871..da8c8b434c 100644 --- a/files/ru/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.html +++ b/files/ru/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.html @@ -31,7 +31,7 @@ translation_of: Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Thr

Здесь находится HTML структура, которую мы будем использовать:

-
<!DOCTYPE html>
+
<!DOCTYPE html>
 <html>
 <head>
 	<meta charset="utf-8">
@@ -60,7 +60,7 @@ translation_of: Games/Techniques/3D_on_the_web/Building_up_a_basic_demo_with_Thr
 
 
Renderer это инструмент для отрисовки сцены в браузере. Есть 2 вида таких инструментов: WebGL по умолчанию, другие - Canvas, SVG, CSS, и DOM. Они различаются по тому как все рендерится. Несмотря на различия в них, для пользователя все будет выглядеть одинаково. Поэтому, вы можете выбрать запасной вариант на случай, если браузер пользователя не поддерживает выбранную вами технологию.

 
-
var renderer = new THREE.WebGLRenderer({antialias:true});
+
var renderer = new THREE.WebGLRenderer({antialias:true});
 renderer.setSize(WIDTH, HEIGHT);
 renderer.setClearColor(0xDDDDDD, 1);
 document.body.appendChild(renderer.domElement);
@@ -74,7 +74,7 @@ document.body.appendChild(renderer.domElement);
 
 
Сцена (scene) это место, где все происходит. Когда создаются новые объекты, они добавляются в сцену, чтобы их можно было увидеть. В three.js роль сцены выполняет объект Scene. Давайте создадим его, добавив следующих код:

 
-
var scene = new THREE.Scene();
+
var scene = new THREE.Scene();
 

 
 
Позже, мы будем использовать метод .add() для добавления объектов в сцену.

@@ -83,7 +83,7 @@ document.body.appendChild(renderer.domElement);
 
 
У нас есть сцена, теперь необходимо создать камеру. С помощью следующих строк мы добавим камеру, установим её позицию в координатной системе и направим её на нужную нам точку, где расположено то, что мы хотим видеть:

 
-
var camera = new THREE.PerspectiveCamera(70, WIDTH/HEIGHT);
+
var camera = new THREE.PerspectiveCamera(70, WIDTH/HEIGHT);
 camera.position.z = 50;
 scene.add(camera);
 

@@ -108,7 +108,7 @@ scene.add(camera);
 
 
Всё уже готово, но мы пока что ничего не видим. Хотя мы настроили рендерер, нам всё равно нужно запустить рендеринг. Функция render() выполнит эту работу с небольшой помощью requestAnimationFrame(), которая заставляет сцену постоянно перерисовываться в каждом кадре:

 
-
function render() {
+
function render() {
 	requestAnimationFrame(render);
 	renderer.render(scene, camera);
 }
@@ -123,7 +123,7 @@ render();
 
 
Now our scene is properly rendering, we can start adding 3D shapes. To speed up development, Three.js provides a bunch of predefined primitives, which you can use to create shapes instantly in a single line of code. There's cubes, spheres, cylinders, and more complicated shapes available. Detail like drawing required vertices and faces, for a given shape, is handled by the Three framework, so we can focus on higher level coding. Let's start, by defining the geometry for a cube shape, adding the following just above the render() function:

 
-
var boxGeometry = new THREE.BoxGeometry(10, 10, 10);
+
var boxGeometry = new THREE.BoxGeometry(10, 10, 10);
 

 
 
In this case, we define a simple cube that is 10 x 10 x 10 units. The geometry itself is not enough though, we also need a material that will be used for our shape.

@@ -132,7 +132,7 @@ render();
 
 
A material is what covers an object, the colors, or textures on its surface. In our case, we will choose a simple blue color to paint our box. There are a number of predefined materials which can be used: Basic, Phong, Lambert. Let's play with the last two later, but for now, the Basic one should be enough:

 
-
var basicMaterial = new THREE.MeshBasicMaterial({color: 0x0095DD});
+
var basicMaterial = new THREE.MeshBasicMaterial({color: 0x0095DD});
 

 
 
Add this line below the previously added.

@@ -143,7 +143,7 @@ render();
 
 
To apply the material to a geometry, a mesh is used. This takes on a shape, and adds the specified material to every face:

 
-
var cube = new THREE.Mesh(boxGeometry, basicMaterial);
+
var cube = new THREE.Mesh(boxGeometry, basicMaterial);
 

 
 
Again, add this line below the one you previously added.

@@ -152,12 +152,12 @@ render();
 
 
Сейчас мы создали куб, используя 'geometry' и 'material'. Последнее, что мы должны сделать - добавить куб на сцену. Добавьте в код эту строку:

 
-
scene.add(cube);
+
scene.add(cube);
 

 
 
Если вы сохраните код и обновите вкладку браузера, вы увидите квадрат, а не куб, потому, что он стоит ровно напротив камеры и мы видим только одну сторону. У объектов есть полезное свойство - мы можем изменять их как хотим. Например, вы можете вращать его и масштабировать, сколько угодно. Что давайте немного повернём его, чтобы видеть больше сторон.  Добавить в конец кода эту строку:

 
-
cube.rotation.set(0.4, 0.2, 0);
+
cube.rotation.set(0.4, 0.2, 0);
 

 
 
Поздравляю, вы создали объект в 3D-среде! This might have proven easier than you first thought? Here's how it should look:

@@ -174,12 +174,12 @@ render();
 
 
Now we will add more shapes to the scene, and explore other shapes, materials, lighting, and more. Let's move the cube to the left, to make space for some friends. Adding the following line just below the previous one:

 
-
cube.position.x = -25;
+
cube.position.x = -25;
 

 
 
Now onto more shapes and materials. What might you input to add a torus, wrapped in the Phong material? Try adding the following lines, just below the lines defining the cube.

 
-
var torusGeometry = new THREE.TorusGeometry(7, 1, 6, 12);
+
var torusGeometry = new THREE.TorusGeometry(7, 1, 6, 12);
 var phongMaterial = new THREE.MeshPhongMaterial({color: 0xFF9500});
 var torus = new THREE.Mesh(torusGeometry, phongMaterial);
 scene.add(torus);
@@ -189,7 +189,7 @@ scene.add(torus);
 
 
We can choose more fun predefined shapes. Let's play some more. Add the following lines, below those defining the torus:

 
-
var dodecahedronGeometry = new THREE.DodecahedronGeometry(7);
+
var dodecahedronGeometry = new THREE.DodecahedronGeometry(7);
 var lambertMaterial = new THREE.MeshLambertMaterial({color: 0xEAEFF2});
 var dodecahedron = new THREE.Mesh(dodecahedronGeometry, lambertMaterial);
 dodecahedron.position.x = 25;
@@ -204,7 +204,7 @@ scene.add(dodecahedron);
 
 
There are various types of light sources available in Three.js. The most basic is PointLight, which works like a flashlight, shining a spotlight in a defined direction. Add the following lines, below your shape definitions:

 
-
var light = new THREE.PointLight(0xFFFFFF);
+
var light = new THREE.PointLight(0xFFFFFF);
 light.position.set(-10, 15, 50);
 scene.add(light);
 

@@ -223,7 +223,7 @@ scene.add(light);
 
 
Вращать фигуры просто. Вы просто добавляете или отнимаете значение по оси вращения. Добавьте эту строку кода сразу после: requestAnimationFrame() invocation inside the render function:

 
-
cube.rotation.y += 0.01;
+
cube.rotation.y += 0.01;
 

 
 
This rotates the cube on every frame, by a tiny bit, so the animation looks smooth.

@@ -232,12 +232,12 @@ scene.add(light);
 
 
We can also scale an object. Applying a constant value, we would make it grow, or shrink just once. Let's make things more interesting. First, we implement a helper variable, called t, for counting elapsed time. Add it right before the render() function:

 
-
var t = 0;
+
var t = 0;
 

 
 
Now let's increase the value by a given constant value, on each frame of the animation. Add the following lines, just below the requestAnimationFrame() invocation:

 
-
t += 0.01;
+
t += 0.01;
 torus.scale.y = Math.abs(Math.sin(t));
 

 
@@ -249,7 +249,7 @@ torus.scale.y = Math.abs(Math.sin(t));
 
 
Aside from rotation, and scaling, we can additionally move objects around the scene. Add the following, again just below our requestAnimationFrame() invocation:

 
-
dodecahedron.position.y = -7*Math.sin(t*2);
+
dodecahedron.position.y = -7*Math.sin(t*2);
 

 
 
This will move the dodecahedron up and down, by applying the sin() value to the y axis on each frame, and a little adjustment to make it look cooler. Try changing these values, to see how it affects the animations.

-- 
cgit v1.2.3-54-g00ecf