При повороте 3d модели остается след, clearRect не работает?10.12.2021, 05:40. Показов 6691. Ответов 42
Метки нет (Все метки)
С помощью moveTo и lineTo создала несколько 3d-объектов, при нажатии кнопок клавиатуры происходит поворот 3d-объектов однако остается след. В функцию my_down, добавила ctx.clearRect(0, 0, cvs.width, cvs.height);. В этой же функции происходит повторная прорисовка объектов, my_down срабатывает при нажатии кнопки keydown(addEventListener). Не очищается холст и остаются следы. Как исправить? Вот код:
0
|
|||||||||||
| 10.12.2021, 05:40 | |
|
Ответы с готовыми решениями:
42
Canvas. При перемещении объекта остается след Затемнение: при повороте модели не освещаются боковые нормали |
| 21.12.2021, 10:09 [ТС] | |
|
8Observer8, перечитала еще раз все посты, моего вопроса, здесь упоминается Babylon.js. Нашла в интернете подходящую статью. Creation of an HTML5 3D Sokoban level with Babylon.js. В целом движок мне понравился. Даже свечение можно на нем сделать.
1
|
|
| 21.12.2021, 16:47 | ||
Из всех движков для 3D мне больше всего понравился Babylon.js. Есть выбор: писать 3D веб-приложения с помощью движка или использовать чистый WebGL + glMatrix. Нужно чётко понимать одну вещь - для каких целей используется движок или чистый WebGL. Если вам нужно приложение для интернет-магазина с 3D конструктором или обзор квартир с реалистичной графикой с PBR/VR, то однозначно надо брать движок. Но если вам нужна игра с low-poly графикой с анимациями, или вам нужна функциональность веб-приложения без PBR, чтобы не тормозило на средних ноутбуках, то я обеими руками за чистый WebGL + glMatrix + TypeScript. У меня по приоритету:
На чистом WebGL + glMatrix + TypeScript я написал игру со стрелами и змейку в песочнице. Ещё есть куча мелких прототипов, на которых я продолжаю тренироваться. Я ещё в процессе изучения сопутствующих основ геймдева, можно сказать, что в самом начале пути. Пару месяцев назад написал такую демку:
1
|
||
| 22.12.2021, 10:15 [ТС] | ||
Движок называется phoria, вот ссылка: https://github.com/kevinroast/phoria.js А вот так выглядит index.html (скриншот ниже). В маленьком окне показан пример движение объектов. Ссылки которые расположены справа от окна, это примеры возможностей движка.
0
|
||
| 22.12.2021, 10:33 [ТС] | ||
0
|
||
| 22.12.2021, 11:08 [ТС] | |
|
8Observer8, Можете протестировать на html5 примеры по ссылке и сказать как работает? Меня больше всего интересует производительность модели монстра похожего из игры doom. Вот пример скриншот.
А также модели армии воинов. Нужно знать какая будет производительность, при огромном количестве движущихся объектов и при условии высокой детализации графики.
0
|
|
| 22.12.2021, 12:53 | |||||
Сейчас занят импортированием анимаций. Хочу, для начала, такую демку сделать, как этот парень сделал:
0
|
|||||
| 30.12.2021, 23:01 [ТС] | |||
Эти архивы достаточно полезны в работе не давно я поставила архив под названием r73 посмотреть что внутри и обнаружила много разных примеров например создание 3d scene с управлением кнопок на клавиатуре мышкой вот примеры. Пример 1 Пример 2 Некоторые примеры которые я находила в сети используют json я решила изучить как правильно делать конвертирования в Blender и нашла несколько плагинов. https://github.com/satori99/threejs-blender-export https://github.com/warmwaffles/io_mesh_json Плагин до r69 io_mesh_threejs, после уже идет io_three. Я конечно не утверждаю что это лучший формат, но пока последнее время использую его для выполнение простых примеров.
8Observer8, вы писали, что хотите научиться создавать 3d игры. Я лично последнее время смотрела глобальную библиотек по threejs https://github.com/mrdoob/three.js. Там есть модели со скелетной анимацией, вот примеры. Перемещения человека в доспехах Пример анимации Пример робота с анимацией Несколько анимированных персонажей на одной сцене. Правда все эти объекты используют "skinning". 8Observer8 вы писали в одном из постов, что пытаетесь обойтись без skinning, каким образом вы делаете построение модели? Я пробовала посмотреть в сети где модели работают без "скининга" посмотрела эту библиотеку, прочитала несколько статей. https://agm1984.medium.com/how... 6e258a9d9d https://unboring.net/workflows/animation.html Там про конвертацию json которую я сейчас изучаю везде используется skinning. Тоже собираюсь сделать анимацию модели. 8Observer8, вы выше писали “Сейчас занят импортированием анимаций. Хочу, для начала, такую демку сделать, как этот парень сделал:” На одном сайте нашла Jill Valentine, только без анимации интересно есть возможность её сделать анимацию? https://p3dm.ru/files/characte... stars.html
0
|
|||
| 31.12.2021, 00:57 | ||||||
|
Chapter 09. Hierarchical Objects ch09/JointModel: https://jsfiddle.net/8Observer8/vqse5egz/ ch09/MultiJointModel: https://jsfiddle.net/8Observer8/sL53wkn3/ ch09/MultiJointModel_segment: https://jsfiddle.net/8Observer8/ygvk7odv/
0
|
||||||
| 31.12.2021, 01:18 | ||
|
Отличный урок по запеканию теней и shading объектов:
0
|
||
| 10.01.2022, 18:31 [ТС] | ||
https://codepen.io/Smith37/pen/xxXyGwr "Октаэдр". Так же на репозитории github создала новый проект просмотр 3d объектов. Там можно выбирать любую фигуру и она будет загружаться. Загрузка происходит с помощью XMLHttpRequest. Все модели хранятся в текстовом файле и подгружается при щелчке на кнопке из списка. https://1olgastorm.github.io/3dmodels/ Картинка примера: Чтобы повернуть модель нужно перемещать мышь удерживая кнопку мыши.
1
|
||
| 10.01.2022, 19:30 | |||||||||||||
Как использовать эту библиотеку на примере сложения двух векторов и сложения двух матриц:
1
|
|||||||||||||
| 10.01.2022, 21:33 [ТС] | |||||||||||
|
8Observer8, заменила часть кода по вашей рекомендации.
Было:
1
|
|||||||||||
| 10.01.2022, 21:58 [ТС] | |
|
8Observer8, у вас стаж работы 10 лет, если судить по профилю. Я не знаю работали вы с технологией FLASH AS 3.0. и библиотекой Away3D. У меня есть один пример из одной старой книги. Книга была на английском языке, там рассказывается как сделать управление героем стрелками, вид от 3-его лица. Вот исходники.
CameraDemo.zip А вот сам скриншот. Технология flash, примерно 5 лет как устарела. Как сделать такой же пример вид от 3-его лица на WebGL? В Флеше я знаю как сделать а вот WebGL только изучаю. Чтобы запустить сам пример в только что созданном проекте Flash, просто следует добавить класс в свойства как показано на картинке и запускать нужно в браузере или другом проигрователе (не Flash Player, там пример плохо работает).
0
|
|
| 10.01.2022, 22:25 | ||
|
0
|
||
| 11.01.2022, 01:00 | ||||||||||||||||||||||||||
|
Я сделал простой пример загрузки статических объектов с текстурами на WebGL: https://github.com/8Observer8/... ter/public Загрузил на форум: matches-box-dae-webgl-js-master.zip (686.6 Кб) В примере нет никаких анимаций, физики, нет GameLoop, а есть просто статика. Пока не надо разбираться с кодом, а выполните одно задание. Скопируйте пример. Переименуйте его. В "index.html" переименуйте Title. Обратите внимание, что рисунки загружаются в "index.html" и они скрыты "hidden":
В файле main.js в самом верху добавьте свои объекты вместо этих:
В функции draw() напишите свои объекты:
0
|
||||||||||||||||||||||||||
| 11.01.2022, 12:18 | |
|
Раз вы научились хостить на GitHub Pages (https://1olgastorm.github.io/), то пора захостить на Heroku (https://www.heroku.com/). Это делается очень просто и быстро. Следуйте моей инструкции: Инструкция по развёртыванию Node.js сервера с WebSockets на бесплатном хостинге Heroku. Heroku даёт намного больше возможностей, чем GitHub Pages, потому что Heroku позволяет использовать Node.js, то есть серверную часть. На Heroku есть бесплатный тариф использования баз данных, например, на нём есть MySQL. Правда, с определёнными ограничениями по трафику и по размеру базы данных (для MySQL не более 5 МБайт размер базы данных). Но этого вполне хватит для небольших игр, а потом можно будет взять платный тариф, когда перестанет хватать бесплатного.. Можно использовать WebSockets для передачи сообщений между клиентами через сервер или просто от сервера клиентам - какие-нибудь оповещения в реальном времени. Задание: захостить на Heroku ваше приложение: https://github.com/1olgastorm/3dmodel
0
|
|
| 12.01.2022, 02:24 | ||
|
Добавлено через 5 часов 37 минут Полезный туториал: https://unboring.net/workflows/animation.html и пример из него: https://codepen.io/8Observer8/pen/GRMwJOY
1
|
||
| 12.01.2022, 08:58 [ТС] | ||
0
|
||
| 12.01.2022, 08:58 | |
|
Помогаю со студенческими работами здесь
40
Почему при перемещении объекта остается "след" от него? Не Работает clearRect (canvas)
Остаётся след мышки снизу На фоне остается след от анимации Искать еще темы с ответами Или воспользуйтесь поиском по форуму: |
|
Новые блоги и статьи
|
|||
|
SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами
8Observer8 20.02.2026
Содержание блога
Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .
|
Конвертировать закладки radiotray-ng в m3u-плейлист
damix 19.02.2026
Это можно сделать скриптом для PowerShell. Использование
. \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json>
Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом.
# Check if. . .
|
Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI
Eddy_Em 18.02.2026
Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так:
https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347
Основана на STM32F303RBT6.
На борту пять. . .
|
Камера Toupcam IUA500KMA
Eddy_Em 12.02.2026
Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
|
|
И ясному Солнцу
zbw 12.02.2026
И ясному Солнцу,
и светлой Луне.
В мире
покоя нет
и люди
не могут жить в тишине.
А жить им немного лет.
|
«Знание-Сила»
zbw 12.02.2026
«Знание-Сила»
«Время-Деньги»
«Деньги -Пуля»
|
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров
8Observer8 12.02.2026
Содержание блога
Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .
|
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image)
8Observer8 11.02.2026
Содержание блога
Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .
|