Плоскость в компьютерной графике можно представить как сетку бесконечно малой толщины. На сетку можно наложить текстуру, материал и раскрасить цветом. Для того, чтобы нарисовать и вывести сетку в Three.js нам необходимо сделать не так много действий — передать объект THREE.MeshBasicMaterial с параметрами в рендер, присвоив объекту свойства текстуры, материала или цвета. В данной статье просто разукрасим нашу плоскость, передав материал. Тему текстурирования затронем в последующих статьях. И так, код в script.js ничем не отличается от кода в предыдущих статьях, кроме как кода в разделе создания объекта
window.onload = init;
function init(){
//--------------Создаем в дереве DOM элемен для вывода на экран-------
container = document.createElement("div");
document.body.appendChild(container);
//--------------Общие переменные--------------
var scene, camera, render;
//--------------Инициализация общих переменных---------
scene = new THREE.Scene();//Сцена
camera = new THREE.PerspectiveCamera(65, window.innerWidth/window.innerHeight, 0.1, 2000);//Перспективаная проекция камеры. Принимает 3 параметра(масштаб, пропорция, точка 0 в близи, точка 0 в дали
camera.position.x = 150;//Позиция камеры по x
camera.position.z = 600;//Позиция камеры по y
render = new THREE.WebGLRenderer();//Рендеринг
render.setSize(window.innerWidth, window.innerHeight);//Инициализация рендерера
//--------------Создаем объект-------------------
var planeGeometry = new THREE.PlaneGeometry(window.innerWidth, window.innerHeight);//Производная фигура
planeGeometry.applyMatrix(new THREE.Matrix4().makeRotationX(-Math.PI/3));//Поворачиваем вокуруг оси X
var planeMaterial = new THREE.MeshBasicMaterial({color:0xe0e0e0});//Устанавливаем материал
var plane = new THREE.Mesh(planeGeometry, planeMaterial);//Создаем линию из созданной геометрии
//--------------Добавление вывод-----------------
scene.add(plane);//Добавляем объект на сцену
render.render(scene, camera);//Добавляем сцену и камеру в рендер
container.appendChild(render.domElement);//Добавляем рендер в DOM для вывода на экран
}
Ка видим все очень просто. Скрин работы данного примера
Весь код примера в архиве доступен здесь.
