Questions tagged [react-three-drei]
275 questions
0
votes
1 answer
How to create instanced Isocohedrons (polygons) using react-three/fiber and react-three/drei to be able to render more than 16 shapes?
I want to showcase the languages and technologies I have worked on in my portfolio. And I am using icosahedrons to display them. I have assigned all the icosahedrons an icon using decal from react-three/drei. But only 16 polygons are being rendered…
Aayush Gupta
- 15
- 3
0
votes
0 answers
Get bounding box of group after render
I'm trying to get the bounds of a group of Text objects so I can draw the line to the from the bottom corner of the text group.
I've tried to grab the bounds in a useLayoutEffect but I think it's running before it's been rendered, because the bounds…
Ashbury
- 2,160
- 3
- 27
- 52
0
votes
1 answer
Can i customise react-three-fiber global render loop?
I want to add delay to render loop, to reduce CPU load
In common threejs im able to do smth like this:
//.ts
startTime = performance.now()
...
requestAnimationFrame(function render(time: number) {
if (time - this.startTime > 10)…
0
votes
0 answers
react-plotly.js and Svg from @react-three/drei
I am trying to display some plotted charts using Plot from 'react-plotly.js' in @react-three/fiber environment with the accest of @react-three/drei.
I was able to show the charts in Html component, but when there is a reflection it doesn't work on…
A7med
- 3
- 2
0
votes
0 answers
Does anyone know how to render different images on different parts of a 3D t-shirt?
A prototype but can only render an image to a fixed size and position on the 3D shirt
Does anyone know how to render different images on different parts of a 3D t-shirt?
For example, I would like to place a design on the back of the shirt and the…
HeGoBak
- 1
- 2
0
votes
0 answers
How to work with child components in React?
In grid.js
import { Box, TransformControls } from "@react-three/drei";
import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
const RectGrid=()=> {
const boxRef1 = useRef();
const boxRef2 = useRef();
…
Samir Kumar Patro
- 13
- 3
0
votes
1 answer
useframe causing three.webglrenderer: context lost
I am trying to animate the size of a React 3 Fiber drei Box component using useFrame. The geometry works fine up until I add the useFrame function, which causes the browser to throw a THREE.WebGLRenderr: Context Lost error and prevents any…
Jacob Rita
- 31
- 3
0
votes
0 answers
Trying to get React Three Drei Loader component to load before the rest of my site,
I can't seem to get the Loader component to load before anything else. My site initializes, and then pops to the loader instead of hitting the loader first so it seems a little jarring.
import react from 'react';
import { BrowserRouter } from…
biohacker_ellie
- 13
- 2
0
votes
0 answers
How can I leave out reflections of specific objects when using MeshTransmissionMaterial from react-three/drei in a scene built with react-three/fiber?
It is said that "If you have other objects that you don't want to see reflected in the material just add them to the parent mesh as children."
I added the object I don't want to see/reflect to the one with the MeshTransmissionMaterial as child…
LordUwe
- 1
0
votes
0 answers
R3F cloned mesh clone material not working
I'm reusing a mesh several times, so I cloned it. I applied new materials to each clone. Unfortunately, when I change the material of one Mesh, it affects all meshes.
Here is my code simplified:
switch (filetype) {
case "fbx":
mesh =…
tinytree
- 1,009
- 2
- 12
- 28
0
votes
0 answers
How to draw a line that connects geo coordinates on a @react-three/drei Earth model?
I used this sandbox to create my own 3D model of the Earth and add some markers to geolocation coords. Now I want to create curved lines to connect some markers, sort of flight track style. By looking at the drei documentation, I thought maybe I…
Igal
- 5,833
- 20
- 74
- 132
0
votes
1 answer
Three JS Perspective Camera FOV and Near/Far
We have a model loaded on Three JS Fiber and we see some projects that load a similar model but their camera looks more steady and looks like the they have and standard to make it look like its bigger in front like a build.
But on our model we have…
Ulises
- 406
- 7
- 22
0
votes
1 answer
useGLTF taking too much time on first time loading
I am currently using useGLTF from @react-three/drei to load my 3d model. I have already compressed the model using gltf-pipeline (the .glb file is 1.7MB). However, for the first time accessing the website, the model takes a extremely long time to…
Huynh Le
- 1
0
votes
1 answer
Camera Helper Three Fiber
I'm trying to add a camera helper to visualize what my camera sees. I found a storybook from Drei that shows how to use useHelper, but I'm not seeing it show up. Any tips?
Story:…
Ashbury
- 2,160
- 3
- 27
- 52
0
votes
0 answers
Three-js & react: how to mix GUI and 3D canvas
I'd like to display some 3D objects (made with ThreeJS with react-three-fiber) items in a side menu created thanks to a component library like MUI (for instance using drawers and/or accordions), my end goal being to drag 3D objects from the HTML GUI…
tobiasBora
- 1,542
- 14
- 23