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,186
questions
172
votes
3
answers
140k
views
Transparent background with three.js [duplicate]
The code work, but I'm having a problem setting transparent background to the canvas with three.js. I use:
Background.renderer.setClearColor(0xffffff, 0);
But then the background gets black. How do ...
- 1,864
169
votes
7
answers
211k
views
Changing three.js background to transparent or other color
I've been trying to change what seems to be the default background color of my canvas from black to transparent / any other color - but no luck.
My HTML:
<canvas id="canvasColor">
My CSS:
&...
- 3,319
163
votes
8
answers
64k
views
Learning WebGL and three.js [closed]
I'm new and starting to learn about 3D computer graphics in web browsers. I'm interested in making 3D games in a browser. For anyone who has learned both WebGL and three.js...
Is knowledge of WebGL ...
- 2,533
88
votes
11
answers
82k
views
Mouse / Canvas X, Y to Three.js World X, Y, Z
I've searched around for an example that matches my use case but cannot find one. I'm trying to convert screen mouse co-ordinates into 3D world co-ordinates taking into account the camera.
Solutions ...
- 6,918
85
votes
4
answers
99k
views
Transparent objects in Three.js
I am trying to write a small program in Three.js that displays two spheres, one inside the other. The radius of sphere 2 is supposed to oscillate between 0.5 and 1.5 while the radius of sphere1 is ...
- 2,396
80
votes
6
answers
97k
views
How to stop a requestAnimationFrame recursion/loop?
I'm using Three.js with the WebGL renderer to make a game which fullscreens when a play link is clicked. For animation, I use requestAnimationFrame.
I initiate it like this:
self.animate = function()...
- 32k
76
votes
2
answers
178k
views
Error message "Uncaught TypeError: Cannot destructure property 'basename' of 'React2.useContext(...)' as it is null" [duplicate]
I'm facing
Uncaught TypeError: Cannot destructure property 'basename' of 'React2.useContext(...)' as it is null.
In the Link component of the code:
import React, { useEffect, useState } from 'react';...
- 781
76
votes
7
answers
154k
views
Rotate camera in Three.js with mouse
I have quite a few objects in my scene so rotating all of them could be a pain. So what is the most easy way to move camera around origin on mouse click and drag? This way all the lights, objects in ...
- 27.7k
76
votes
10
answers
86k
views
How to detect collision in three.js?
I am using three.js.
I have two mesh geometries in my scene.
If these geometries are intersected (or would intersect if translated) I want to detect this as a collision.
How do I go about ...
- 1,806
73
votes
3
answers
112k
views
How to find the unicode of the subscript alphabet?
I've found some letters but i need to find others such as "c", "m", "p", is this even possible?
- 839
72
votes
8
answers
159k
views
How can I rotate a mesh by 90 degrees in ThreeJS?
I have a mesh that I want to rotate by 90 degrees inside Three JS.
Here is the image of the current situation:
I want the selected mesh to be rotated parallelly to the large mesh.
I have tried ...
- 652
72
votes
13
answers
155k
views
ThreeJS: Remove object from scene
I'm using ThreeJS to develop a web application that displays a list of entities, each with corresponding "View" and "Hide" button; e.g. entityName View Hide. When user clicks View button, following ...
- 959
71
votes
6
answers
118k
views
Using textures in THREE.js
I am starting with THREE.js, and I am trying to draw a rectangle with a texture on it, lit by a single source of light. I think this is as simple as it gets (HTML omitted for brevity):
function ...
- 20.4k
71
votes
5
answers
64k
views
threejs how to rotate around object's own center,instead of world center
two objects in the scene.
the cube rotate axis should be the cube's center,that's my expect.
but the shoe model's rotate axis is the world's y axis.
my original code is.
cube.rotation.y += 0.01;
shoe....
- 1,332
61
votes
5
answers
88k
views
Three.js Resizing Canvas
I have been working on a 3D project where we show 3D object in the web browser using Three.js Library.
The problem is:
1st the model is displayed in a small dom element or when the browser window ...
- 3,901