20,948 questions
0
votes
1
answer
70
views
3D Model Appears Too Small in React Three Fiber (GLTFLoader)
I'm using React Three Fiber to display a 3D model with the GLTFLoader. However, the model appears extremely small — barely visible, like a speck of dust.It is downloaded from sketchfab (https://skfb....
-1
votes
1
answer
61
views
Text shrinking problem on 3d model through shader and canvas
Hello currently i am developing a configurator but have some issues with texts. I am trying to render text on off canvas on 3d model through shaders but its acting weird. i can not set width and ...
- 37
0
votes
1
answer
80
views
Trying to load a custom .glb file but constantly getting an HTML/404 response when fetching the file
Cannot work out where to put the model.glb file.
Error:
Error in asyncWritable: Unexpected token '<', "<!doctype "... is not valid JSON.
Created the project with - 'npm create //@/...
- 41
0
votes
0
answers
58
views
Failed to parse source map from '\node_modules\@react-three\drei\node_modules\@mediapipe\tasks-vision\vision_bundle_mjs.j s.map'
Full Error:
Failed to parse source map from 'C:\Users\Leroy\ReactProjects\CoolVec\Frontend\node_modules\@react-three\drei\node_modules\@mediapipe\tasks-vision\vision_bundle_mjs.j
s.map' file: Error: ...
- 57
1
vote
1
answer
95
views
Visible grey edges inside Html-canvas
Hello i am trying to export a uvmap for a model and i am filling triangles(meshes) with color, it works but i always see grey mesh lines. i tried to draw lines if i draw the lines with different color ...
- 37
-1
votes
1
answer
70
views
Detect when object is touched inside pure three js scene
I am building an expo native app, i am using three.js and expo-gl, without fiber and drei packages.
I have a scene with some spheres inside, how i can detect when i touch some object inside scene?
...
0
votes
0
answers
45
views
<Enviroment/> floating model
Seems is not possible to have a 'non-floating' mpdel within a , so I am trying to come up with a workaround as I have seen here:
hack for skyground from three.js,
since I couldnt figure out how to use ...
- 624
0
votes
0
answers
32
views
Three JS (Using globe.gl) altitude bug
import "./style.css";
import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
import Globe from "globe.gl";
...
1
vote
0
answers
50
views
ThreeJs 3d game camera controls different for every direction
I have made this game and when I look one direction, the camera controls are normal, but if I look behind me then they inverse and to the side it makes my camera roll. I suspect this is because the ...
- 59
0
votes
1
answer
119
views
How to fix ThreeJs camera controls only updating for starting view
I am making a 3d Three Js game, but I have run into a problem with my camera controls. When I look the starting direction that you look, the camera controls are all right. But if I look backward, the ...
- 59
0
votes
0
answers
30
views
Clipping - I am facing an issue where the child shape is appearing outside the parent shape
I am new to Three.js and I have created this model. However, I am facing an issue where the child shape is appearing outside the parent shape.
Here's my current view: My modal current view
I'm trying ...
-1
votes
2
answers
139
views
ThreeJS 0.173.0 giving error Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../"
This is my simplest threeJS app page. But i am getting this error :
goo-webxr-ac.web.app/:1 Uncaught TypeError: Failed to resolve module
specifier "three". Relative references must start ...
- 10.8k
1
vote
0
answers
38
views
Normal Map is not displayed on Extruded SVG in THREE.js
The Normal Map, Roughness Map etc is not visible on the 3D Objects I extruded from an SVG. I have tested it with normal Box Geometrys and there it worked perfectly fine. Color, Opacity etc is also ...
- 63
0
votes
1
answer
201
views
How to animate a React Three Fiber "group" object with NEW framer motion?
I am building a 3D website with different pages. I am trying to make "prior" sections disappear when advancing to "further" ones by setting their y-position to -5 when not on that ...
- 3
4
votes
1
answer
169
views
Why do my Three.js game camera controls glitch / not work
I have made a game, and everything works, except when I move the camera with my mouse, everything duplicates in my view. I see a quickly alternating version alternating between my original camera view ...
- 59
1
vote
1
answer
103
views
How to create a 3d Rugby ball with 2 different images on it's subsequent faces
I'm trying to create a 3d rugby ball using ThreeJS and RTF and I'm struggling to create 4 faces on the ball where two subsequent faces on the ball will have two different images. Something similar to ...
- 39.6k
0
votes
1
answer
69
views
three-globe custom html markers not updating their position when the globe is rotating on y axis
I'm using the three-globe library to make a 3D interactive globe with custom html markers, I used this example https://github.com/vasturiano/three-globe/blob/master/example/html-markers/index.html but ...
0
votes
0
answers
26
views
React-Three-Fiber: Camera Won’t Face HoverableCube After GSAP Transition (Controls.Target Issue)
Issue Description
I'm using react-three-fiber and I have a function called HoverableCube that creates a transparent, interactive cube. When clicked, it moves le camera clos to it and should have the ...
- 1
0
votes
0
answers
52
views
vertical surface detection in webxr in andriod webar
I have this webxr code, it is detecting the floor (horizontal surface) correctly (after taking sometime) but its failing when I move my camera towards the wall. I am using chrome on andriod. What I am ...
- 10.8k
1
vote
2
answers
127
views
Three.js Scene Freezes When Browser Tab is Idle
I'm working on a Three.js project with a Tamagotchi-style animated character using GLTF animations and an animation mixer. The project includes a robot, a hatching box, and interactive controls.
...
- 871
0
votes
0
answers
51
views
ThreeJS and SVG textures
I've been trying to get an SVG to work with Three.js. I've learned it doesn't initially support SVGs, and an SVGLoader is required. After adding that in, the issue I'm having is the mesh completely ...
0
votes
0
answers
58
views
Projecting HTML Onto a Screen in ThreeJS
I have a Screen FC defined as
import React, { useRef, useEffect } from "react";
import * as THREE from 'three';
import { CSS3DRenderer, CSS3DObject } from 'three/addons/renderers/...
- 1
0
votes
1
answer
46
views
How to add background behind the three.js model in html for a section?
I want to move background behind the model covering the whole section.
I have created a stackblitz sandbox [https://stackblitz.com/edit/sb1-el22jkdo?file=src%2FApp.tsx] for my project so that it is ...
- 21
0
votes
0
answers
48
views
React Three Fiber VideoTexture - Frequent "stalled" events when trying to load the video
I’m using React Three Fiber and THREE.VideoTexture to display videos as textures. However, some videos trigger frequent "stalled" events, especially in Safari, while not so much in Chrome.
I ...
2
votes
1
answer
128
views
How to implement KHR_materials_dispersion?
I see this GitHub page. Sadly, Khronos Group has provided no documentation on how to actually use it, as far as I can tell.
The Three.js Editor has a slider for Dispersion listed for type ...
- 1,743
0
votes
0
answers
445
views
How to preserve mobile scroll inertia by using Lenis and syncTouch
I am currently working on a project, involving three.js, gsap and lenis.
I found a way to preserve 120fps on desktop and 60 fps on mobile, by using syncTouch: true from Lenis. This option stop the ...
0
votes
0
answers
37
views
What might be causing an object(s) to flicker upon completing a camera rotation in THREEjs?
So I've been learning THREEjs to be used in NextJS web apps, and I've managed to get some simple animations to work. I also set up rotation for the camera, so the user can go left/right to the next ...
- 1
0
votes
0
answers
40
views
ThreeJS: Raycaster selecting old, wrong nodes
so i've made made an update on my GLB files
As you can see this is my chair in blender
And these are the child nodes that make up the figure of the chair
As you can see its only an one child node
...
0
votes
0
answers
67
views
Video Texture Not Displaying on iPhone Model in React Three Fiber (R3F)
I am working on a React Three Fiber (R3F) project where I want to display a video texture on an iPhone model. The scene is using @react-three/fiber, @react-three/drei, and GSAP for animations. However,...
0
votes
0
answers
50
views
How to correctly layer a 3D model and CSS3D divs in Three.js so the divs are placed in front and behind the model?
I'm trying to use both WebGL (a Three.js 3D model) and CSS3D (HTML divs) in the same scene. The goal is to render one div behind the 3D model and another in front of it. However, currently, the model ...
- 1
0
votes
1
answer
66
views
GLTF Model Backside View Appears not Lighter
"I'm new to Three.js and have created a .gltf file using Blender. However, I'm facing an issue where the backside of my object appears lighter than expected.
Here's my current view: https://i....
0
votes
0
answers
80
views
How do I apply a suction effect to my THREE.js model using a vertex shader?
I don't have alot of experience with vertex shaders.
I have imported a model into Three.js and am creating a custom shader material that is showing the model fine
But when I apply the affect; it isn'...
0
votes
1
answer
42
views
how to function "position.set" method in Three.js?
The center of boxMesh has default value(0,0,0).
I think when I use boxMesh.position.set(1,0,0), the center of boxMesh would be (1,0,0).
but it doesn't looks like (1,0,0), it looks like (2,0,0)
Doesn't ...
- 1
-1
votes
1
answer
51
views
Uncaught SyntaxError: Unexpected token ‘:’ (at abarth131.gltf?import:2:9)
so i’m trying to make a simple game with three.js
My first step here is loading a GLTF file, but gives me this error:
Uncaught SyntaxError: Unexpected token ‘:’ (at abarth131.gltf?import:2:9)
What i ...
0
votes
1
answer
67
views
Make the child of a loaded gltf file transparent dynamically using THREE.JS
I’m new to Three.js but have some experience with javascript. I’m loading a gltf model with an async loader function. This all seems to function correctly. I’m them creating a series of timer events ...
- 1,113
0
votes
0
answers
26
views
Discrepancy Between Original 3D Jeans Model and Output in React.js Using Three.js
I am facing an issue in development. I am implementing a 3D model of jeans in React.js using the Three.js library. In fact, the model is showing in the output, but there is a difference between the ...
1
vote
1
answer
67
views
ThreeJS FPS Movement, Stop Velocity When Key Is Released
For my game I need a simple FPS player character and I have used the ThreeJS FPS example as template for my setup. This is the code used for player WASD movement:
if (this.keyStates['KeyW']) {
...
- 1,247
0
votes
1
answer
46
views
How to handle independent camera elevation in Three.js
I have the following code that is run on every frame:
const yRotationPerFrame =
(scaleSensitivity(leftStick.x) * framePeriod) / 15
const forwardVelocity = scaleSensitivity(...
- 39
0
votes
0
answers
61
views
Trouble with npm trying to install ThreeJS with Nuxt3 and Deno v2 on Windows
Nuxt3js is working fine with Deno v2.
But when I'm trying to install ThreeJS for a project using Nuxt3 with Deno v2 on Windows 10 with Powershell, I have an infinite loading that doesn't install ...
3
votes
1
answer
47
views
How to change the video on scroll according to sections of the page
if (child.name === "Computer") {
child.children[1].material = new THREE.MeshBasicMaterial({
map: this.resources.items.screen,
});
}
For example in this scenario ...
-4
votes
1
answer
68
views
Is there a way to find out why the front faces are culled instead of the back in my procedurally generated 3D model?
I have been working on procedural generation of 3d models using threeJS. I have been able to successfully procure a model with the help of marching cubes algorithm and smoothened it with the help of ...
0
votes
0
answers
81
views
Unable to resolve path to module 'three/addons/misc/Timer.js'
I’m trying to create a timer in THREE.js. All the libraries are installed through NPM and the seem to be correctly installed, I’ve created a scene and loaded an object with a GLTFLoader. Orbit ...
- 1,113
0
votes
0
answers
92
views
How can I move an object in Three js and export it properly to IFC?
I am using the Components library from ThatOpen to load an IFC file to my Three.js scene. With DragControls I am able to move stuff around, and I save the moved elements to a Map with the expressIDs ...
2
votes
0
answers
32
views
How to anchor a clipping plane?
We're trying to implement a section tool in Threebox, and it appears that we cannot add a clipping plane (THREE.Plane()) to tb, via tb.Object3D() or tb.add(). I'm assuming it's because a THREE.Plane ...
0
votes
0
answers
61
views
How to accurately align panoramic images with a 3D model at hotspot locations in Three.js?
I am working on creating a 360° virtual tour where panoramic images should seamlessly integrated with a 3D model.
Here’s the workflow: The user clicks a hotspot.(PRESS m key) The camera moves to the ...
0
votes
1
answer
25
views
threejs array camera not rendering objects at specific positions
I have a three.js scene that is using ArrayCamera with 2 cameras. One is first-person, the other an aerial view. For the aerial view, I'm rendering 2 spheres but only one is visible. It seems anything ...
- 1,546
0
votes
1
answer
98
views
How does setting a buffer geometry attribute work in three_js (Flutter)?
I'm working on a three_js project, but it's the Flutter package three_js, not the JavaScript module three.js. Recently I've been converting some JavaScript code to Flutter using three_js, and I can't ...
- 450
0
votes
0
answers
43
views
Html doesn't work properly with ScrollControls
<Html
portal={{ current: gl.domElement.parentNode }}
scale={100}
transformGroup >
<div
className="about-wall about-wall-text"
style={{
width: '40rem',
position: 'fixed',
...
2
votes
0
answers
347
views
Monitoring iOS safari crash: This webpage was reloaded because a problem occurred
I have problem with mobile safari in my react application. When user clicks on the button X I run memory-heavy-3d-component (three.js-based) and safari crashes with This webpage was reloaded because a ...
- 5,158
0
votes
0
answers
40
views
Keyframed transition animation in threejs
I have an array of regular hexagons, those hexagons all together cover a surface (equivalent of the surface of my viewport), they are ordered from the center of the surface to the edges, each hexagon ...
- 51