Questions tagged [react-three-drei]
275 questions
0
votes
0 answers
Cannot read properties of undefined (reading 'current'). When trying to import the react three fiber canvas
I keep getting the error:
Cannot read properties of undefined (reading 'current').
error image
When attempting to import the React Three Fiber canvas into my live WordPress website as a plugin, I can't seem to find any solutions to fix it. Any…
0
votes
0 answers
Exclude edges of a cylinder from a displacement map
Is there a way in three js to restrict the displacement map to affect only the faces of a cylinder, but keep the edges of the cylinder in the same place?
I'm trying to make a cake with a slice cut out and want to give the frosting some detail, but…
Ashbury
- 2,160
- 3
- 27
- 52
0
votes
1 answer
Creating trapezoid with intended requirement
I want to create a 3D model. I've tried to explain the whole requirement as follows:
-top width=4
-bottom width=8
-It should have only four edges.
-it should have height segments 4 and width segments 4.
Could someone help me implement it in React…
Eyasu Emana
- 35
- 3
0
votes
0 answers
morphTargetInfluences With MeshRefractionMaterial from @react-three/drei
I am using MeshRefractionMaterial shader on a diamond geometry, and I have trying to update the morph influences, the problem is i think that the shader is overlapping with the morphs because when i am updating the morph target nothing changes but…
0
votes
0 answers
GLTFJSX Error : Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'read-pkg-up'
I have a 3D .glb model and I want to convert it to a JSX file, there I herd about gltfjsx library, but when I ran the command : npx gltfjsx /path/model.glb I got an Error;
node:internal/errors:490
ErrorCaptureStackTrace(err);
^
Error…
Sahil Bhor
- 1
- 2
0
votes
1 answer
How can I prevent the animation from stopping until it reaches its last frame onPointerLeave?
I have an element that triggers a specific animation when I hover over it. However, currently, the animation stops as soon as my pointer leaves the element. I would like the animation to continue playing until it reaches its last frame, rather than…
user18514215
- 1
- 2
0
votes
0 answers
VTKLoader: why dont handle CellData?
`
I wanna get VTP file color data ,but i cant get color data in sources code
three.js sources code
const piece = json.PolyData.Piece;
const compressed = json.attributes.hasOwnProperty( 'compressor' );
// Can be optimized
// Loop through the…
wuhoo
- 1
- 1
0
votes
2 answers
Blender Exported GLTF rendered some materials partly black in scene
Lighting: (The 2nd picture is using ambient light at 0.8 intesity. )
I tried ambient, Directional and Evironment lights, but no result.
Here is the Armature with all the materials in blender:
Here is how the model renders using GLTFjsx or…
Ibra
- 912
- 1
- 12
- 31
0
votes
0 answers
React Three Fiber Airplane Trail Effect
I'm working with the GLTF model and react-three/drei's Trail component and I just want to change the Trail effect to a smoke similar to the Cloud component.
My Model component
import { Float, Trail, useGLTF } from "@react-three/drei";
import {…
iozkan
- 1
- 1
0
votes
0 answers
Spotlight isn't working whereas hemisphere Light and Point Light is working in my code
this is the code which I used for my 3d portfolio website using JavaScript Mastery Youtube video:
import React from "react";
import { Suspense, useState, useEffect } from "react";
import { Canvas } from "@react-three/fiber";
import { OrbitControls,…
G raj Kumar
- 9
- 3
0
votes
0 answers
How to have light shine through loaded GLTF model in react-three-fiber
I'm attempting to make a solar system model using react-three-fiber, but i'm having a hard time getting the sun model to work how i want it to. I currently have a pointLight that goes out from the star, lighting up all the planets that orbit it,…
imaadj10
- 1
0
votes
0 answers
Can my mouse events work when the mouse is not locked while using PointerLockControls in React Three Fiber?
I have a question regarding the following CodeSandbox project about PointerLockControls of the React Three Fiber library:
https://codesandbox.io/s/gallant-panini-k6f8wx?file=/src/App.js
In this sandbox example, when you click on the screen to lock…
Clarity
- 186
- 1
- 7
0
votes
0 answers
React Three Fiber: GLTF only rendering on the last canvas
I currently have a r3f problem in which I am loading to canvas instances and expecting my model to render on both canvases but it only appears to be rendering on the last loaded canvas. Any idea's what could be happening?
Scene code:
This…
Ben Swindells
- 269
- 3
- 12
0
votes
1 answer
Whenever I use Environment preset, the 3d model is not appear & also the website break after some time
I wrote this code :
import React from 'react'
import { Canvas } from '@react-three/fiber'
import {Environment, Center } from '@react-three/drei'
import Shirt from './Shirt'
import Backdrop from './Backdrop'
import CameraRig…
Rajkrishna Rana
- 1
- 1
0
votes
1 answer
Mesh follow cursor breaks on scroll
I'm struggling with a problem and still can't figure out what's going on and why.
Code here:
export const Example = () => {
const ref = useRef();
useFrame((state) => {
const targetX = (state.mouse.x * state.viewport.width) / 2;
…
Lazarusss
- 11
- 6