All Questions
510
questions
1
vote
0
answers
28
views
Sprite with shader material does not react to onclick event
With three and @react-three I have a component with sprite as follow:
export function Point({ position = [0, 0, 0] }: { position?: [number, number, number] }) {
const spriteRef = useRef<THREE....
- 1,998
0
votes
0
answers
26
views
fix the include invalid directive name error on next.js when using threejs-glsl
Three.js is reusing the #include macro to import glsl code into a separate glsl file.
For my use case, I plan to reuse glsl code by using the same macro.
uniform float uTime;
varying vec2 vUv;
#...
- 385
1
vote
0
answers
44
views
How can I fix GLSS Shading on THREE.js so it shows an accurate day-night cycle on an earth?
I'm working on a 3D Model of the earth for a project, and I am having a problem. Originally, I was using no shading, and added both materials to a group, with THREE.AdditiveBlending. This led to what ...
- 45
1
vote
0
answers
26
views
R3F animate from intermediate uv state
In a react-three-fiber environment, how do I animate a point model starting from some intermediate state?
The specific problem I'm trying to solve is, I have an animation that moves between some ...
- 1,505
0
votes
0
answers
31
views
texture bug when use ShaderMaterial in three.js
import React, { useRef, useEffect } from 'react';
import { Canvas, useFrame, useThree } from '@react-three/fiber';
import { OrbitControls } from '@react-three/drei';
import { useLoader } from '@react-...
- 1
1
vote
1
answer
73
views
Error compiling fragment shader in Three.js: 'texture' not found
I'm working with Three.js and am facing an issue when compiling a fragment shader.
Here's my code: https://jsbin.com/cigadibeya/3/edit?html,js,output.
I tried to implement animation like here: https://...
- 13
-1
votes
1
answer
65
views
GLSL Shader: Unexpected Behavior in Pixel Looping
I'm working on a GLSL shader and encountering an issue when looping over pixels using a while loop. The same code works fine on desktop devices but produces different results on mobile devices (both ...
0
votes
0
answers
56
views
How do i pass uniforms to my glsl code at compile and during run time in three js?
I have a three js scene where i render meshes from a sdf glsl shader. I want to create uniforms on these shaders to adjust the distance field via sliders in the UI. Passing the shaders in from another ...
- 11
0
votes
0
answers
26
views
How To Let ShaderMaterial Receive/Cast Shadows
So, I have been playing around with vertex and fragment shaders, and wanted to know if there was a way to add shadows to the fragment shaders? I have tried many unsuccessful attempts, and researched a ...
0
votes
0
answers
96
views
Making Vertex Shader face Camera like billboard in THREE.JS
Im attempting to make a vertex shader that i can apply to a mesh to make all its quads turn into billboards. I found this code is the closest i could get it however it does not fully face the camera ...
0
votes
0
answers
49
views
Adding outlines for blender model with sharp edges
I've started learning some three.js and blender to achieve the cartoon effect. I've been working on some code to add black outlines to Blender objects. I've based my code on the tutorial I found on ...
- 15
1
vote
0
answers
76
views
GLSL shader difference between desktop and mobile - varyings or noise function?
Context
I'm building a WebGL GLSL shader using a 3d Perlin Noise function to warp the vertices as well as color the fragments so they line up with the vertices.
I'm running the Perlin Noise function ...
- 31.9k
0
votes
1
answer
177
views
How To Customize Alpha Transparency in Augmented Fragment Shader of Three.js Material?
I'm extending the THREE.MeshStandardMaterial with onBeforeCompile to adjust some details of the shader. I got the vertex shader working fine, but I'm having trouble figuring out how to set the alpha/...
- 1,210
0
votes
1
answer
42
views
normal is always pointing the same way
I have an open topped cylinder with a material that is double sided in a Three.JS scene.
What I am trying to achieve is one color on the front of the cylinder, and another color on the inside of the ...
- 2,947
0
votes
0
answers
53
views
Three.js how to determine if backfacing in a RawShaderMaterial that's double sided and transparent?
In Three.js, I'm trying to create a fresnel based glowing outline on a sphere, with a RawShaderMaterial, on a double sided transparent sphere.
The RawShaderMaterial GLSL is a fairly straightforward ...
- 31.9k