3. WEB — графика с Three.js. Создание плоскости

Плоскость в компьютерной графике можно представить как сетку бесконечно малой толщины. На сетку можно наложить текстуру, материал и раскрасить цветом. Для того, чтобы нарисовать и вывести сетку в 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 для вывода на экран
}

Ка видим все очень просто. Скрин работы данного примера

Threejs-3-pane
Весь код примера в архиве доступен здесь.

Вам также может понравиться

Об авторе WebSofter

Web - технологии

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...