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
Filter by
Sorted by
Tagged with
-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 ...
viraj_hole's user avatar
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 ...
MarkTheMule's user avatar
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 ...
Andy Ray's user avatar
  • 31.1k
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, ...
ABYang's user avatar
  • 1
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 ...
TalisMan701's user avatar
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 ...
Kakisb Kakisb's user avatar
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 ...
jpa317's user avatar
  • 35
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 ...
Kyr Menios's user avatar
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 ...
Pietro's user avatar
  • 11
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: ...
Hungnn's user avatar
  • 176
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 ...
Elo Hell's user avatar
-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 ...
Kakisb Kakisb's user avatar
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://...
Oto Shavadze's user avatar
  • 41.7k
-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, ...
Faru Nuri Sönmez's user avatar
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 ...
simone's user avatar
  • 4,943
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://...
Blaine's user avatar
  • 606
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 ...
Yilmaz's user avatar
  • 43.4k
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 ...
Louay Dayekh's user avatar
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 ...
taha ayedi's user avatar
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 ...
Lorenzo Gasperoni's user avatar
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 ...
David Ho's user avatar
  • 247
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/...
Anton Nagler's user avatar
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'...
Ngo Trong Phuc's user avatar
-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 ...
Azmeer Hamas Ali's user avatar
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 ...
João Pedro S. Fernandes's user avatar
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 ...
Metehan Mutlu's user avatar
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": [ ...
Kronosaurus's user avatar
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 ...
munHunger's user avatar
  • 2,769
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. ...
Young Wang's user avatar
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....
Ryan Chiang's user avatar
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 ...
João Pedro S. Fernandes's user avatar
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 ...
Emmanuel Carvalho's user avatar
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 ...
MarioComputer's user avatar
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 ...
nano71.com's user avatar
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 ...
Daniel Kovalenko's user avatar
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 ...
Sam Strong's user avatar
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....
daniel's user avatar
  • 35k
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 ...
MiguelG's user avatar
  • 48
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 ...
Fores's user avatar
  • 1
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 ...
egemen yıldırım's user avatar
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 ...
Yannos's user avatar
  • 1
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 ...
Nate Ben's user avatar
  • 646
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/...
Oto Shavadze's user avatar
  • 41.7k
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: ...
Rudeus123's user avatar
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 ...
ruben's user avatar
  • 47
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&...
B ANURAG's user avatar
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: ...
thibaud's user avatar
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 ...
John's user avatar
  • 1
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 ...
Diced Mango's user avatar
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 ...
Tyubit's user avatar
  • 27

1
2 3 4 5
422