Questions tagged [react-three-drei]
275 questions
0
votes
1 answer
How to scroll down with the help of react-three-drei (Scroll-controls)
I want my sphere bubble to be in center of my screen even if we scroll pages.
is there any way toh do this
here is sandbox of it
https://codesandbox.io/s/happy-paper-cvl4fy?file=/src/App.js
I searched serveral things but didnt found anything
0
votes
0 answers
Drei: PerspectiveCamera to film contents into a RenderTarget
I'm intrigued by Drei's statement about PerspectiveCameras:
You can use the PerspectiveCamera to film contents into a RenderTarget,...
So I wanted to get it working to try it out.
Using their example as a base, I decided to try and render a…
zeumer
- 13
- 3
0
votes
1 answer
Invalid properties for React Three (react-three/drei)'s Text component [TypeScript build error]
The Problem
Summary
I'm trying to create a VR web application using React Three (along with some companion XR libraries).
I'm running into a TypeScript error at build time. It seems as though I'm missing some properties while constructing the Text…
Ethan McRae
- 124
- 2
- 13
0
votes
0 answers
How can I display a React web page with Three JS
To clarify I am using React Three Fibre/drei, I have a scene and want to display some text as the landing page. I have a component Home that is meant to be the html webpage, but it is not working as expected:
import Home from…
ewakwwg12
- 71
- 7
0
votes
0 answers
How can I use applyMatrix4 unto a SphereGeometry using React Three Fibre
I am trying to create an earth sphere with an appropriate 23.5 degree tilt. Using plain JavaScript I can use the following to affect the degree of tilt prior to applying a rotation
new THREE.SphereGeometry(1,32,32).applyMatrix4( new…
ewakwwg12
- 71
- 7
0
votes
0 answers
Optimising a threejs/react-three-fiber scene
I have a website which I have set up using react three fiber. The site contains 4 different 3d models which lerp around. After, not too long, my processor/gpu starts going crazy because, I'm assuming, there is a memory leak somewhere..
I have…
timhc22
- 7,213
- 8
- 48
- 66
0
votes
1 answer
Interactive PositionalAudio component in react-three-fiber drei
Im making a 3D website and just tried to place audio using PositionalAudio by using react-three-fiber drei. But it's not working due to google new autoplay policy. So I needed to play my website music using the PositionalAudio component and with a…
Tharindu Gimras
- 33
- 3
- 14
0
votes
1 answer
How to load raw gltf file with THREE.js
I have a raw gltf file like this
How can I load this in THREE?
I can't load it by file path due to circumstances.
const rawGltf = '{
"asset" : {
"generator" : "Khronos glTF Blender I/O v3.2.43",
"version" : "2.0"
},
…
k K
- 83
- 1
- 4
0
votes
0 answers
it possible to make unique uuid of material by loading model in three/drei
enter image description herei'm try to change color of material model by change property of color then another component keep changing like change A.color and B.color keep changing , it possible to make uuid unique
link…
LLS
- 1
- 1
0
votes
2 answers
React Three Fiber/use-Cannon How to make enclosed boundaries for physics objects?
I want to position a box within a floor and 4 walls so the boxes movements would be within a constraint. This example shows a floor and backwall and works fine. However. I want to add left/right and front wall, so it can't exceed those…
wanna_coder101
- 508
- 5
- 19
0
votes
1 answer
Can i use roughness map with obj model?
I am new to Three.js.
I have a *.obj model and normal, albedo, emissive and roughness maps. I tried to set maps with this code:
const orbObj = useLoader(OBJLoader, 'orb/orb.obj');
const [orb_albedo, orb_emissive, orb_normal, orb_roughness] =…
Volodymyr Boiko
- 31
- 3
0
votes
1 answer
setTimeout Function Not Removing Characters Like A Queue
This is a simple for loop that runs 80 times but only every 100 ms. Each time it runs, it pushes a Y coordinate for a character into the stillChars state array. The stillChars state array is mapped through to create a sequence of text elements…
twominds
- 1,084
- 5
- 20
0
votes
1 answer
How can I make 3rd person camera follow object from behind? (react-three/fiber)
I am trying to build a "3D tank game", and I used most of the code from this Original Project. I cannot find any resources with good examples that demonstrates "useRaycastVehicle" with "3rd person camera". My solution is simple, it checks if z…
imback0526
- 164
- 2
- 9
0
votes
0 answers
@React-three/fiber hide and show group from another group interaction by group name?
I'm new to @react-three/fiber also reactjs,how can i hide one group from mouseclick on another group?
const ref = useRef();
const Hide=()=>{
ref.current.visible=false;
/*??*/
}
return(
Damon Bachelor
- 11
- 2
0
votes
0 answers
THREE.js: How to achieve a slanted divider view?
I am trying to achieve a slanted divider effect with WebGL. The desired outcome is something like a view with 1 interactive divider (slanted) at the middle that allows the user to drag and view a mountain terrain with different colours.
The effect…
KN Lim
- 1
- 1