Obtaining the dimensions of a mesh (Three.Mesh) can be done using the following code: mymesh.geometry.computeBoundingBox() var bbox = mymesh.geometry.boundingBox; var bboxWidth = bbox.max.x - bbox.min.x; var bboxHeight = bbox.max.y - bbox.min.y; var bbo ...
Currently, I am working on a THREE.js scene where I need to prevent uploading multiple files into the scene simultaneously. The setup involves using Angular to implement the three js scene and canvas as a factory to maintain only one instance of a canvas a ...
I am utilizing the rotationRate data obtained from the devicemotion eventListener to manipulate a three.js scene by tilting. The scene does respond to the data accurately in terms of angle adjustments, but it produces an unsmooth motion effect. Is there a ...
As I work on creating a virtual tour using 360 images, I am looking to include hotspots or div elements within the image that can be clicked. How can I store data in my database from the event values such as angle value, event.clientX, and event.clientY wh ...
I have a challenge - I am trying to create an npm package that generates procedural objects for three.js. The issue I'm facing is how to properly include three.js in my code. I attempted to establish a dependency and use something like const THREE = requir ...
Can you provide guidance on setting up an aoMap for a standard THREE.Geometry object? Is there a demo available to reference? var uvCoordinates = geometry.attributes.uv.array; geometry.addAttribute('uv2', new THREE.BufferAttribute(uvCoordina ...
Currently, I am in the process of creating a webgl application. While using mongoDB for my database and three.js as my webgl library has been helpful during development, I find myself unsure about which server-side technology to incorporate into the appl ...
My model is rotating on the X axis, but the center of rotation is not aligned with the axis. The code for rotation is quite straightforward: model.current.rotation.x += 0.016; (axis and speed) However, I am struggling to define the actual axis of rotation ...
When attempting to utilize three.js OBJLoader - (docs) with vue-threejs and Webpack, I encountered some challenges. var OBJLoader = require('three-obj-loader') OBJLoader(THREE) var loader = new THREE.OBJLoader() loader.load( require('./sphere.obj'), func ...
Having trouble using drei materials and other features like MeshWobbleMaterial, MeshDistortMaterial, or ContactShadows? You may encounter errors such as: react-three-fiber.esm.js:1383 Uncaught TypeError: Cannot read property 'getState' of null at useFrame ...
My website functions as a digital library for a particular niche of 3D models. However, I've noticed that the performance on mobile devices when using modelviewer to display glb files is quite poor. Frequently, the page crashes and reloads unexpectedly, ...
I'm just getting started with Three.js and I'm experimenting a lot. Although I'm new to Javascript as well, the issue I'm facing seems to be more about variable scoping and callback function protocols than it is about Three.js itself... ...
I'm having trouble rendering a simple sphere in three.js because it's appearing distorted (looking more like a vertical stick). Below is my HTML code: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
Is there a way to dynamically load files in a WebView from the local file system or assets folder? I've been able to fetch resources from a server using ajax, but struggling to figure out how to load local resources. DETAILS: I am currently loading a ...
As I work on creating a portfolio using three.js, I've encountered an issue with my animation sets not playing after triggering an event. Initially, the code worked fine, but now I keep receiving a series of warnings and the code doesn't run at all. THREE. ...
When it comes to working with ES6, my workflow involves using Babel and babel-plugin-transform-es2015-modules-system.js specifically to transform module import/export for compatibility with system.js. I rely on a "green" browser for most ES6 features excep ...
I am currently delving into the world of three.js and working on my first project. I am following the example code provided on the three.js website. Everything runs smoothly when I have three.js stored in a folder like: js/ directory However, I am enco ...
My current project involves working with a video that has been segmented into six parts. Here is a screenshot of the input video. The goal is to project these 6 videos onto the six faces of a cube using JavaScript: <!DOCTYPE html> <html> &l ...
I have a question that pertains to my webapp development. I am currently utilizing Angular Js (v1.5/1.6) and I would like to incorporate some minimalistic 3D animated models by integrating Three Js. Although I have attempted to configure certain aspects, ...
I've successfully implemented a three.js scene on my website where users can drag to rotate an object. However, I don't want the scene to take up the entire webpage. I tried adjusting the field parameters with the following code: renderer.setSize(400,400) ...
I am attempting to integrate a Three.js scene into a jQuery modal window. The objective is to utilize the Three.js scene in a larger window size. This scene should be displayed after clicking on an image that represents the scene in a smaller dimension. Y ...
Working on a project that combines three.js and typescript, I encountered an issue while attempting to color a sphere by raycasting to it. The problem arises when the object moves - the raycast doesn't seem to acknowledge the new position of the object and ...
Three.js is an incredible library that offers thorough documentation and functions perfectly. I am currently attempting to display a plane with trackball control inside a div that resizes according to the window or browser size. However, I am encountering ...
After using the sapling addon in Blender, I created a tree similar to the example shown here. I then exported it to json using three.js for display in WebGL. However, only the foliage of the tree is visible and the trunk and branches are missing. Upon ...
I recently posted a question on Stack Overflow inquiring about how to input code into an iframe without using a file or URL. While I was successful with simple cases like <h1>Hello World</h1>, my ultimate goal is to integrate three.js into thes ...
When attempting to load files selected by users in an HTML input, I encountered a problem with the loader expecting a URL in Linux style. I have tried various methods such as using a blob as a URL object, providing raw data to the FBX loader, and even usin ...
I am currently facing an issue with the dimensions of a three-fiber canvas. I require specific fixed width and height for the canvas, but I cannot figure out how to adjust these parameters. Although I've tried changing the sizes using style={{width: 100p ...
How can I rotate a cube around all three axes (x, y, z) using the code snippet provided below? ` <html> <head> <title>CM20219 – Coursework 2 – WebGL</title> <meta charset="utf-8"> < ...
My layout includes a div with a scene that looks great initially; however, as soon as I start moving or resizing the window, the scene overflows the boundaries of the div and goes haywire, almost filling the entire window. Are there any techniques or solu ...
I'm currently working on converting an equirectangular panorama image into cubemap format using NEXT JS. The scene is being rendered but I'm facing an issue where the background isn't applying, and surprisingly, no errors are showing up! import { useLoade ...
I have a unique project with a dynamic word cloud feature displaying random words. My goal is to customize the code so that the word cloud can showcase specific words from a list of my selection, like: let WordList = ['Apple', 'Banana', 'Orange', 'Grape', ...
I have been working on a website using React and Next.js, and I am trying to incorporate a 3D model into my site. After downloading a file in glb format, I noticed some discrepancies between the model I saw on this website and the one displayed on my own w ...
Exploring three.js for the first time and experimenting with displaying a basic 3D model using three js, Vue, and Laravel. The 3D file can be found at /public/files/Tree1.3ds. Need help rendering the file in the Vue component with three js. Initially tried ...
Despite following the react-three docs and various examples, I am struggling to get drei useGLTF to function properly in my project. I have a basic Next|React|react-three/fiber project that I built from scratch. My goal is to load the astronaut example an ...
As a beginner to three.js and 3D programming in general, I recently used three.js to draw a sector. However, I am facing an issue where I can only see the object in one direction but not in the opposite direction. It appears that the same phenomenon is h ...
While working on a Vue project with threejs, I encountered an error similar to the one described here. The issue arose when attempting to generate a text geometry despite confirming that the path to the typeface font is accurate and in json format. ...
I'm facing a challenge with incorporating the three.js library (installed via npm) to display 3D models on the client side within my nuxt.js application. Despite multiple attempts, I seem to be hitting a roadblock with the import not functioning properly, ...
Excuse the SEO-friendly title, but I want to ensure that everyone can access the issue I'm currently working on. For those interested in customizing the appearance of dat.gui, you will need to download the source and include it using require.js following t ...
I encountered an issue TypeError: material.customProgramCacheKey is not a function The error pops up when I invoke the function this.animate(). However, no error occurs when the URL is empty. Where could this error be originating from since I don't ...
After creating a Vue.js integrated with three.js application, I encountered an issue with the canvas getting duplicated every time I opened the view containing the three.js application. The canvas remained visible below the new view, as shown in this image ...
Currently, I am developing a small web application that utilizes three.js. However, I have encountered an issue: I created a prototype with my three.js content and everything functions correctly (the canvas size in the prototype matches the browser window ...
My goal is to integrate a 3D model as a custom layer on Mapbox using Three.js, alongside adding a 3D terrain on the map. I have followed the documented examples for incorporating a 3D model and 3D terrain from Mapbox. The issue I'm encountering is that th ...
Currently, I am experimenting with creating multiple 3D models of cubes with varying textures on the faces using react-three-fiber. My goal is to export these models as gltf files. I have been referencing this useful resource on Stack Overflow for guidanc ...
I have come across examples in three.js that use: renderer = new THREE.WebGLRenderer( { canvas: document.querySelector( 'canvas' ) } ); This relates to a <canvas></canvas> element. On the contrary, there is another method: rendere ...
I am currently working on a project that involves using the three.js editor source code available for download on the three.js website. As part of this project, I am required to adjust the orientation of the axes to align with standard airplane coordinate ...
I'm currently working with Three.js in my Angular Application. I am attempting to display a cup (OBJ file) with a texture applied to it. The issue I am facing is that the texture only appears when I rotate or zoom the object. Otherwise, the object app ...
Currently, I am in the process of learning three.js and have successfully created basic 3D models using hardcoded values. My goal now is to retrieve these values from a database that I have set up in MSSQL Server. These x, y, and z parameters are stored ...
I am attempting to utilize a library installed via npm in the Go template. By running 'npm install three', I have successfully installed the required three libraries, which are saved in the root folder as depicted in the provided screenshot below. https: ...
First off, here's a visual representation of my objective: https://i.stack.imgur.com/5Uo1h.png (Credit for the photo: ) The concise question How can I use HTML5 video & canvas to execute a 4-point perspective transform in order to display only ...
When I am dynamically loading Three.js, the variable THREE is not found. I have created a React project using create-react-app and copied the three js file into the public folder. Here's the directory structure: src public ├── js │ └── thr ...
I'm utilizing the CSS3DRenderer to render HTML on FBX 3D objects. Everything seems to be working well, except that when I rotate my scene, the HTML becomes visible through the 3D objects as if they were transparent. I am relatively new to Three.js and woul ...
After importing an object from blender and setting every mesh to cast and receive shadows, I noticed that the rendered shadows are incorrect. Even after merging the meshes thinking it would solve the issue, the problem persisted. It seems like using side: ...
Having issues with the Canvas component in react-three-fiber not functioning correctly in my next app. I am new to react-three-fiber and Next.js, and when I try to use the Canvas component, I encounter the following error: ./node_modules/three/build/three ...
Every time I attempt to execute this code within my React application, it fails with the following error message: SyntaxError: Cannot use import statement outside a module import React, { useRef, useEffect } from 'react' import { extend, useThre ...
I am still learning about threejs and have mostly worked on projects using a dev server (vite) locally. This setup limited me to accessing my projects only from the browser on my computer. Here is how I typically include my files in these projects: <bod ...
My problem involves using the vantajs wave library. I want to figure out how to make the waves continue rendering on a specific CSS selector even after clicking through the tablinks of my react app. However, I encounter an error when using Brave browser th ...
I am facing an issue with my website that features a configurable 3D object with various properties. Whenever I reload the div containing the 3D object to reflect new properties, the script data keeps adding on. This not only slows down the functionality a ...
I'm facing a challenge with my Vue Cli app where I am attempting to use Three.js for rendering 3D objects within it. The issue arises when I attempt to load an image to utilize as a texture. let scene = new Three.Scene(); const spaceTexture = new Th ...
I am facing an issue with resetting the position of my latest Object in three.js. Initially, my code consists of the following: function onDocumentMouseDown( event ) { event.preventDefault(); var vector = new THREE.Vector3( mouse ...
Yesterday I posted a question on StackOverflow about an issue with my code (Uncaught TypeError: THREE.MTLLoader is not a constructor 2.0). Initially, I thought I had solved the problem but now new questions have surfaced: Even though I have installed &apo ...
I recently started learning TypeScript and am currently using it for React Bricks. I've been working on rendering a 3D object with three.js, but I keep encountering the error mentioned above. I've attempted various solutions such as passing color ...