Stack Overflow
Stack Overflow

Questions tagged [react-three-fiber]

Questions about React-three-fiber, a React renderer for Three.js.

981 questions
0
votes
0 answers

Canvas disappeared after adding the timer function

enter image description hereTrying to develop a game using react-three-fiber with a timer. Im trying to create the timer based on a react function. The problem is, after wrapping the timer to the scene (the gameplay), it overlays the game and only…
clydekarnage
  • 41
  • 8
0
votes
0 answers

Is it possible to change meshNormalMaterial default x, y, z colors?

I understand that meshNormalMaterial maps normal vectors to RGB colors. Is there a way to override the default colors? Instead of x being red, y being green and z being blue, I want to update x, y, and z to custom hexadecimal color values. Is this…
Katie Shamus
  • 51
  • 6
0
votes
2 answers

How to have a pop-up text like questions or text-field on a touch-point

I'm currently creating a game using react-three-fiber and I want to implement a touch-point that has pop-up questions or text that will be answered by the player. Already done with the touchpoints but Im stuck creating a pop-up that corresponds to…
clydekarnage
  • 41
  • 8
0
votes
1 answer

ThreeJs - Building a Timeline component in ThreeJS

I'm trying to build a Timeline component in ThreeJS, similar to this one: https://visjs.github.io/vis-timeline/examples/timeline/groups/groupsEditable.html What will be the first steps and do I need ThreeJS or other WebGL libraries for it?
Cristi Sandu
  • 36
  • 1
0
votes
1 answer

How do I mount/unmount a component in React with a keystroke?

I'm making an app that renders 3d objects on keyboard press. I would like these objects to disappear after 2-3 seconds, or when the animation is finished playing. This is a component that handles the key pressed logic: const Selector = () => { …
charlieyin
  • 371
  • 6
  • 16
0
votes
1 answer

How to use a page as a background in React

I have made a component from a 3D library react-particles-webgl. How can I make this as a background for my webpage. The webpage consists of form input elements. import React from 'react'; import Input from './components/Input'; import Navbar from…
prinzu
  • 71
  • 1
  • 2
  • 13
0
votes
1 answer

How to initialize objects outside useFrame() in react-three-fiber

I am currently using react-three-fiber to make scene but I don't know how to put 3D objects at different random positions. I have used a for loop inside useFrame to have different random positions, but as this will render every time, particles will…
prinzu
  • 71
  • 1
  • 2
  • 13
0
votes
1 answer

Handling events across different exports with React

So I wanted to create a popup div that would slide from the side when an object has been selected and then exit when the object is re selected. I also want to create an exit button that would also close the div. I can pretty much understand how to…
Sophia98
  • 339
  • 5
  • 17
0
votes
2 answers

Why does my object "sink into the ground"?

I have a rather simple react-three-fiber setup that includes cannon.js-powered physics. In the scene there is a cup -- which is modelled as a cylinder whose top radius is bigger than the bottom one -- that is placed on a surface. When I run the…
Christallkeks
  • 525
  • 5
  • 18
0
votes
1 answer

PointCloud Component render issue fetch() custom data [react-three-fiber]

Based on a snippet of original r3f-example found in PointCloud.js Tested by myself, this above original component is able to render pointcloud by pushing individual x y z value into the for-loop in Particle() function. I modified it and added a…
Lance
  • 35
  • 1
  • 9
0
votes
1 answer

Location based AR with Three.js (+ React) - camera configuration?

I want to augment the image of a stationary webcam with location based markers. This is to be added to an existing React app that uses three.js (through react-three-fiber) in other parts already, so these technologies are to be reused. While it is…
creimers
  • 4,975
  • 4
  • 33
  • 55
0
votes
1 answer

Vertices Move Along Wrong Axis After Rotation

I am moving the vertices of a shape on mouse move and this works well. However, when a rotation is applied to the shape, the vertices move along the wrong axis. Created a codesandbox.io here:…
user3806642
-1
votes
2 answers

Show one div hide another onclick in ReactJS

Quite new to ReactJS and using it for web development. How do I show one div but hide all others onclick, all divs are hidden on purpose (popup divs from onclick on sidebar menu). I have two buttons on a side panel and two divs that are hidden on…
SecretFerret
  • 35
  • 6
-1
votes
1 answer

Question on how method was created in 3js

There are some details about Javascript I am still learning and this is one of them. On line 65 of the linked codepen. "rotationAxis" is added and I am unsure how it was created. I thought at first it was something added through 3js but it's not. …
Yerbs
  • 127
  • 1
  • 7
-1
votes
1 answer

Can't render any shader in React: `Failed to execute 'shaderSource'`

I'm trying to render a simple shader, but with every library I use (gl-react, shadertoy-react, etc), i get the error: TypeError: Failed to execute 'shaderSource' on 'WebGL2RenderingContext': parameter 1 is not of type 'WebGLShader'. at…
Daniel Zufrí Quesada
  • 35
  • 4
1 2 3
…
64
65