Создание 3D объектов

@Бейсик рулит · Регистрация: 17.03.2016

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

Какую литературу почитать, туториалы посмотреть, чтобы с нуля разобраться в 3d на javascript?

@8Observer8 · 19.04.2018, 16:46

Вместо цвета интереснее наложить на 3D объект: картинки, фотографии или нарисовать что-нибудь. Общее слово для этих изображений - текстуры. Можно брать бесплатные текстуры на сайте: https://www.textures.com/. У них каждая текстура разного качества. Высокое качество - платное, а низкое бесплатное. Для веб-приложений как раз нужно обычно низкое качество, чтобы быстро загружалось с нескоростным интернетом.

Код создания кубика и загрузки текстур на JavaScript с использованием библиотеки Three.js. Здесь загружаются: обычная текстура и её Normal Map:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
        var cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
        var cubeTexture = new THREE.TextureLoader().load("./textures/blick.jpg");
        var cubeNormal = new THREE.TextureLoader().load("./textures/blick_normal.jpg");
        cubeNormal.flipY = false;
        var cubeMaterial = new THREE.MeshStandardMaterial({
            map: cubeTexture,
            normalMap: cubeNormal
        });
        cubeMaterial.metalness = 0;
        var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
        scene.add(cube);

>>> Демка в песочнице <<<

Название: textured-cube.png
Просмотров: 16

Размер: 239.4 Кб

Код из песочницы:

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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
 
    <title>Three.js. Textured Cube with Normal Map</title>
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/89/three.min.js"></script>
    <script src="https://dl.dropboxusercontent.com/s/eiw16qns7365m0w/OrbitControls.js"></script>
 
    <style>
        html,
        body {
            overflow: hidden;
            margin: 0;
        }
 
        canvas {
            width: 100%;
            height: 100%
        }
    </style>
</head>
 
<body>
    <script>
        var scene = new THREE.Scene();
        scene.background = new THREE.Color(0x59c8d4);
        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 dirlight = new THREE.DirectionalLight(0xffffff, 0.8);
        dirlight.position.set(3, 4, 2);
        scene.add(dirlight);
 
        var light = new THREE.HemisphereLight(0xffffbb, 0xffffbb, 0.5);
        scene.add(light);
 
        var cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
        var cubeTexture = new THREE.TextureLoader().load("https://dl.dropboxusercontent.com/s/h7zwfpw4v4fjwag/154.jpg");
        var cubeNormal = new THREE.TextureLoader().load("https://dl.dropboxusercontent.com/s/t4xbe49r1hnymdg/154_norm.jpg");
        cubeNormal.flipY = false;
        var cubeMaterial = new THREE.MeshStandardMaterial({
            map: cubeTexture,
            normalMap: cubeNormal
        });
        cubeMaterial.metalness = 0;
        var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
        scene.add(cube);
 
        var controls = new THREE.OrbitControls(camera);
 
        controls.target = new THREE.Vector3(0, 1, 0);
        camera.rotation.x = THREE.Math.degToRad(20);
        camera.position.set(2, 3, 2);
 
        cube.scale.set(2, 2, 2);
        cube.position.y = 1;
 
        var groundGeometry = new THREE.PlaneGeometry(20, 20, 20);
        var groundTexture = new THREE.TextureLoader().load("https://dl.dropboxusercontent.com/s/0kkf4twqn6s8jky/177.jpg");
        groundTexture.wrapS = THREE.RepeatWrapping;
        groundTexture.wrapT = THREE.RepeatWrapping;
        groundTexture.repeat.set(5, 5);
        var groundNormal = new THREE.TextureLoader().load("https://dl.dropboxusercontent.com/s/n17irj9128jiyy5/177_norm.jpg");
        groundNormal.wrapS = THREE.RepeatWrapping;
        groundNormal.wrapT = THREE.RepeatWrapping;
        groundNormal.repeat.set(5, 5);
        groundNormal.bumpScale = 0.3;
        groundNormal.flipY = true;
        var groundMaterial = new THREE.MeshStandardMaterial({
            map: groundTexture,
            normalMap: groundNormal
        });
        groundMaterial.metalness = 0;
        var ground = new THREE.Mesh(groundGeometry, groundMaterial);
        ground.rotation.x = THREE.Math.degToRad(-90);
        scene.add(ground);
 
        window.addEventListener('resize', onWindowResize, false);
        animate();
 
        function animate() {
            requestAnimationFrame(animate);
 
            controls.update();
 
            renderer.render(scene, camera);
        };
 
        function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
 
            renderer.setSize(window.innerWidth, window.innerHeight);
        }
    </script>
</body>
 
</html>

Новые блоги и статьи Все статьи Все блоги /
Особенности gif сгенерированных в Си russiannick 21.10.2026 Рассмотрим генерацию gif файлов, которые в Си имеют свои особенности. Gif представляет собой графический формат популярный в интернете. Посмотрим на палитру. Gif файл сгенерированный в си отличается. . .	FPS контроллер с анимированными Y-Bot и 3D-звуком miniaudio (Box3D, Recast, BehaviorTree.CPP, ozz-animation, ImGui, OpenGL и SDL3) 8Observer8 18.10.2026 Содержание блога \| English Version Полное мультиплатформенное руководство по стартовому проекту с FPS-контроллером игрока, анимированными роботами Y-Bot с 4-слойным блендингом, 3D-физикой Box3D,. . .	Локальный http сервер Argus19 17.10.2026 Локальный http сервер На работе, на двух локальных компьютерах круглосуточно работают программы опроса приборов с записью в книги Excel,которые раз в сутки записываются на сервер компании. Т. к. . . .	Копировать Windows на новый диск на UEFI damix 17.10.2026 https:/ / uriesk. wordpress. com/ 2016/ 11/ 01/ move-window-10-to-ssd-on-a-uefi-dualboot-system-with-basic-linux-tools/ TL DR Вставляем диск, а старый подключаем через переходник, грузимся с лайва. . .
ИИ не может найти нужный язык в списке Supersumestria 05.10.2026 Я ему даю вот такое изображение и прошу найти и подчеркнуть немецкий язык. Возвращает он вот это: https:/ / i. **********/ vqBWLe2. png Нужную строчку в 3й колонке просто выдумал. . Это. . .	Новая последняя моя музыка в SUNO zorxor 05.10.2026 Здравствуйте, дорогие мои друзья! С большой радостью я хотел бы представить вам свою новую последнею музыку, которую сгенерировала мне по моей просьбе нейросеть SUNO. С уважением, zorxor. Это. . .	Программный домашний кинотеатр russiannick 27.09.2026 Сподобился на программный домашний кинотеатр. В качестве ЯВУ по традиции выбрал js. В помощники взял Яндекс-Алису. Было создано три зала на разные интересы. исторические и ретро сериал Хичкок. . .	Беседа с ИИ о программистах, недопускающих к созданию и правке кода генеративные ИИ и причины этого zorxor 21.09.2026 Раньше я радовался или получал некоторые эмоции, пусть небольшие, но всё же, от самого процесса написания кода, рекомпиляции и запуска, видя постепенное развитие программы и прочее. А теперь лень. . .

@Бейсик рулит 8 / 2 / 0 Регистрация: 17.03.2016 Сообщений: 118

	Создание 3D объектов 10.04.2018, 10:23. Показов 12365. Ответов 20 Метки нет (Все метки) Какую литературу почитать, туториалы посмотреть, чтобы с нуля разобраться в 3d на javascript? 0