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