В проект на three js нужно спарсить obj-файл и применить к нему цвет.
При загрузке obj это делается так:
loader.load("./fox.obj", function(model) {model.traverse(function(child) {
if (child instanceof THREE.Mesh) {
child.m…
В React приложении собираюсь использовать Three.js, но мне нужно нужно расширить модуль THREE, при попытке это сделать получаю такую ошибку "Attempted import error: ‘FreeSurferLoader’ is not exported from ‘three’ (imported as ‘THREE’)…
Использую в своём React приложении Three.js, react-three-fiber и react-three/drei.
Когда я пытаюсь импортировать OrbitControls из react-three/drei, получаю ошибку: Attempted import error: ‘DataUtils’ is not exported from ‘three’.
Мои завис…
Good time of day. Please tell me how you can achieve the following effect as in the screenshot. The color of the gradient should depend on the distance of the links. I use pure webgl and javascript.
Есть у меня такая вот работа. Прилагаю просто на всякий случай. Вопрос заключается в следующем: почему, когда я задаю контекст с таким свойством,
var gl = canvas.getContext("webgl", {
premultiplatedAlpha: false
});
то все …
Пытаюсь создать рисовалку на webgl2
Желательна поддержка большого количества слоёв (>10) в 128бит/пикс. формате
Почитал в интернете, оказывается, с каждым может случиться такая страшная вещь как потеря webgl контекста
В связи с этим соз…
Рисую много раз треугольник красного цвета с прозрачностью, шейдер максимально тупой
out vec4 Color;
void main(){
Color = vec4(1, 0, 0, 0.01);
}
Использую смешивание
gl.enable(gl.BLEND);
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC…
Я создаю webGL и пытаюсь добавить в него шейдер по примеру. webGL создаётся, но шейдер в нём не выводится. Как это правильно сделать? Вот мой код:
index.html:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<…
Стоит задача, необходимо изменить цвет текстуры с преобладанием красного. Я пытаюсь делать так, но у меня текстура полностью заливает картинку красным цветом, подскажите, пожалуйста, где ошибка?
//подключение модуля
import * as THREE from …
Построить геометрию, соответствующую рисунку (12 баллов):
Наложить текстуру (для каждой грани – отдельная картинка)
Текстура не должна быть растянутой (нужно рассчитывать
соотношение ширины / высоты текстуры, затем вычислять, какого
размер…
Есть программа, в основе которой отрисовка разноцветных точек на экране:
function fullScreen(elem) {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) …
есть ли возможность получить объект с прототипом полученного контекста?
let webgl = canvas.getContext(‘webgl2’, params) || canvas.getContext(‘webgl’, params) || canvas.getContext(‘experimental-webgl’, params);
let myObj1 = Object.cre…
Есть вопрос по оптимизации кода.
Цель понять как уменьшить объем кода в Example 1, без значительного уменьшения производительности.
Branchmark
Setup:
let data1={line:new Float32Array(50000)}
let data2={line:new Float32Array(50000)}
func…
Подскажите, пожалуйста. Пытаюсь разобраться как с помощью threejs можно получить в консоль все элементы загруженного объекта в формате GLTF, для последующей замены текстур по нажатию кнопки.
var scene, camera, renderer, ambientLight, light…
Мне нужно чтобы осуществлялось переключение 3D моделей без подключения {GUI} dat.gui.js.
Т.е в данный момент модели переключаются в выпадающем списке select в GUI интерфейсе.
Нужно чтобы переключение происходило без GUI в моей разметке по …
Cоздаю рисовалку.
Рисую на canvas с помощью webgl множество квадратов с маской и альфой.
При альфе > 0.1 проблема незаметна. Но стоит сделать альфу чуть меньше – появляется неприятное искажение цвета.
Я использую классическое смешивание…
По интернету гуляет стандартный способ
gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA
Или же
gl.ONE, gl.ONE_MINUS_SRC_ALPHA
для предумноженных изображений.
Он идеален для наложения прозрачных текстур на непрозрачный фон.
Но что делать если мне …
Что я делаю не так? рабочий пример
function drawWebglCanvas(f, v, gl, image) {
function resizeGlAndCanvas(gl) {
resizeCanvas(gl);
const resizeFunc = () => {
resizeCanvas(gl);
render();
};
const …
Изучаю как обрабатывать изображения в webgl
Не понимаю что это значит
// среднее между средним, правым и левым пикселем
gl_FragColor = (
texture2D(u_image, v_texCoord) +
texture2D(u_image, v_texCoord + vec2(onePixel.x, 0.0)) +
…
При ресайзе я вызываю две функции : resizeCanvas и renderGl
resizeCanvas изменяет размер canvas, а renderGl рендерит изображение
Я не понимаю, что нужно писать когда заново перерисовываешь статичное изображение
function renderGl(gl) {
/…
Нужно сделать эффект при движении мыши как на этом сайте, помогите пожалуйста это реализовать для footer или подскажите в каком направлении искать. спасибо
…
Переписываю код с этого урока: ссылка
У меня не создаётся шейдер, не понимаю в чём проблема. Контекст webgl создаётся
function initwebgl(canvas) {
const context = canvas.getContext(“webgl2”) ||
canvas.getContext(“webgl”) ||
…
Собственно не найду чем подсвечивать синтаксис GLSL, webgl
Я пишу свой лёгкий движок для игр на основе WebGL. Есть объекты геометрий, текстур и тд. Я хочу создавать их таким образом
new Geometry(…);
new Texture(…);
new Mesh(…);
а затем добавлять их на сцены или просто отрисовывать в произ…
Ниже изображение и код иконки:
<svg xmlns=”http://www.w3.org/2000/svg” width=”240″ height=”240″ viewBox=”0 0 120 120″>
<style>.st0{fill:#bcbbbb}.st1{fill:#f48023}
</style>
<path class=”st0″ d=”M84.4 93.8V70.6h…
У меня задача анимировать солнце.
Нужно, чтобы были всполохи и небольшие лучики. Лучики должны гореть, как пламя и медленно вращаться.
Технологии могут быть любые SVG, SMIL, JavaScript, CSS, Canvas, WebGl или что-то ещё.
Так же необходимо…
Так называемые .io-игры — это браузерные massively multiplayer action-игры, в которых множество людей борются с излишками свободного времени.
Хочу спросить. Какие технологии используются для создания анимированных персонажей на платформа Android и/или iOS.
Я хочу создать персонажей, похожих на кота их игры “Говорящий Том”. В моем случае, они также будет иметь набор стандартной…
Свежие комментарии