82 questions
-1
votes
1
answer
28
views
Applying texture continuously on the side of an object with shader
In threejs, i'm working on a showerbase project using shader. One of my material got visible mineral veins on it and I noticed when it wrap around the border, the veins are not aligned.
I made a ...
- 1
0
votes
1
answer
37
views
How to get face/head direction/rotation from BVH files - Axis Studio?
I'm trying to get the direction/rotation of the head or the direction/rotation of the face from the neck.
I'm working whit a BHV file exported from Axis Studio:
Body: Axis Studio
Euler Order: XYZ
...
- 94
0
votes
0
answers
15
views
Unable to load custom class in threejs editor
I have added particlesystem to threejs editor and trying to load its properties
const scene = await loader.parseAsync( json.scene );
scene.traverse(child => {
console.log(child.config)
...
1
vote
1
answer
106
views
GLB Model not displaying on Three JS webpage
The scene, the mesh is all showing up on the website. I've moved the glb literally next to the main.ts file so there's no directory issues. But nothing shows up.
The filename is coffeeshop.glb. This ...
- 53
1
vote
0
answers
31
views
I'm trying the cut these spheres into the other direction to keep the "bitten part" of the spheres
Title: How to properly quarter-cut spheres in Three.js with clipping planes?
Body:
I'm working on a Three.js project where I'm trying to create a visual of layered spheres, and I want to cut each ...
- 13
0
votes
0
answers
35
views
glslify Cannot Find The Method I'm importing
I'm having an issue where my method multiColourLerp Cannot be found when I import it from my utils file. I know that shaders usually don't reuse code across files but for the sake of maintainability I ...
- 1
0
votes
0
answers
19
views
I want to find out what threejs is this page using
This website is using a very cool rotating Three.js effect. I want to replicate it, but I am not able to figure out exactly what it is or how it’s implemented.
I inspected the site and found it is ...
0
votes
0
answers
126
views
Load all potree pointcloud data then process on that
I want to load all points on the screen where camera is or load all points from the pointcloud and then I want to raycast on that.
problem is when I raycast on that sometime if points are not loaded ...
- 103
1
vote
1
answer
43
views
trouble dynamically changing the value of parameter in js
What I want is: when the mouse enters the body of the website, the cursor becomes visible; and when it is out of the webpage, it should not be visible.
I'm trying to update the values passed to the ...
- 11
1
vote
0
answers
14
views
Handling the onDoubleClick Event in React and the library Three
I am working with a 3D model, and I want that when I double right-click on an object, the object gets centered on the screen. How can I do this? I have this code, but when I am far away from the ...
- 11
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
0
answers
56
views
UV Scaling and Mesh Boundary Alignment in Fabric.js and Three.js
I’m currently working on a project using Fabric.js and Three.js, and I have a few questions:
UV Scaling (Pixel-Perfect): What steps should I follow to scale UV maps correctly in Fabric.js and ensure ...
1
vote
1
answer
138
views
Why does importing GLTF in react project gives different result than gltf-viewer?
I made two bars and made a sort of a transparent shader in cycles. I baked the normal maps and exported as .glb.
In the gLTF viewer https://gltf-viewer.donmccurdy.com/ it shows perfectly:-
in gLTF ...
- 11
1
vote
0
answers
41
views
when page is resize the page becomes blank three js
import * as THREE from 'three';
import "./style.css"
//scene
const scene = new THREE.Scene();
//create our sphere
const geometry =new THREE.SphereGeometry(3,64,64);
const material = new ...
- 11
1
vote
1
answer
385
views
Web GL won't load suddenly. Is this a hardware issue? I just got a new laptop within the last month
screenshot of issueI've been following a threejs tutorial for a long time now and have never had this issue. Just got a new laptop about a month ago and I was following a tutorial and returned to ...
- 11
0
votes
1
answer
1k
views
Difficulty in Loading and Visualizing Point Cloud Files in Various Formats and Implementing Interactive Cutting Feature
I'm currently working on a project where I need to load point cloud files of various formats (mainly LAS, LAZ, PLY) and visualize them. Specifically, I've managed to load PLY files using Python's ...
- 1
1
vote
1
answer
209
views
Shadows not casted/received with HDR environment texture in Three js
I am new to three js and I’ve been working on a project where I want to cast a shadow of the import 3D model which is download from this link also download the HDR file from the link free pack.
As per ...
- 13
1
vote
0
answers
170
views
Is there a way in Flutter to customize 3D object with Text Overlay or Text Engraving?
I need to find a way to create a Flutter mobile app with 3D objects that can be configured with text overlay or text engraving.
I found that one: https://sbcode.net/threejs/engraving/ but it seems ...
- 11
0
votes
1
answer
85
views
How can I change the rotation point of the object?
I put a hamburger model on the site using Three.js. As the site goes down, the hamburger rotates in various ways. In one place, it should rotate around itself at an angle of approximately 45 degrees.
...
- 1
0
votes
1
answer
399
views
How do I add collision to an imported gltf object
I am new to three.js. How would I add collision to an object/mesh that was created and imported from Blender (gltf)? For example, let's say I imported a building and I want to walk around that ...
0
votes
1
answer
501
views
How can I increase the width of a LineBasicMaterial?
I want to add more thickness to the edges of my geometry, but I can't achieve it. This is my example code:
const SquareEdges = ({ geometry }) => {
const mesh = useRef();
useFrame(() => {
...
- 191
0
votes
1
answer
204
views
Three.js plane color is darker when adding lights
import * as THREE from 'three';
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js';
import * as dat from 'dat.gui';
const renderer = new THREE.WebGL1Renderer();
renderer....
- 1
0
votes
0
answers
40
views
The model which loaded from file was seperated when moving in ThreeJS?
I used ThreeJS to load the 3D model, but when I moved it, it did not move the whole model, it moved separately. How to fix this problem?!!!
Future < three.Object3D > loadObjWithMtl(String ...
- 11
0
votes
0
answers
49
views
Problems with using Raycaster to detect an Object in Three.js
I am a software engineering student and i am developing a simple game. I want to add a feature where when i click on a door a floating tip pops up with the name of the rooom that it gives access to.
...
- 21
0
votes
1
answer
149
views
How can I achieve a wireframe with squares?
I am working on three.js. I added a plane, set the wireframe to true, and I want an effect of squares within this plane. Right now I have a diagonal line within the squares (because its two triangles ...
- 1
2
votes
0
answers
187
views
R3F issue importing GLB with animations from ReadyPlayerMe and Blender
I exported a character from readyplayer.me as glb, which works fine in R3F.
I imported the model into Blender and transformed it into a FBX for mixamo.
After I selected the animations I liked I ...
0
votes
1
answer
38
views
Error: Object not instance of THREE.Object3D
I want to add an fbx model which I have downloaded from adobe mixamo. But when I tried to run the code it just shows this blank screen with this console error.
I am sharing my code below:
import * as ...
0
votes
1
answer
188
views
How do I render two scenes on top of each other in THREEJS
How do I properly set the effect composer using threeJS to render two scenes on top of each other? When I try it, the second one is always clearing the first. I am using autoclear = false in the ...
0
votes
1
answer
53
views
Three js a just rotation camera with a correct position
This my code return image is:
const box = new THREE.Box3().setFromObject(model);
const size = box.getSize(new THREE.Vector3()).length();
const center = box.getCenter(new THREE.Vector3());
camera.near ...
1
vote
0
answers
130
views
multiDrawElementsInstancedWEBGL / select geometry to render using LOD
I'm looking for answer regarding the multiDrawElementsInstancedWEBGL api on the web, I'm hitting a wall on something and this is quite frustrating, and really afraid this could confirm my darkest fear ...
- 385
0
votes
1
answer
2k
views
Cant enter VR Mode from Browser | Vive Pro, threejs
I am stuck at developing a threejs VR project. If I look at https://threejs.org/examples/, the Button shows "VR not supported".
I can handle and debug via WebXR Extension. Connecting with ...
- 1
1
vote
0
answers
52
views
How to display DecalGeometry from ThreeJs on Specific Mesh
I have this Mesh:
The specific mesh named OCounter
and I want to display the Decal on the front of the mesh.
I tried this:
textureDecal.side = THREE.DoubleSide
const euler = new THREE.Euler(0,0,...
- 19
0
votes
0
answers
42
views
i want to export a function in a javascript file so i can use it in another file but i am getting the error "export 'startConsume' is not defined"
i was trying to export function from this file to another file but then i am not able to do that .here is the code I want to export the function from but then whe i try to use an export at the end of ...
0
votes
1
answer
164
views
I am getting" Invalid hook call. Hooks can only be called inside of the body of a function component. when i am trying to add an object to a scene"
I am using threeJS in react and i am trying to add an object into my scene to have some specific functions that update regularly.
Here is my code for the object:
import React, { useRef, useEffect } ...
1
vote
1
answer
590
views
Play multi animation with model viewer , using mixer instance
i am trying to play multi animations in parellal since package doesnt support that , i am trying to access instance of mixer from scene with the following code
const $scene = Object....
- 31
0
votes
1
answer
98
views
Mixed Content Error when using threejs STLLoader to request a file from server
I am trying to load a STL file from my server on Render.com running a Flask app with Gunicorn using the threejs STLLoader but am getting the following error in browser only on some devices.
Mixed ...
0
votes
1
answer
48
views
Without Zoom Raycaster not Working on Threejs
I am using threejs boxgeometry. In boxgeometry I used label(It is also a 3D cube which looks as label). I'm using raycaster as the onclick function for the 3D cube(label).
When I click on that cube(...
- 33
0
votes
1
answer
92
views
How to detect a THREE.Line whether lies on between THREE.Line's start and end points or not in ThreeJS?
How to detect a THREE.Line whether lies on between THREE.Line's start and end points or not in ThreeJS ?
I have tried folling code:
function checkLineOverlap (start1: Point, end1: Point, start2: Point,...
user16938897
0
votes
1
answer
119
views
Threejs and wp integration
I want to use threejs with wordpress cany anybody tell a step by step way to do so?
I got a way to include js in wordpress but unable to import threejs error showing cannot use import outside module
1
vote
1
answer
241
views
Threejs 3D model implementation on Drupal
I am completely new to Drupal and Three.js, and I need help with implementing a Three.js 3D model in my Drupal website. I have created the 3D model using a 3D modeling software and exported it as a ....
- 11
1
vote
0
answers
44
views
Crack line in GLTF from texturing image
GLTF image
After UV unwrapping and texture painting the object looks fine but I am seeing a crack line If I see it from the certain angles or when I zoom it out. Looks fine when zoomed in.
I tried ...
1
vote
1
answer
495
views
Three JS adjust texture on GLTF model to show entire texture
When applying a texture to a flat GLTF model (Floor) I only get a single colour from the texture rather than the desired yellow & black stripe effect. Any help is much appreciated!
Could it be a ...
- 89
3
votes
1
answer
348
views
Not able to remove EventListener in Typescript
I am trying to remove an eventlistener in typescript. I am adding eventlisteners in an if-statement. In the else-statement I am trying to remove these eventlisteners, but for some reason it does not ...
- 33
2
votes
1
answer
125
views
Equation of line from center of camera to plane in ThreeJS
I am working on a fork of threeJS editor and for a particular functionality, I need to get the world point where the center of camera is pointing at.
I believe that if I am able to get the equation of ...
0
votes
0
answers
35
views
How to draw 2 axes x,y in threejs?
In threejs we have AxesHelper to draw 3 axes x,y,z. Now i want to draw 2 axes x,y , so in threejs is there any method to support this.
Thank your.
- 1
0
votes
1
answer
33
views
I want to add custom ground material on my website using Meshphongmaterial
var groundMaterial = new THREE.MeshPhongMaterial( { color: 0xff43fee, specular: 0x360000 ,} );
groundMesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2000, 2000 ), groundMaterial );
...
1
vote
0
answers
67
views
Incorrect bone positions in Object3D after conversion to json
I want to export my scene (there is only one 3D humanoid object in the scene) and convert it to .json format. After that, I import that .json into threejs-editor. The result is that my model doesn't ...
- 92
0
votes
0
answers
92
views
Threejs Coordinates not matching with the coordinates of the Intesects of the Ray Caster
// Step 1
this.camera = new THREE.PerspectiveCamera(10,aspectRatio,0.0001,100000)
this.camera.position.x = 2;
this.camera.position.y = 2;
this.camera.position.z = 2;
// Step 2
this....
1
vote
0
answers
286
views
in ThreeJs's instancedMesh, is there any way to add/remove instance?
I'm considering this problem for several days. still, I have no a beautiful answer.
How can i delete an instance between 0 and the limit? Someone recommended using updateRange. but, i still need move ...
- 347
0
votes
1
answer
492
views
ThreeJS not loading in firefox
I'm using ThreeJS to present 3D files online. It works like a charm on Chrome and MS Edge, but on Firefox I get:
Uncaught TypeError: Error resolving module specifier “three”. Relative module ...
- 87