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

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

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

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

  • Как узнать, какие элементы находятся в текущей позиции мыши?
  • Можно ли получить доступ к закрытию функции?
  • Почему я получаю TypeError: obj.addEventListener не является функцией?
  • Скрипт регистрации ASP.NET после частичной обратной записи страницы (UpdatePanel)
  • Определение часового пояса пользователя
  • Запись и сохранение изображения с высоким разрешением
  • Проверьте, нет ли данных ответа AJAX / blank / null / undefined / 0
  • Добавить класс в тело на Angular2
  • Получить и сохранить cookie (из Set-Cookie) из ответа AJAX POST
  • This.constructor.prototype - не может полностью перезаписываться, но может писать отдельные реквизиты?
  • Copy / Clone выпадающий список с выбранной опцией в jquery
  • Что означает jQuery.fn?
  • 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 
    JavaScript делает сайт умным, красочным и простым использованием.