three.js
Текстуры и материалы

aframe Angular 2 CSS HTML html5-canvas JavaScript jQuery Node.js SVG TypeScript

Вступление

Хорошее введение в материал и текстуры.

Diffuse, Bump, Specular и Transparent Textures.

параметры

параметр	подробности
цвет	Числовое значение компонента RGB цвета.
интенсивность	Числовое значение силы света / интенсивности.
FOV	Вертикальное поле зрения камеры.
аспект	Соотношение сторон камеры.
возле	Усечка камеры рядом с самолетом.
далеко	Камера усеченного дальнего плана.
радиус	радиус сферы. Значение по умолчанию - 50.
widthSegments	количество горизонтальных сегментов. Минимальное значение равно 3, а по умолчанию - 8.
heightSegments	количество вертикальных сегментов. Минимальное значение равно 2, а по умолчанию - 6.
phiStart	укажите горизонтальный пусковой угол. Значение по умолчанию - 0.
phiLength	укажите размер горизонтального развертки. По умолчанию используется Math.PI * 2.
thetaStart	укажите вертикальный угол пуска. Значение по умолчанию - 0.
thetaLength	укажите размер вертикального развертки. По умолчанию используется Math.PI.

замечания

Демо-ссылка

Создание модели Земли

Текстуры для этого примера можно найти по адресу: http://planetpixelemporium.com/planets.html

Установка или настройка

Вы можете установить три через npm

npm install three

Или добавьте его как скрипт на свою HTML-страницу

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r85/three.min.js" />

HTML:

<html>
<head>
    <meta charset=utf-8>
    <title>Earth Model</title>
    <style>
        body { margin: 0; }
        canvas { width: 100%; height: 100% }
    </style>
</head>
<body>
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r83/three.js" />
    <script>
        // Our Javascript will go here.
    </script>
</body>
</html>

Создание сцены

Чтобы действительно иметь возможность отображать что-либо с тэгом. Js, нам нужны три вещи: сцена, камера и рендеринг. Мы сделаем сцену с камерой.

var scene = new THREE.Scene();
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 );

Создание сферы

Создание геометрии для сферы
Создать фондовый материал
Создание 3D-объекта
Добавьте его на место происшествия

var geometry = new THREE.SphereGeometry(1, 32, 32);
var material = new THREE.MeshPhongMaterial();
var earthmesh = new THREE.Mesh(geometry, material);

Добавить рассеянную текстуру

Диффузная текстура задает основной цвет поверхности. Когда мы применяем его к сфере, мы получаем следующее изображение.

material.map    = THREE.ImageUtils.loadTexture('images/earthmap1k.jpg');

Добавление текстуры Bump Map

Каждый из его пикселей действует как высота на поверхности.
Горы кажутся более ясными благодаря их тени.
Можно изменить, насколько карта влияет на освещение с помощью параметра bumpScale.
Никакие дополнительные вершины не созданы или не нужны для использования карты рельефа (в отличие от карты смещения)

material.bumpMap   = THREE.ImageUtils.loadTexture('images/earthbump1k.jpg');     
material.bumpScale = 0.05;

Добавление зеркальной текстуры

Изменяет «блеск» объекта с текстурой.
Каждый пиксель определяет интенсивность зеркальности.
В этом случае только море является зеркальным, потому что вода отражает свет больше, чем земля.
Вы можете управлять зеркальным цветом с помощью зеркального параметра.

material.specularMap = THREE.ImageUtils.loadTexture('images/earthspec1k.jpg')
material.specular  = new THREE.Color('grey')

Добавление облачного слоя

Мы создаем canvasCloud с холстом и используем его как текстуру.
Мы делаем это, потому что jpg не обрабатывает альфа-канал. (Тем не менее, изображение PNG)
Нам нужно сделать код для создания текстуры на основе следующих изображений.

var geometry   = new THREE.SphereGeometry(0.51, 32, 32)
var material  = new THREE.MeshPhongMaterial({
  map         : new THREE.Texture(canvasCloud),
  side        : THREE.DoubleSide,
  opacity     : 0.8,
  transparent : true,
  depthWrite  : false,
});
var cloudMesh = new THREE.Mesh(geometry, material)
earthMesh.add(cloudMesh)

Мы прикрепляем cloudMesh к earthMesh чтобы они перемещались вместе.
Мы отключили depthWrite и установили transparent: true чтобы сказать three.js, что облачная среда прозрачна.
Мы устанавливаем стороны на THREE.DoubleSide чтобы обе стороны были видны.
- Это позволяет избежать создания артефактов на краю земли.
Наконец, мы устанавливаем opacity: 0.8 чтобы сделать облака более прозрачными

Добавление вращательного движения

В вашем цикле рендеринга вы просто увеличиваете вращение

В качестве последнего штриха мы будем анимировать облачный слой, чтобы сделать его более реалистичным.

updateFcts.push(function(delta, now) {
    cloudMesh.rotation.y += 1 / 8 * delta;
    earthMesh.rotation.y += 1 / 16 * delta;
  })

Modified text is an extract of the original Stack Overflow Documentation

Лицензировано согласно CC BY-SA 3.0

Не связан с Stack Overflow