Questions about React-three-fiber, a React renderer for Three.js.
Questions tagged [react-three-fiber]
981 questions
0
votes
0 answers
THREE.js improve shadows and visualization
I am working on a 3D Furniture configurator using THREE.js and react-three-fiber.
The problem that I encountered is the poor visualization and shadows and I couldn't get it to work right. You can see the image here (I can't attach images,…
0
votes
1 answer
If I click a link to load a different model, ,model displays then disappears. Looks like a material / component issue
Hi Thanks in advance for your help.
The project I am developing is an adaptation of
https://codesandbox.io/s/r3f-wouter-routes-7kohn
I have split the project above into a larger project structure making use of web pack and other dependencies. My…
Max Silva
- 477
- 1
- 7
- 15
0
votes
0 answers
Remove vertical grid lines gridHelper Three.js
I'm using gridHelper but I need to remove the vertical lines (only need the horizontal ones), is there a way to do it?
This is my current implementation (I'm using r3f)
r342346
- 119
- 1
- 15
0
votes
0 answers
Join Vector3 with BoxBuffer Geometry to make a proper angle join using Threejs
I want to create a view which has 6 sides mentioned in the image respectively, we have created all sides and joined respectively but we are stuck at a point when we need to create a side with some angle and need to join with the horizontal side
We…
Mohammad Zeeshan
- 825
- 1
- 9
- 20
0
votes
0 answers
Trying to render a custom triangle in react-three-fiber and mesh flickers in and out of view
I am trying to generate some custom geometry on the fly with R3F. However, when I attempt to generate a triangle using a geometry object with vert array, I get odd behavior. The triangle doesn't render until I right click or alt tab away from the…
HowDoIDoComputer
- 1,383
- 1
- 10
- 19
0
votes
0 answers
Is it possible to select for a camera which objects it should render?
I'm thinking to use 2 cameras, one for the normal scene view (user view) and another placed on top of the field (top view) for the radar view. The output of that camera could be placed on the radar object as texture. But I want this camera to just…
Lukasz 'Severiaan' Grela
- 6,078
- 7
- 43
- 79
0
votes
1 answer
Proper method to move plane vertices locations in React-Three-Fiber
I want to create a plane and set the x,y,z locations for the plane individually. So, in three.js it would be something like this ...
var plane = new THREE.PlaneGeometry(planeSize, planeSize, planeDefinition, planeDefinition);
var plane = new…
Joshua Foxworth
- 1,236
- 1
- 22
- 50
0
votes
1 answer
Objects don't overlap when rotating
I'm trying to reproduce this animation (see below) with react-three-fiber. I'm still very new to this package and to three-js.
http://makesportmakebook.com/livres/.
I've been able to do create book shapes with meshLambertMaterial, as such:
function…
cyruslk
- 839
- 3
- 13
- 25
0
votes
1 answer
Adding drei to react-three-fiber causes error
I am working on a react-three-fiber project and I added drei as I have in the past.
npm i drei
The problem is that once I tried to use the Html aspect, it threw an error about how it could not find the curve modifier. I have used drei in the past…
Joshua Foxworth
- 1,236
- 1
- 22
- 50
0
votes
1 answer
Load bm-font in react-three-fiber and NextJS
I'm trying to get bitmap fonts working in react-three-fiber on a NextJS app but I'm having trouble figuring out how to get it working. This is the package I'm trying to use: https://github.com/Jam3/three-bmfont-text
As you can see, both of the…
FRMR
- 289
- 3
- 27
0
votes
1 answer
Three.JS camera controls in a scene thats rendered onto a planes texture?
Essentially I would like to rotate the box in the plane with the camera controls in the following example. Every time I try and add the camera controls I end up rotating the plane. Eventually I would like to move the plane with scrollevents and…
wileyknight
- 1
- 1
0
votes
0 answers
React Three fiber shows the display in blank from i-pad
I am building my Portfolio using React three fiber, it shows the display on mobile and laptop or PC.
But when I'm trying to see on i-pad the display is blank.
I am trying to solve this problem, but I could not find any solution.
I will be happy if…
0
votes
0 answers
How to render reflections of emissive material of another object in react-three-fiber?
My scene is pretty simple. I have a (Ground) Plane and a sphere on top of it. I am setting an emissive material to the sphere. Now, I want reflection of the emitted light by the sphere on the plane.
Looks like that is not possible in a…
Rohan Asokan
- 634
- 4
- 22
0
votes
1 answer
How do I load a gltf file that has multiple bin and texture files
This code loads a standalone gltf file, but I have a file that contains multiple bin and texture files
import React from "react";
import { useLoader } from "react-three-fiber";
let GLTFLoader;
/**
* @name Scene
* @param {*} url received
*…
ebzeal
- 11
- 2
- 4
0
votes
3 answers
Three.js doesn't play animation in React
I load GLTF model downloaded from Sketchfab in React app. Model loads perfectly well, but animation doesn`t play at all. I tried different approaches. Any ideas?
function Model({ url }) {
const model = useRef()
const { scene, animations } =…
Good Guy
- 95
- 1
- 9