Координаты в Three.js рендер

jkom-18rus · Регистрация: 26.02.2016

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

Всем привет

У меня стоит задача разместить в трёхмерной сцене:

1. Параллелепипед с именем floorBox размером (200, 200, 10) и материалом MeshPhongMaterial. Обратите внимание: по умолчанию все параллелепипеды размещаются с центром в точке (0, 0, 0). Разместите floorBox так, чтобы его верхняя грань (будущий «пол» сцены) совпала с плоскостью XZ.
2. Направленный источник света DirectionalLight.
3. Камеру. Нужно разместить камеру так, чтобы она находилась в плоскости YZ (x = 0, y и z - ненулевые), а точка взгляда находилась немного выше середины floorBox, например в точке (0, 10, 0).
4. Параллепипед с именем mainBox размером (15, 20, 15) с материалом MeshPhongMaterial. Разместите его так, чтобы его нижняя грань совпадала с плоскостью XZ.
5. Несколько параллелепипедов размером (15, 15, 15) с материалом MeshPhongMaterial. Разместите их в произвольных точках поверхности floorBox. Они не будут перемещаться.

Результат построения приведен на рисунке.

Вроде бы везде координаты идут, как (x, y, z). Но я если так рассуждаю, у меня ничего не выходит. Даже пол floorBox нормально увидеть не могу. Всё время вижу его не с той стороны. Да и в пункте 1 задания тоже видимо опечатка.
Судя по рисунку у меня должен получиться пол (ширина 200, высота 10, глубина 200). Если он строится от начала координат во все стороны, то по x и z будет иметь координаты (-100, 100), по y соответственно (-5, 5).
Ставлю камеру на (0, 20, 110). Подразумеваю, что она будет смотреть сверху. Пол будет дальше от неё на расстояние 10. Но выходит фигня, пол оказывается сверху. Приходится подбирать координаты рандомным образом. Это вообще не дело.

Что я не понимаю?

Простите, если ошибся с разделом форума.

JavaScript
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
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
    <title>Площадка</title>
  </head>
  <body>
<canvas id="c" width="800" height="800"
></canvas>
<!-- Для совместимости с браузерами, в которых не поддерживаются карты импортов (import map) -->
<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>  
<script  type="importmap">{
    "imports": {
        "three": "https://threejs.org/build/three.module.js"
    }
}</script>
 
  </body>
 
  <script type="module">
 
import * as THREE from 'three';
 
function main() {
    const canvas = document.querySelector('#c');
    const renderer = new THREE.WebGLRenderer({canvas});
 
    const fov = 75;
    const aspect = 1;
    const near = 0.1;
    const far = 200;
    const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
    camera.position.set(0, 20, 110);
    camera.up.set(0, 0, 1);
    camera.lookAt(0, 10, 0);
 
    const scene = new THREE.Scene();
    renderer.setClearColor(0xcccccc, 1); 
 
    const geometry = new THREE.BoxGeometry(200, 10, 200);
    const material = new THREE.MeshPhongMaterial({ color: "blue" });
    const floorBox = new THREE.Mesh(geometry, material);
    scene.add(floorBox);
    floorBox.position.y = 5;
    floorBox.position.z = 0;
 
    const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
    directionalLight.position.set(0, 20, 130).normalize();
    scene.add(directionalLight);
 
    renderer.render(scene, camera);
 
}
 
main();
 
  </script>
 
</html>

@NTHing · 08.10.2024, 18:38

https://plnkr.co/edit/?open=li... js&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
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0"
        />
        <title>Document</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    </head>
    <body></body>
    <script>
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(
            75,
            window.innerWidth / window.innerHeight,
            0.1,
            1000
        );
        const renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.setClearColor(0xcccccc, 1);
        document.body.appendChild(renderer.domElement);
        const gridHelper = new THREE.GridHelper(500, 30);
        scene.add(gridHelper);
        const cubes = [
            {
                x: 200,
                y: 10,
                z: 200,
                color: "blue",
                adjustYPosition: -1,
                adjustXPosition: 0,
                adjustZPosition: 0,
            },
            {
                x: 15,
                y: 20,
                z: 15,
                color: "green",
                adjustYPosition: 1,
                adjustXPosition: -50,
                adjustZPosition: 70,
            },
        ];
        cubes.forEach((el) => {
            const geometry = new THREE.BoxGeometry(el.x, el.y, el.z);
            const material = new THREE.MeshPhongMaterial({
                color: el.color,
            });
            const cube = new THREE.Mesh(geometry, material);
            cube.position.set(
                el.adjustXPosition,
                (el.y / 2) * el.adjustYPosition,
                el.adjustZPosition
            );
            scene.add(cube);
        });
        const light = new THREE.DirectionalLight(0xffffff, 1);
        light.position.set(5, 5, 50).normalize();
        light.castShadow = true;
        scene.add(light);
        const ambientLight = new THREE.AmbientLight(0x808080);
        ambientLight.position.set(150, 5, 50).normalize();
        scene.add(ambientLight);
        camera.position.set(0, 100, 300);
        camera.lookAt(0, 10, 0);
        renderer.render(scene, camera);
    </script>
</html>

jkom-18rus · 09.10.2024, 14:20 **[ТС]**

NTHing, подставил в свой код координаты куба, освещения и камеры, как в Вашем коде.
К сожалению ничего не получилось. Площадку я всё равно вижу снизу.

В java script не силён, поэтому не очень понимаю, как устроен цикл cubes.forEach((el).
Сначала создаётся куб с координатами из массива кубов.
Что происходит здесь?

JavaScript
1
2
3
4
cube.position.set(
                el.adjustXPosition,
                (el.y / 2) * el.adjustYPosition,
                el.adjustZPosition

И вопрос с координатами остаётся не решён. Вы ставите площадку на -1 по Y. Но у неё же высота 10, значит нужно размещать её на Y = -5 вроде бы.

Мой код:

JavaScript
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
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
    <title>Площадка</title>
  </head>
  <body>
<canvas id="c" width="800" height="800"
></canvas>
<!-- Для совместимости с браузерами, в которых не поддерживаются карты импортов (import map) -->
<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>  
<script  type="importmap">{
    "imports": {
        "three": "https://threejs.org/build/three.module.js"
    }
}</script>
 
  </body>
 
  <script type="module">
 
import * as THREE from 'three';
 
function main() {
    const canvas = document.querySelector('#c');
    const renderer = new THREE.WebGLRenderer({canvas});
 
    const fov = 75;
    const aspect = 1;
    const near = 0.1;
    const far = 1000;
    const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
    camera.position.set(0, 100, 300);
    camera.up.set(0, 0, 1);
    camera.lookAt(0, 10, 0);
 
    const scene = new THREE.Scene();
    renderer.setClearColor(0xcccccc, 1); 
 
    const geometry = new THREE.BoxGeometry(200, 10, 200);
    const material = new THREE.MeshPhongMaterial({ color: "blue" });
    const floorBox = new THREE.Mesh(geometry, material);
    scene.add(floorBox);
    floorBox.position.y = -1;
    floorBox.position.x = 0;
 
    const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
    directionalLight.position.set(150, 5, 50).normalize();
    scene.add(directionalLight);
 
    renderer.render(scene, camera);
 
}
 
main();
 
  </script>
 
</html>

jkom-18rus · 09.10.2024, 17:30 **[ТС]**

Разобрался. Спасибо.

Здесь неправильно настроен вектор верха. В моём коде камера направлена так (position и lookAt правильные, но up со значением (0, 0, 1) разворачивает камеру так, чтобы она смотрела сверху вниз, на горизонтальную плоскость. Нужно либо заменить в строке up (0, 0, 1) на (0, 1, 0), либо вообще убрать эту строку.

Отрисовку кубов через цикл взял на вооружение.

Новые блоги и статьи Все статьи Все блоги /
Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro
Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .

jkom-18rus 88 / 33 / 8 Регистрация: 26.02.2016 Сообщений: 326
	09.10.2024, 17:30 [ТС]
	Сообщение было отмечено DrType как решение Решение Разобрался. Спасибо. Здесь неправильно настроен вектор верха. В моём коде камера направлена так (position и lookAt правильные, но up со значением (0, 0, 1) разворачивает камеру так, чтобы она смотрела сверху вниз, на горизонтальную плоскость. Нужно либо заменить в строке up (0, 0, 1) на (0, 1, 0), либо вообще убрать эту строку. Отрисовку кубов через цикл взял на вооружение. 2

Координаты в Three.js рендер

Решение