Основной двумерный цветной треугольник с использованием three.js

У меня возникают проблемы с созданием простой 2D-сцены с помощью Three.js. Я хотел бы создать 2D-вид на цветном треугольнике. Я не могу сделать треугольник цветным (например, красным). Я считаю, что для этого мне понадобится следующее:

  • THREE.OrthographicCamera
  • Простой треугольник -> т.е. THREE.Geometry () окрашен в красный цвет

Я не хочу никаких теней, просто простой красный треугольник в орфографической сцене. Все предложения о том, как сделать это, приветствуются.

  • Проблемы с производительностью WebGL с сетчаткой Macbook Pro
  • Сетка внезапно исчезает в три раза. Отсечение?
  • Заполните сцену three.js сеткой
  • WebGl добавляет несколько объектов в один холст
  • Веб-библиотека крупномасштабного графика рисования
  • Как очистить и выгрузить контекст холста WebGL из графического процессора после использования?
  • Webgl, координаты текстуры и obj
  • Управление персоналом Three.js
  • One Solution collect form web for “Основной двумерный цветной треугольник с использованием three.js”

    Если вы собираетесь использовать базовый класс Geometry, вам нужно добавить все свои вершины в сцену. Вы можете сделать это с помощью класса Vertex

    var geometry = new THREE.Geometry(); var v1 = new THREE.Vector3(0,0,0); // Vector3 used to specify position var v2 = new THREE.Vector3(1,0,0); var v3 = new THREE.Vector3(0,1,0); // 2d = all vertices in the same plane.. z = 0 // add new geometry based on the specified positions geometry.vertices.push(v1); geometry.vertices.push(v2); geometry.vertices.push(v3); 

    Затем нам нужно построить грань из наших вершин, вы передаете индексы вершин в том порядке, в котором они вытолкнуты выше.

    [РЕДАКТИРОВАТЬ]: Как указано в mrdoob ниже, вам также необходимо добавить их в счетчик по часовой стрелке.

    Введите описание изображения здесь

    Это была проблема с моей скрипкой. Здесь вы можете посмотреть фиксированную демоверсию .

     geometry.faces.push(new THREE.Face3(0, 2, 1)); 

    Наконец, создайте материал и объедините его с геометрией для создания сетки. Даже для 2D я считаю, что вам нужно создать сетку, чтобы отобразить это.

     var redMat = new THREE.MeshBasicMaterial({color: 0xff0000}); var triangle = new THREE.Mesh(geometry, redMat); scene.add(triangle) // added at the origin 
    Interesting Posts

    Несколько экземпляров диаграммы визуализации Google Внутри отдельных разделов

    Кросс-домен ajax терпит неудачу даже для локального файла

    Javascript привязывает событие к изменению имени класса

    Преобразование рекурсивной функции в асинхронную реализацию CPS (javascript)

    Плюсы и минусы использования e.stopPropagation () для предотвращения пузырьков событий

    Проверка ошибок XML с помощью JavaScript

    Возврат значения из функции обратного вызова в Node.js

    Можете ли вы вставить разрыв строки в тексте при использовании d3.js?

    Как экспортировать всю страницу или html-контент с помощью Highcharts, а не только в диаграмму?

    Удаление документов из коллекции mongodb из node.js

    Fancybox: ссылка, которая изменяет URL-адрес в адресной строке и ссылки на страницу с открытым Fancybox

    SetTimeout не задерживает вызов функции

    Библиотеки Javascript, которые позволяют SQL-запросы на данные JSON?

    Websocket – клиент не получает данные

    Добавление холста внутри другого холста: obj.setCoords не является функцией (fabric js)

    JavaScript делает сайт умным, красочным и простым использованием.