20,948 questions
0
votes
0
answers
48
views
Implementing Drag-and-Drop Image Upload to a Canvas Texture in React.js
I am working on a project in React JS uisng of Three.js and need to implement a functionality where users can upload an image via drag-and-drop. If the image intersects with the canvas, the ...
0
votes
1
answer
141
views
Large number of polygons with react-three-fiber
I need to display thousands of polygons (2d) of different shapes with react-three-fiber.
I thought the best option would be to use instances of the same polygon with, let's say 100 vertices. And then ...
- 123
0
votes
1
answer
334
views
Blazor using typescript and import three.js
I'm developing a Blazor WASM application where I make use of the Microsoft.TypeScript.MSBuild nuget package in order to use typescript for all related javascript code.
But when it comes to import and ...
- 1,104
-1
votes
1
answer
69
views
Is there a way to only have one instance of THREE when using Threebox
I am using Threebox with Mapbox, I define threebox like so:
(window as any).tb = new Threebox(this, gl, { defaultLights: true });
but I am also importing THREE like so:
import * as THREE from 'three';...
- 69
0
votes
0
answers
111
views
Using React Three CSG and Fiber, how can I use an uploaded STL file as the source for a subtraction?
I want to upload two stl files, and create a subtraction against the first stl using the second. When I upload a single stl and try to subtract using a Three based geometry it works well, but when I ...
0
votes
0
answers
40
views
Markers Positioned Below the Surface of .glb Model in Three.js
I'm working on a Three.js project (React) using the @react-three/fiber and @react-three/drei libraries. My goal is to place markers on the surface of a terrain .glb model based on specific coordinates....
0
votes
1
answer
108
views
how to smooth transaction with animejs in three js when the target camera position move?
I had a button when the current position was on the top and then it moved to the bottom and centered with Vector3, but it was not smooth, it is like when we do display: none; to display: block for my ...
- 121
0
votes
0
answers
76
views
Implementing Raycasting in Gaussian Splatting Using Three.js
How can I place points at X, Y, Z coordinates in a 3D map using Three.js? I'm working with Gaussian Splatting representations, and right now, raycasting with a splat mesh doesn't work with Three.js's ...
- 29
0
votes
2
answers
167
views
Infinite marquee on a 3d/dynamic perspective path? Can it be done?
(perspective grid that might be useful to illustrate what I mean) I've been trying to create what I'd describe as a "dynamic perspective infinite marquee". Specifically I'm using this video ...
2
votes
2
answers
176
views
How i can make the object steady 180 degrees?
i have clothe object where user can rotation the cloth, i am using orbit control to rotation the object here, and the interface, user can change the color of clothe, there is a button to see the back ...
- 121
0
votes
1
answer
212
views
R3F / Rapier - How to use a Static Collider for First-Person Movement
I want to create a custom PlayerController for react-three-fiber by using rapier.
I'm using a MouseMovement combined with KeyControls (WASD). I want a simple CapsuleCollider, to preventing the player ...
- 109
1
vote
0
answers
64
views
@react-three/fiber doesn't render the 3D model, leads to a blank screen
I'm trying to render a 3D animation using @react-three/fiber, @react-three/drei, and three. But it leads to an empty screen. No error logs are displayed. I checked whether WebGL was being supported by ...
- 15
0
votes
1
answer
207
views
"Html" Component turning black after setting occlude to "blending"
pretty new to r3f but having a blast so far. I've run into a bit of an issue when rendering HTML into the scene with the drei helper. I'll drop the code from my render function below:
<group ref={...
0
votes
1
answer
105
views
How to make a three.js cube have different colors on different sides?
I am new to three.js, and in a program I am creating, I would like to make different colors for different sides of the cube. The arrow keys control cube rotation. For example, could I have red on one ...
0
votes
0
answers
108
views
How to find orienation of an object in a 2d Image
I have to detect some objects (Sofa and table in my case) and replace that objects from a 3d model. I am using YOLO to detect and LaMa to remove object and then trying to place the 3d model on the ...
- 137
1
vote
0
answers
106
views
How can I capture photo / video in WebXR threejs?
I want to capture photo / video while in AR mode . I am using webxr of threejs for the AR mode.
I tried to take photos but it gave me black photos.
I tried it using getUserMedia
I don't know whether I ...
- 122
0
votes
0
answers
74
views
Incorporating three.js landing page in Wordpress woocommerce site
I have a standard WordPress WooCommerce site, and I recently integrated a three.js landing page with links to the WooCommerce site. To display the animated landing page, I added the .js file and an ...
- 55
1
vote
0
answers
29
views
Threejs black rendered mesh
I'm using a legacy version of threejs (r150) with a custom loader, generating meshes manually with "position" ,"normal" attributes and groups in case of different materials (...
- 21
0
votes
1
answer
141
views
how to set the fixed position and set off the auto zoom of the orbitControls in React Three Fiber?
hey i have this react three fiber model i get from sketchfab i set the orbit controls but the position of the object/models is not fixed and every time i try to scroll through my it automaticaly zoom ...
1
vote
0
answers
52
views
How to replicate Phong shading with a high specular highlight in WebGL using Three.js?
I'm trying to render two spheres in Three.js with custom Phong shading using GLSL shaders. I want the right sphere to have a high specular highlight, similar to the one in this reference image, where ...
- 21
1
vote
1
answer
96
views
3d object should always "fit" inside the window with Orthographic Camera
I want my 3d objects to always "fit" inside the window
This is how my code currently looks like
export function onWindowResize(camera, renderer) {
const canvas = renderer.domElement;
...
- 21
0
votes
1
answer
102
views
ThreeJS Add border for Text Object
Created Text with TextGeometry in Threejs,
const font = await loadFont(fontUrl)
const geometry = new TextGeometry("文字", {
font: font,
size: size,
depth: 10,
...
- 1
1
vote
1
answer
59
views
Three Js when rotation and Scalling then mesh object psotion changes
When I object rotation or Scalling with that control then why its change's position also, See below Video
https://drive.google.com/file/d/1SZ26GRon5ko8cHAG8taeeN6pP8i0xb1Z/view
I want to below video ...
- 45
0
votes
1
answer
26
views
VideoTexture on a single face of model
I'm importing the very first model I made in Blender 4.2, which consists of a computer and two monitors, into my three.js scene.
I have a VideoTexture map set up on the "computer screen" ...
- 9
0
votes
1
answer
52
views
R3F Providing context of GLTF imported meshes causes typescript error when subscribing to and rendering meshes
So I'm rendering out instanced meshes in my scene using the code below
interface IInstanceContext {
[key: string]: Mesh<BufferGeometry<NormalBufferAttributes>, Material | Material[], ...
0
votes
2
answers
69
views
Fill with a white PlaneGeometry the viewport with exact size
I am trying to paint white the viewport in threejs with a planeGeometry. The reason is that I need the view plane with size and transform (rotation and position).
These are my two fails tries:
...
- 928
2
votes
2
answers
311
views
how to import THREE.InfiniteGridHelper
When attempting to use THREE.InfiniteGridHelper there doesn't seem to be a way to import the code that doesn't generate an error. Even copying and pasting the code does not work.
Currently I have the ...
- 109
1
vote
0
answers
38
views
Sprite with shader material does not react to onclick event
With three and @react-three I have a component with sprite as follow:
export function Point({ position = [0, 0, 0] }: { position?: [number, number, number] }) {
const spriteRef = useRef<THREE....
- 2,085
2
votes
0
answers
788
views
Internal React error: Expected static flag was missing
I tried to add some png on 3d model using rtf(React Three Fiber).
Here is my code
import React from 'react';
import { Decal, useGLTF, useTexture } from '@react-three/drei';
export function ...
- 25
0
votes
1
answer
88
views
Is there any way to speed up three js sites like mine with 3 models?
I am having a website for my academic project -See My Website- but it loads really slow. You can see the below image it has
Total Blocking Time - 11,940 ms I tried compressing the models and the code ...
0
votes
1
answer
121
views
Having a problem in porting shader from shadertoy to react vite app
I want to port shader from shadertoy to my React-Vite app using Three.js and @react-three/fiber.
Exactly this shader; https://www.shadertoy.com/view/DlySDD
I surfed Google for a long time, but I ...
- 11
1
vote
1
answer
111
views
three.js color changes don't revert on instanceColor set
I am currently working on a loaded ifc model that has some custom propeties. I have a search field and my goal is it that the user of my application can enter the custom designator into the field and ...
- 1,246
0
votes
1
answer
368
views
How to get element geometry in web-ifc?
I'm using web-ifc version 0.0.59 to explore IFC files.
I'm also using @thatopen/components and associated packages but I find it easier to use the web-ifc package to explore the structure and element ...
- 464
2
votes
1
answer
199
views
How to copy specific mip map level from a source texture to a specific mip map level in a destination texture?
I'm merging many 2D textures into an Array Texture in WebGL2 (three.js) for rendering models with multi draw. These individual textures change frequently and are using mipmaps. Because it's not ...
- 2,554
2
votes
1
answer
311
views
How to Use FBX Models with three.js
I'm studying computer graphics with WebGL and want to utilize Three.js to draw FBX models. I have succeeded in loading the FBX models that are shared for free, but I don't know how to add textures and ...
0
votes
1
answer
35
views
three.js - 'Interleaved' Render from both perspective and orthogonal scene
I'm trying to conditionally render from a perspective and ortho scene & camera together.
Eg, imagine an old school computer game where there are 2d sprites positioned on top of a 3d scene BUT the ...
- 2,350
0
votes
1
answer
157
views
threeJS and overlay in safari
I have a website that uses threeJS. It is rendering to a canvas and it has a white clear color (renderer.setClearColor(0xffffff)).
I also have a div that gets rendered on top of it as an overlay for a ...
- 3,115
0
votes
1
answer
81
views
Chunking using planes in THREE.js
I'm trying to make an infinitely generating world, the same way Minecraft does it, by using chunks that disappear and reappear depending on where the player is. I'm using a plane that generates points ...
- 55
0
votes
1
answer
48
views
Glitch in extruding a shape in Three.js
My code generates a shape that consists of a few circular arcs. (There are tiny rounding errors in the coordinates of the ends of the arcs, so Three.js adds some lines between them as well.) This ...
- 178
0
votes
0
answers
114
views
Loading module was blocked because of a disallowed MIME type("text/html")
I am unable to import GLTFLoader into my threejs website & it's showing the same error again and again i.e.
" Loading module "http://127.0.0.1:5500/node_modules/three/examples/jsm/...
- 11
1
vote
1
answer
232
views
How do I set the background to an image in three.js?
Sorry, I'm new to three.js and I know (most) of the basics but somehow I don't know how to set the background image. I need to set the background image to a space-themed background, because in my ...
- 21
1
vote
0
answers
67
views
I am not able to get a stable orbit in this three js and cannon js simulation
I am trying to create an app which simulates celestial bodies in space.
I am using three.js for rendering and cannon.js for physics simulation. Here with this code I am not able to get a stable orbit ...
1
vote
0
answers
39
views
R3F animate from intermediate uv state
In a react-three-fiber environment, how do I animate a point model starting from some intermediate state?
The specific problem I'm trying to solve is, I have an animation that moves between some ...
- 1,565
1
vote
1
answer
262
views
Why React Native Expo Three.js Model Texture Not Wrapping and Rendering Black?
I'm trying to render a 3D model in my React Native app using Expo and Three.js. The model loads, but it's completely black, and the texture isn't wrapping properly. I've tried adjusting the material ...
- 361
1
vote
0
answers
18
views
Modelling blender limit location extention/retraction in Three.js and cannon-es
I am trying to load a .glb file created in blender to a three.js with cannon-es for physics/gravity.
My goal is to be able to extend and retract each individual actuator added to my model. The model ...
- 4,000
1
vote
0
answers
99
views
"useGLTF" form React-three/drei throws "url.lastIndexOf is not a function" when used with Native
import React, { useRef } from 'react'
import { useGLTF } from '@react-three/drei/native'
import BaseWhite from './base.gltf'
export default function Model(props) {
const gltf = useGLTF(BaseWhite);
...
- 109
1
vote
1
answer
90
views
Most resource efficient way to create a beach umbrella in Three.js
I'm new to Three.js, I find it great because with very low effort I've been able to create a simple scene.
I'm working on a beach scene and I'd like to add 10 thousands of beach umbrella to the scene. ...
- 899
0
votes
1
answer
85
views
Camera rotation on X axis with React Three Fiber
I just want to set my camera X angle view to see my scene from above.
Here is my starting code :
<PerspectiveCamera
makeDefault
rotation={[0, 4.7, 0]}
...
- 11
0
votes
1
answer
84
views
Laplacian Smooth disconnecting faces
I have implemented Laplacian smooth in JavaScript and using Three.js, but it seems to be not working as expected. Whenever I use hover and smooth over meshes, the faces are disconnecting and getting ...
0
votes
0
answers
90
views
how to get three.js crossFadeTo() working
So I've downloaded a mixamo character and, separately, an animation pack. I've set up a scene with lights, cameras, textured ground and all. I load all the animations and then, I play one of the ...
- 4,695