MyDoc-three.js/scene.html at main · S0S1S0CHKA/MyDoc-three.js · GitHub

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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <title>model</title>
  </head>
  <!-- стили -->
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .container {
      width: 100vw;
      height: 100vh;
    }
  </style>
  <body>
    <!-- контейнер для обьекта -->
    <div class="container"></div>

    <!-- библиотека threejs -->
    <script src="build/three.min.js"></script>

    <!-- основной код модели -->
    <script type="module">
      // импорт нужных библиотек
      import { OrbitControls } from "./examples/jsm/controls/OrbitControls.js"
      import { GLTFLoader } from "./examples/jsm/loaders/GLTFLoader.js"

      // переменная для управления сценой
      let scene
      // переменная для управления камерой
      let camera
      // переменная для рендаринга - процесс получения изображения
      let renderer

      // основная функция
      function init() {
        // переменная для работы с контейнером
        let container = document.querySelector(".container")

        /*
         *
         */
        // создали сцену и отправили её в переменную
        scene = new THREE.Scene()
        // цвет сцены
        scene.background = new THREE.Color("#bbb")
        // Добавляем помощь сетки на сцену
        //scene.add(new THREE.GridHelper(500, 40))
        //создаем пол / сетку
        const ground = new THREE.Mesh(
          new THREE.PlaneGeometry(800, 800),
          //https://threejs.org/docs/index.html?q=MeshPhongMaterial#api/en/materials/MeshPhongMaterial
          new THREE.MeshLambertMaterial({ color: "rgb(240,240,240)" })
        )
        //поворот
        ground.rotation.x = -Math.PI / 2
        //позволяем получать тени
        ground.receiveShadow = true
        scene.add(ground)

        /*
         *
         */
        // настройка камеры
        /*
        PerspectiveCamera - режим проецирования предназначен для имитации того, как видит человеческий глаз.

        PerspectiveCamera(fov, aspect, near, far)
          fov — усеченное вертикальное поле зрения камеры. Угол обзора
          aspect — усеченное соотношение сторон камеры. Соотношение сторон width / height
          near — усеченная камера рядом с плоскостью. Максимально близкое отображение обьекта
          far — усеченная камера в дали от плоскости. Дальность видимости
        */
        camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 5000)
        //позиции камеры
        //console.log(camera.position)
        camera.position.z = 100
        camera.position.y = 80
        camera.position.x = 160

        /*
         *
         */
        //создаем рендер
        //antialias - выполнять ли сглаживание? Значение по умолчанию — false
        renderer = new THREE.WebGLRenderer({})
        //установка размера холста
        /*
        setSize(width,height,updateStyle:логическое значение )
        Изменяет размер выходного холста на (ширину, высоту) с учетом соотношения пикселей устройства, а также устанавливает область просмотра в соответствии с этим размером. Установка для updateStyle значения false предотвращает любые изменения стиля выходного холста.
        */
        renderer.setSize(window.innerWidth, window.innerHeight)
        //включаем рендер теней
        renderer.shadowMap.enabled = true
        //стандартная строка для отрисовкиполученного рендера на нужном холсе
        container.appendChild(renderer.domElement)

        /*
         *
         */
        //управление орбитой - позволяем камере вращаться вокруг обьекта
        /*
        OrbitControls(object : Camera, domElement : HTMLDOMElement )
          object — обязательно камера
          domElement — элемент HTML, используемый для прослушивателей событий
        */
        const controls = new OrbitControls(camera, renderer.domElement)
        //При прекращении поворота элемента присутствует плавность. Установите true, чтобы включить.
        controls.enableDamping = true
        //смешение центра точки
        controls.target.set(0, 40, 0)
        //обновляем элемент управления. Должно быть вызван после любых ручных изменений в трансформации камеры если есть .autoRotate или .enableDamping
        controls.update()
        //минимальная дистанция приближения
        controls.minDistance = 100
        //максимальная дистанция приближения
        controls.maxDistance = 900

        /*
         *
         */

        //настройка освещения
        //настройка глобального света
        /*
        AmbientLight(color : Integer, intensity : Float )
          color - Цвет. По умолчанию 0xffffff
          intensity - Интенсивность. По умолчанию 1
        */
        const ambient = new THREE.AmbientLight(0xffffff, 0.25)
        //добавление на сцену
        scene.add(ambient)

        //настройка света, который испускается из одной точки во всех направлениях.
        //https://threejs.org/examples/#webgl_lights_spotlight
        //https://threejs.org/examples/#webgl_lights_hemisphere
        //DirectionalLight - Свет, который испускается в определенном направлении. Этот свет будет вести себя так, как если бы он был бесконечно далек и все лучи, исходящие от него, параллельны. Общее применение для этого является симулировать дневной свет; Солнце достаточно далеко от того, что его положение можно считать бесконечным, и все лучи света, исходящие из него параллельны.
        const dirLight = new THREE.DirectionalLight("rgb(255,234,229)", 1)
        //позиция
        dirLight.position.set(1000, 2000, 1000)
        scene.add(dirLight)
        //бросает тень
        dirLight.castShadow = true
        //Настройте свойства тени для света
        dirLight.shadow.mapSize.width = 2048
        dirLight.shadow.mapSize.height = 2048
        dirLight.shadow.camera.near = 0.5
        //дальность
        dirLight.shadow.camera.far = 5000
        //настройки взгляда света на мир
        const d = 500
        dirLight.shadow.camera.left = -d
        dirLight.shadow.camera.right = d
        dirLight.shadow.camera.top = d
        dirLight.shadow.camera.bottom = -d
        //отображение помощи света
        const dirLightHelper = new THREE.DirectionalLightHelper(dirLight, 10)
        scene.add(dirLightHelper)

        /*
         *
         */
        //настройка модели
        // https://threejs.org/docs/index.html#manual/en/introduction/Loading-3D-models
        // https://discoverthreejs.com/ - полезно почитать
        // https://discoverthreejs.com/book/first-steps/load-models/ - полезно почитать
        //используем GLTFLoader для загрузки glTF модели
        const loader = new GLTFLoader()
        //загрузка модели
        loader.load(
          //адрес модели URL
          "model/gltf/Flamingo.glb",
          // функция gltf необхадима при загрузке ресурса
          gltf => {
            //переменная для управления обьектом
            const model1 = gltf.scene.children[0]
            //редактируем позицию
            model1.position.x = 0
            model1.position.y = 100
            //тень
            model1.castShadow = true
            model1.receiveShadow = true
            //добавляем на сцену gltf
            scene.add(model1)
            //выводим все свойства обьекта
            console.dir(gltf)
          },
          undefined,
          //если ошибка выводим информацию
          function (error) {
            console.log("Error: " + error)
          }
        )

        /*
         *
         */
        //изменение размера модели при изменении размера окна
        /*
        addEventListener(type, listener[, options]);
          type - тип обрабатываемого события (resize - срабатывает при изменении размера окна)
          listener - Объект, который принимает уведомление, когда событие указанного типа произошло
        */
        window.addEventListener("resize", onWindowResize)
        //функция которая отрабатывает при изменении размера окна
        function onWindowResize() {
          //вычисляем значения для камеры
          camera.aspect = window.innerWidth / window.innerHeight
          camera.updateProjectionMatrix()
          //рендерим новый размер
          renderer.setSize(window.innerWidth, window.innerHeight)
        }

        /*
         *
         */
        //функция анимации
        function animate() {
          //вызываем указанную функцию для обновления анимации
          requestAnimationFrame(animate)
          //обновляем элемент управления. Должно быть вызван после любых ручных изменений в трансформации камеры если есть .autoRotate или .enableDamping
          controls.update()
          //рендарим сцену или другой тип объекта, используя камеру
          renderer.render(scene, camera)
        }
        //запускаем анимацию
        animate()
      }
      //запускаем модель
      init()
    </script>
  </body>
</html>