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
2,136
questions
24
votes
2
answers
18k
views
How can I render an 'atmosphere' over a rendering of the Earth in Three.js?
For the past few days, I've been trying to get Three.js texturing to work. The problem I've been having is that my browser was blocking textures from loading, which was solved by following the ...
user377628
47
votes
7
answers
47k
views
How to Fit Camera to Object
Using three.js I have the following.
A scene containing several Object3D instances
Several predefined camera Vector3 positions
A dynamic width/height of the canvas if the screen resizes
A user can ...
- 1,809
44
votes
5
answers
61k
views
THREE.js generate UV coordinate
I am working on importing a model into a scene using the THREE.js OBJ loader.
I know that I am able to import the geometry fine, because when I assign a MeshNormalMaterial to it, it shows up great. ...
- 1,401
21
votes
4
answers
16k
views
THREE.js Ray Intersect fails by adding div
My Three.js script runs fine when there is only one target div on the page (which holds renderer.domElement). As soon as I add another div with fixed height and width above the target div, ray....
- 2,378
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
34
votes
3
answers
28k
views
How to change the zOrder of object with Threejs?
I made a scene using the webgl renderer where I put multiple 3D objects that I can select and move. However when an object is selected, I'd like to draw its axes. No problem with drawing the lines to ...
- 393
21
votes
3
answers
55k
views
Three.js - Orthographic camera
I've working on an app which displays some 3D models. We load the models, create the meshes, add them to the scene...standard procedure. After the last mesh is added, we compute the bounding box in ...
- 1,125
13
votes
2
answers
16k
views
Three.js camera tilt up or down and keep horizon level
camera.rotate.y pans left or right in a predictable manner.
camera.rotate.x looks up or down predictably when camera.rotate.y is at 180 degrees.
but when I change the value of camera.rotate.y to ...
- 169
24
votes
2
answers
22k
views
Three.js - Width of view
Is there a way to find out the width of a rendered portion of the scene?
For example, if we have a mesh of width 100, but rendered with a certain level of zoom...how can I calculate the width of the ...
- 1,125
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
28
votes
3
answers
48k
views
Drawing a line with three.js dynamically
This is what I'd like to achieve (a modifiable polygon where the red circles are vertices) and I'd like to build the polygon dynamically.
When initiating the geometry as
var geometry = new THREE....
- 995
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
8
votes
1
answer
3k
views
THREE.js : 2xMeshes using same vector as position
Just did an update from r67 - r69 in ThreeJS and ends up having problems referring their positions to one (same) vector.
Before I did this which worked:
var vector = new THREE.Vector3(50, 50, 50);
...
- 446
3
votes
1
answer
2k
views
How does the calculation of the light model work in a shader program?
I am trying to read up this tutorial:
https://aerotwist.com/tutorials/an-introduction-to-shaders-part-2/
but I am not able to follow up. Basically the code creates a directional light by using ...
- 16.9k
43
votes
9
answers
139k
views
How to rotate a 3D object on axis three.js?
I have a great problem about the rotation in three.js
I want to rotate my 3D cube in one of my game.
//init
geometry = new THREE.CubeGeometry grid, grid, grid
material = new THREE.MeshLambertMaterial ...
- 2,180