Questions tagged [three.js]
Three.js is a lightweight cross-browser JavaScript library/API used to create and display animated 3D computer graphics on a Web browser. Three.js scripts may be used in conjunction with the HTML5 canvas element, SVG or WebGL.
three.js
21,094
questions
-3
votes
0
answers
10
views
Title: Full Stack Web Development Assignment-Shadow and Z-Lock for Cube using React.js and Three.js [closed]
Title: Full Stack Web Development Assignment-Shadow and Z-Lock for Cube using React.js and Three.js
Objective:
The objective of this assignment is to check the technical skills in building a web ...
0
votes
0
answers
6
views
Problem picking up with interactive camera and orbitcontrols after amination camera moves "camera view"
I have a viewer that reads/displays glTF using Three JS. Using orthographicCamera/OrbitControls the user can pan around the 3d scene. When I play an animation that contains a camera movement I want to ...
0
votes
0
answers
12
views
Three.js how to determine if backfacing in a RawShaderMaterial that's double sided and transparent?
In Three.js, I'm trying to create a fresnel based glowing outline on a sphere, with a RawShaderMaterial, on a double sided transparent sphere.
The RawShaderMaterial GLSL is a fairly straightforward ...
0
votes
0
answers
8
views
How to build a codesandbox project to android apk?
guys!
I am given a demo project at codesandbox.io, and I need to build it into android apk, how could I do that?
The project has lots of dependencies that I don't know.
I know some Javascript and DOM, ...
0
votes
0
answers
8
views
openbim-components with node js
How can I use the openbim-components library in Nest.js or at least in Node.js?
All I need is to convert a file in ifc format to JSON and frag for optimization on the frontend. An example can be found ...
0
votes
0
answers
14
views
3D scene doesn't have shadows even though I enabled castShadow and receiveShadow
Enter image description here
Hi,
I have an issue with my shadow. I am enabling the shadow in the code, but I don't know why my 3D model is not receiving this shadow. You can see the image or the link ...
0
votes
0
answers
10
views
How to implement Vertex Shader in React Three Fiber to transform in XY plane based on Z height coordinates
Goal
I want to dynamically adjust the geometry of a 3D model based on the position of a tracked point (e.g., "headPosition"), with the nature of this adjustment depending on the model's ...
0
votes
0
answers
12
views
Cannon.js Three.js create inverted cylinder barrier
I have a dices game just like that ( https://tympanus.net/codrops/2023/01/25/crafting-a-dice-roller-with-three-js-and-cannon-es/ ) and i am trying to put them inside a circle so the will not go out of ...
0
votes
0
answers
22
views
Using WebGPURenderer in A-Frame
Is there a way to replace the default WebGLRenderer of the aframe scene with a WebGPURenderer, now that the official class is present in the threejs library?
I tried naively repacing the renderer with ...
0
votes
0
answers
12
views
Three-mesh-bvh stop drag after collision
I’m using three-mesh-bvh to check collision between 2 object in Threejs.
The function intersectsGeometry working for collision.
I edited the TransformControl.js to check collision when dragging, like:
...
0
votes
0
answers
16
views
Running three js without local server?
I am currently working with WPF project. My task is to display 3d models that generates in real-time with the help of CefSharp.
We already have the same project but in 2d. It only uses vanilla JS and ...
-1
votes
0
answers
10
views
Sunlight with suncalc tool. I have a issue to set the sun position coordinates [closed]
I'm working on a small Three.js project that requires realistic sunlight simulation based on the sun's position throughout the day. My application needs to adhere to specific versions of dependencies ...
0
votes
0
answers
23
views
Prevent raycaster effect using html/css
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/[email protected]/build/three.module.js",
"three/addons/": "https://...
-2
votes
0
answers
18
views
Algorithm for 3D Bin Packing Problem with Three.js [closed]
This code defines a React component that simulates the arrangement of boxes of different sizes and colors inside a three-dimensional (3D) container.
const objects = [
{ width: 2, height: 2, depth: 2, ...
0
votes
0
answers
18
views
Openstreetmap data in AR.js + Three.js
In location-based AR.js+Three.js how would I go about creating markers - for example building outlines or street paths - based on OSM data?
The examples I found seem to use measurements in some sort ...
0
votes
1
answer
17
views
Incorrect viewport area when using WebGlRenderer.setViewport in ThreeJS
I am trying to integrate a blender-like helper gimble into my project.
Here is an MRE, I just added the grid layout to an existing sandbox, and imported the gimble from threejs examples. https://...
0
votes
0
answers
14
views
Property 'geometry' does not exist on type 'Object3D<Object3DEventMap>'
I have this component in three.js, typescript, next.14
"use client";
import React, { useRef } from "react";
import { useGLTF } from "@react-three/drei";
import { useFrame ...
0
votes
0
answers
12
views
Three js Shadow casting with 3dmLoader
I'm currently working on rendering a 3D model from a 3dmFile using the Rhino 3dmLoader parser in Three.js. I've set up lighting for the scene, including ambient, hemisphere, directional, and point ...
0
votes
0
answers
17
views
GLTF model is not getting dragged together in three js
i created a bed model using blender and i imported it as a gltf model to use it in my three js code, it does get imported but when i applied the dragcontrols on it but i noticed that the default drag ...
0
votes
0
answers
14
views
Threejs .glb loading textures issue, texures not loaded
I am new to the three.js world. I created a 3d model with this AI https://lumalabs.ai/genie and exported in .gbl format. This file extension should contains also textures and shaders informations. The ...
0
votes
0
answers
11
views
Explicitly define the page height in ScrollControl
I'm currently using the ScrollControl component from react-three/fiber to build a smooth scrolling experience. However, the height for each page is fixed as 100% of the viewport height, which causes ...
0
votes
1
answer
15
views
Problem importing a .glb file using import.meta.url in Three.js using parcel bundler
Hi I startet to make a little Game for me and my Friends with Three.js. I watched many tutorials on how to import .gltf and .glb files. Im using the parcel bundler and the command: npx parcel ./src/...
0
votes
0
answers
20
views
How to proper rotate object with a 45-degree angle using OrbitControls?
I'm working on a Nextjs project with react-three-fiber and react-three-drei. I want to rotate the object with a 45-degree angle using OrbitControls component, I tried using rotation property but didn'...
-3
votes
0
answers
22
views
Distribution of n number of equi-distant point in polygon
I am creating a home styler using Three.JS. After creating a room that I want to allow user to generate x numbers of lights inside the room. The number of lights can be set by user. I want to ...
0
votes
0
answers
18
views
Can I develop a WebXR with ARCore API for IOS?
I have the following code below that works perfectly on android devices, but when I try to run on an IOS device, nothing happens when I click the button to start the ar session.I tried to get help ...
0
votes
0
answers
59
views
I want to resize a Plane geometry from the corner points. Three.js
I want to resize a Plane geometry from the corner points. It works fine since rotation is not included in my calculations inside the function. When the rotation goes above a certain value (e.g. above ...
1
vote
1
answer
32
views
How can I make a cube in Three.js having the 4 vertex of the base and a given height?
I have this json with the base coords, I need to render a cube in Threeejs out of it. The height is a given constant (let's say 1 in this case).
{
"points": [
...
0
votes
1
answer
23
views
rounding errors in threejs chrome vs firefox
I have a plane in a three JS scene with a certain position and rotation.
I am sending a raycast towards this plane, and then I am in essence projecting an object towards it. It has worked great until ...
0
votes
0
answers
13
views
how to correctly build three.js website to load STL Files
Hi Community,
I am building a website with Three.js for viewing STL file. Initially, I successfully managed to run the website on my localhost, where STL files were loading and displaying correctly. ...
0
votes
0
answers
12
views
Three.js - Avoid points clipping due to camera angle
Using Three.js and React, I am rendering a Waveform .obj with a wireframe and points on each vertex.
While rendering successfully, the points are seemingly being clipped, depending on the camera angle....
0
votes
0
answers
15
views
Why can't I load .gltf model in WebXR Ar Core base example?
I followed this Google's tutorial: https://developers.google.com/ar/develop/webxr/hello-webxr?hl=pt-br and successfully made a scene that recgonizes planes in real world, displays a reticle above it ...
1
vote
1
answer
25
views
How to apply X3D clipPlane to only one object in the scene without affecting others?
I am working on an application using X3D and would like to apply a clipping plane (clipPlane) to only one object in my scene, without affecting other objects. However, it seems that when I define a ...
0
votes
0
answers
14
views
How can I display nii.gz segmentation data into 3D model on website?
I tried to use three.js to display nii.gz images but it was a headache.
I don't know what I did wrong so I tried another method which is generate the 3D model using python. I was using MyVi but there ...
2
votes
1
answer
38
views
Three.js, I updated from r152 to r153, why are the particles brighter?
Is there any way to restore the previous effect without downgrading it?
After updating to version r153, the particle effect is not the same and I can't find a solution to this problem from the ...
0
votes
0
answers
27
views
How to make FragmentHighlighter to highlight an element with pure highlighter's color in openbim-components (IFCjs) + THREE.js
I using openbim-components (IFCjs) library alongside with THREE.js and face a problem that a tool for highlighting in openbim-components library (FragmentHighlighter) just adds a new mesh (with a ...
0
votes
0
answers
16
views
Enabling transparency on objects rendered to render texture makes them disappear completely on iOS - React Three Fiber
In React Three Fiber, I'm rendering objects to a render texture in a separate scene using an orthogonal camera, and I want to use that texture back in my main scene in a custom shader. I have this all ...
1
vote
1
answer
30
views
rotate hdr map in three.js
i have set x-axis as up axis in my three.js scene. Now all env maps (hdr) are wrong oriented. How can I fix? I tried by rotating the hdr file, but that does not work.
this.pmremGenerator = new THREE....
0
votes
0
answers
14
views
CSS2DOBJECT how to set its render order to be occluded by other mesh
As many others implemented the css2dobject for setting markups in the scene, I decided to implemented it too. It turns out that the object is always visible even if its occluded by other meshes as ...
0
votes
0
answers
16
views
Not loading model in three Js
Im doing my project with Python(Django) and three.js, I've got the following code. It should animate pyramid and when the real model is loaded change the pyramid by it. But when object is loaded I ...
0
votes
0
answers
11
views
three js merged geometry vertices
const wallGeometry = new THREE1.BoxGeometry(0.2, 5, 2); const wallMaterial = new THREE1.MeshStandardMaterial({ color: 0x00ff00 }); const wallMesh = new THREE1.Mesh(wallGeometry, wallMaterial); const ...
0
votes
1
answer
48
views
openbim-components | OrthoPerspectiveCamera is slow/stuck when I zoom in the model
I have an issue using the OrthoPerspectiveCamera in my App (from openbim-components package). When I am zooming into my model, it automatically switches into FirstPerson mode. And then, it becomes ...
0
votes
0
answers
17
views
react three fiber gsap transition menu
Im using R3F + GSAP for animating box position. Using Raycaster I set a white box object to indicate when a menu item (box) collides with it so the animation would start.
I would like to achieve the ...
1
vote
1
answer
27
views
Cannot see tween opacity changing effect in threeJS
<script type="importmap">
{
"imports": {
"three": "https://unpkg.com/[email protected]/build/three.module.js",
"three/...
0
votes
1
answer
32
views
Rotating GLB in threejs
I am attempting to make my 3d object rotate around the Y axis by itself and without disabling the user ability to scale and custom rotate the object with his mouse.
What I did is something like this:
...
0
votes
1
answer
83
views
using Three.js in Nextjs 14 - ReferenceError: document is not defined
I know this specific error has been asked here multiple times but i think this situation is unique enough to deserve its own post.
So i Just started thinkering with three.js in nextjs 14.
Everything ...
0
votes
1
answer
63
views
Making canvas background transparent
Here is my HTML, CSS, JAVASCRIPT (THREE.JS) code.
Can you please analyze the code and check for my desired output that i put in my title.
//**HTMLCODE**
<!DOCTYPE html>
<html lang="en&...
0
votes
0
answers
25
views
Have a realistic metallic rendering with three.js
On three.js, I have difficulty finding the best solution to render a metallic material. I tried several methods including these: https://youtu.be/aJun0Q0CG_A?feature=shared and also the one used here: ...
0
votes
0
answers
26
views
How to merge multiple imported GLTF object into one object in three.js?
The problem is that the website is laggy, becuase I am rendering thousands of objects. I am trying to solve this problem to get better UX.
I am importing 1 GLTF object (myModel). I also have a json ...
0
votes
1
answer
20
views
Difficulty in synchronizing scrolling between a canvas with and the rest of the page content
I'm currently working on a project that involves a Three.js canvas with OrbitControls for interactive 3D visualization. However, I'm facing difficulty in synchronizing scrolling between the Three.js ...
0
votes
0
answers
12
views
how to flip Html in r3f
I placed div with react element in Html from drei and the element doesn't respond on scroll and flipped.
<mesh
geometry={nodes.main_monitor_screen.geometry}
>
<Html
...