21,144
questions
-1
votes
0
answers
10
views
Problems with AR start coordinates
When starting the AR session, the origin point of the world is set to the location where the quest glasses were placed, instead of the point where the session was started. I am using three libraries ...
0
votes
0
answers
16
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
0
votes
0
answers
9
views
How to render a page only through a 3D mesh using threejs
I'm trying to achieve an effect where you could see the content of a page only through a 3D object. But I have no idea where to start, what should I search to do this effect.
My first idea would be to ...
- 368
0
votes
0
answers
8
views
How to render .glb files with image textures in React Native (Expo)?
I am developing a React Native app using Expo and want to render .glb files with image textures. However, I'm not sure if this is supported in Expo, and I couldn't find clear documentation on this.
I'...
- 23
1
vote
0
answers
15
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
25
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
26
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
votes
0
answers
28
views
How to rotate a torus in 3js from inside to ouside? [closed]
So imagine this rotation like taking a a straight tube rotating around its longest axis, than I bend it to torus shape, and the rotation keep going.
I have tried with tube, and torus too, but can't ...
0
votes
0
answers
26
views
Microsoft Kinect controller for a threejs character: bones not moving correctly
I am working on a project to control a character in threejs using a microsoft kinect.
The data for the connect is coming in correctly, The mapping for the bones is working I guess.
But when you look ...
- 147
0
votes
0
answers
12
views
Does open bim component have context menu in?
Can you tell me please. Does open bim component have context menu in? So that the context menu opens, when we pushed right button of mouse on mesh. Any help and pointers to sources appreciates. How ...
- 1
1
vote
1
answer
68
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
0
answers
34
views
Applying a dynamic number of forces to particles in threejs compute shader
I've been making a particle system using threejs, based off one of the examples, and I've been trying to expand on it by adding functionality for a varying number of attractor objects, just simple ...
0
votes
0
answers
22
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
31
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 ...
- 25
0
votes
0
answers
19
views
How to slow down my objects when they are initialized?
I'm working with React Three Fiber (I'm a beginner in this) and when the scene is mounted and the objects appear in it, they'll are going in random directions (which is okay) but with a high velocity, ...
0
votes
0
answers
13
views
R3F / ThreeJs - PlayerController distanceFactor problem
I'm using pmndrs/ecctrl for first person movement. I have placed some HTML tooltips in the scene, but the distanceFactor does not seem to work as intended. The reason is probably that the collider ...
- 99
-1
votes
0
answers
42
views
Matrix4 transformations applied to objects are acting awry
As stated in the title of this post, whenever I try to apply any of the below transformations to each of the cubes created in the addGUIControls() function they act in unexpected ways. When I apply ...
- 1
0
votes
0
answers
15
views
issues scaling three.js sprite texture
I am trying to scale a sprite and fill the entire screen, to have text on the top and bottom of the screen, but when I do so, it scales the text also. So how do I put a big line of text at top of ...
- 67
0
votes
0
answers
22
views
Draw on an Icosahedron faces with RenderText (three.js)
I was looking at a three.js example where the writer draws numbers on each of the faces of an icosahedron using a canvas and a Three.CanvasTexture:
https://hofk.de/main/discourse.threejs/2021/...
- 1,706
0
votes
1
answer
18
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" ...
- 1
0
votes
0
answers
8
views
`AnimationMixer.uncacheAction` causes exception
I'm making a webb animation with ThreeJS. I'm creating copies of an object and having them traverse down the screen. One object is created every second. When an object reaches the bottom, an event ...
- 519
0
votes
0
answers
18
views
How to set events on <PresentationControls> React three fiber drei plugin?
I have code like this -
<Canvas
gl={{
preserveDrawingBuffer: false,
antialias: true,
}}
>
<PresentationControls
polar={[-Math.PI / ...
- 672
-3
votes
0
answers
38
views
I have some lights inside the shadows in Three js
Below is my three js code;
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(-0.6, 1, 1).normalize();
scene.add(directionalLight);
const backLight = new ...
- 67
0
votes
1
answer
17
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
39
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:
...
- 900
0
votes
0
answers
19
views
How to properly fit a CanvasTexture on a mesh in Three.js?
I'm working on a project that involves applying a 2D canvas texture onto a mesh of a 3D model (specifically, projecting a canvas that imitates Windows 95 onto the screen of a computer model). My goal ...
0
votes
0
answers
16
views
Raycasters drifting off to far NDC
At the moment I am working with Cesium and OpenBIM Library to set up a viewer that can combine GIS and BIM information.
For this approach, I need to control my BIM viewer by synchronising it with my ...
0
votes
0
answers
31
views
How to get a realistic progress value from useProgress in React-Three-Fiber?
I'm building a 3D website using react-three-fiber and @react-three/drei. I want to display a dynamic loading bar that shows the progress of model loading using the useProgress hook from @react-three/...
2
votes
1
answer
48
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
30
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....
- 1,998
-1
votes
0
answers
35
views
Uncaught TypeError: Cannot read properties of undefined (reading 'length') in React Three fiber project
I am going to adjust image size and position on a 3d model with leva.
here's my code
import React, { useRef, useState } from 'react';
import { Decal, useGLTF, useTexture } from '@react-three/drei';
...
- 73
0
votes
0
answers
14
views
Can I exert simple Three.js stencil-coloring while clipping a GLTF-object with coded mesh?
While taking offset in this Three.js stencil example, ...
https://threejs.org/examples/?q=clip#webgl_clipping_stencil
that uses a coded torus mesh, and clipping planes, I need to go a step further.
...
2
votes
0
answers
75
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 ...
- 73
0
votes
0
answers
52
views
There is a problem with loading format models.glb in the project on three.js
I'm importing.The glb model is using three, but the model falls apart into the parts it consists of. How can I fix this?
const models = {
pizza: { url: 'models/pizza.glb' },
dodster: { url: '...
0
votes
1
answer
40
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
0
answers
34
views
fix the include invalid directive name error on next.js when using threejs-glsl
Three.js is reusing the #include macro to import glsl code into a separate glsl file.
For my use case, I plan to reuse glsl code by using the same macro.
uniform float uTime;
varying vec2 vUv;
#...
- 405
0
votes
0
answers
27
views
Two output files share the same path but have different contents: three_examples_jsm_controls_orbitControls__js.js
enter image description here
i m use vite + vue3 + threejs to import some model, my console alert error like picture. it seems that not effect my code
i want clear this error
7:30:54 PM [vite] error ...
- 1
0
votes
0
answers
15
views
Size of a surface in WebAR
I need to detect a surface (like a wall) and find its size, so I can add some mesh with the size of the detected wall.
Is there any libraries or tools that I can use for finding size of the surface?
...
- 1
0
votes
0
answers
15
views
FBX Animation not playing ThreeJS
I have a threejs scene with a FBX model found here. I downloaded the model by itself in a T-pose position. I also downloaded a falling animation from the same site here.
I have successfully imported ...
- 1
-1
votes
0
answers
35
views
Threejs remove background area from elliptical cylinder
I have this code that draws an elliptical cylinder, and want to remove the background part and only keep the front half of the elliptical cylinder.. How to go about?
setupEllipticShape() {
//...
0
votes
1
answer
54
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
81
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,248
0
votes
0
answers
40
views
Weird bug when drawing on Canvas with THREE.js
I have this weird bug on my website when I try to draw on a canvas. I'm using cameras to "take a picture" of walls and draw them on canvases. I have 4 of these, but for some reason only this ...
- 11
0
votes
0
answers
28
views
How to fix my 3D model appearing black and with no texture or material when viewed in AR? Blender settings or code?
I downloaded various .glb models from sketchfab and all of them ,except for one, appear black when viewed in AR. In blender, the models appear with their correct colour and texture (and material), ...
0
votes
0
answers
20
views
R3F - Get loading progress of Splat
I created a scene within a Splat. For Controls I'm using the Floating Capsule Player Controller from DREI. Sometimes the Player fall through the ground, especially on weaker PCs.
Therfore I want to ...
- 99
0
votes
0
answers
31
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 ...
- 382
2
votes
1
answer
140
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,534
0
votes
0
answers
40
views
ForceGraph3D node module dependency issue. . /webgpu
I recently ran an npm update for my nextjs/react app. I now get this compiling error but connot figure out why.
./node_modules/three-render-objects/dist/three-render-objects.mjs:2:1
Package path ./...
0
votes
0
answers
44
views
Three.js Not Rendering Properly on Mobile in React Vite Application
I’m working on a React application using Vite and Three.js for rendering 3D elements. Everything works perfectly on desktop browsers and IOS, but when I open the application on a android mobile device,...
- 1
-1
votes
0
answers
43
views
Error creating WebGL context: Three.js inside Docker
I created a dockerfile with alpine:3.19 as base image. Inside the dockerfile, I am installing following packages:
RUN set -xe \
&& addgroup -g ${PGID} -S alpine \
&& adduser -u ...
- 6,316