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.
17,509
questions
863
votes
28answers
1.3m views
“Cross origin requests are only supported for HTTP.” error when loading a local file
I'm trying to load a 3D model into Three.js with JSONLoader, and that 3D model is in the same directory as the entire website.
I'm getting the "Cross origin requests are only supported for HTTP." ...
151
votes
8answers
52k 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 ...
134
votes
6answers
133k 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:
&...
125
votes
2answers
86k views
Transparent background with three.js
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 ...
70
votes
9answers
56k 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 ...
70
votes
6answers
106k 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 ...
69
votes
5answers
79k 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()...
68
votes
5answers
125k 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 ...
67
votes
3answers
76k views
Transparent objects in Threejs
I am trying to write a small program in Three.js that displays two spheres, one inside the other. The radius of sphere2 is supposed to oscillate between 0.5 and 1.5 while the radius of sphere1 is ...
60
votes
1answer
2k views
Interior Mapping shader self shadowing
I'm tinkering with Joost van Dongen's Interior mapping shader and I'm trying to implement self-shadowing. Still I couldn't quite figure out what coordinates shadow casting light vectors need to be in. ...
59
votes
5answers
10k views
Improved Area Lighting in WebGL & ThreeJS
I have been working on an area lighting implementation in WebGL similar to this demo:
http://threejs.org/examples/webgldeferred_arealights.html
The above implementation in three.js was ported from ...
57
votes
3answers
78k 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?
57
votes
9answers
116k 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 ...
55
votes
5answers
41k 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;
...
52
votes
11answers
51k views
Convert 2:1 equirectangular panorama to cube map
I'm currently working on a simple 3D panorama viewer for a website. For mobile performance reasons I'm using the three.js CSS3 renderer. This requires a cube map, split up into 6 single images.
I'm ...
52
votes
3answers
41k views
How do you save an image from a Three.js canvas?
How do you save an image from a Three.js canvas?
I'm attempting to use Canvas2Image but it doesn't like to play with Threejs. Since the canvas isn't defined until it has a div to attach the canvas ...
50
votes
5answers
59k 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 ...
50
votes
4answers
39k views
Preferred 3d model format of THREE.JS [closed]
What is the preferred 3d model format of THREE.JS which is widely used by 3d modelling softwares (can export to that format). I ask this, because I have my 3d models in an own unique format, and would ...
49
votes
4answers
52k views
Any way to get a bounding box from a three.js Object3D?
I'm loading an OBJ file using Three.js and OBJLoader.js. This returns a Three.Object3D object, which has what you'd expect from a 3D model (position vector, up vector...)
What I can't figure out is ...
49
votes
1answer
42k views
Three.JS wireframe material - all polygons vs. just edges
I'm using ThreeJS in a project and noticed that older versions render wireframes differently than newer versions, and I can't figure out how to revert (which I'd prefer).
This fiddle using release ...
48
votes
6answers
56k 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 ...
48
votes
3answers
63k views
How to create a custom mesh on THREE.JS?
I've asked this and got the answer:
var geom = new THREE.Geometry();
var v1 = new THREE.Vector3(0,0,0);
var v2 = new THREE.Vector3(0,500,0);
var v3 = new THREE.Vector3(0,500,500);
geom.vertices....
48
votes
1answer
81k views
Moving the camera, lookAt and rotations in three.js
I'm having trouble understanding lookAt and the rotations of the camera.
I have a circle of small spheres around [0,0,0] on the x-y plane.
The camera is placed at [0,0,30] and after a lookAt the ...
47
votes
4answers
91k 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 ...
47
votes
1answer
28k views
How to get the width/height/length of a mesh in THREE.js [closed]
I been researching various places about trying to get the width and height of a mesh but I have been able to find anything that works. I have a collada model that I imported and all I want to do is ...
46
votes
2answers
37k views
How to get the global/world position of a child object?
How do I get the global position of an Object3D inside another Object3D?
setup:
var parent = new THREE.Object3D();
parent.position.set(100, 100, 100);
var child = new THREE.Object3D();
child....
42
votes
7answers
34k 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 ...
41
votes
3answers
58k views
three.js - How can I dynamically change object's opacity?
This is my object:
var object = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { map: THREE.ImageUtils.loadTexture( "image.png" ) } ) );
object.position.set(2, 3, 1.5);
now after I've ...
39
votes
9answers
120k 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 ...
39
votes
8answers
74k views
Dynamically create 2D text in three.js
I have 3D model which I have created in three.js. Based on some data, I want to create a set of arrows which is decorated by a small text label. These labels should be in 2D.
It seems like I have two ...
39
votes
2answers
1k views
Why does the spotlight in my three.js scene remain centered in the camera perspective, but only on Chrome for Android?
I'm currently using AngularJS and Three.js to try to develop a small example of a VR application. I have defined controls based on whether the user agent is a mobile device or not. It's a dodgy method,...
38
votes
4answers
33k views
Three.js Projector and Ray objects
I have been trying to work with the Projector and Ray classes in order to do some collision detection demos. I have started just trying to use the mouse to select objects or to drag them. I have ...
38
votes
5answers
44k 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. ...
38
votes
3answers
30k views
Three.js detect webgl support and fallback to regular canvas
Can anyone who has used three.js tell me if its possible to detect webgl support, and, if not present, fallback to a standard Canvas render?
38
votes
8answers
37k views
Thickness of lines using THREE.LineBasicMaterial
I am using the code below to create hundreds of lines in my three.js scene
edgeGeometry[i] = new THREE.Geometry();
edgeGeometry[i].vertices[0] = v(x1,y1,z1);
edgeGeometry[i].vertices[1] = v(x2,y2,z2);...
37
votes
3answers
58k views
Changing color of cube in three.js
I'm trying to change the color of a cube based on a variable. I created two cubes and I want to change their color depending on the distance between them.
The cubes are created like this:
geometry = ...
37
votes
4answers
44k views
Three.js and loading a cross-domain image
I know this has been asked before, and I've read ever question and answer I've been able to find, but nothing works.
I'm running this on a local server (IIS). I'm trying to load an image from imgur ...
37
votes
1answer
57k views
three.js: Access Scene Objects by Name or ID
I'm generating objects from an array which I've defined like this (It's not limited to these three):
var links = [['Linkedin','img/linkedin.png','-300','-230', '600'],
['Google+', 'img/...
36
votes
4answers
75k views
How can I set the position of a mesh before I add it to the scene in three.js
In three.js, I want to add a mesh to a position in the scene
I've tried:
// mesh is a THREE.Mesh
scene is a THREE.Scene
scene.add(mesh)
scene.updateMatrixWorld(true)
mesh.matrixWorld.setPosition(new ...
36
votes
2answers
50k views
three.js - mesh group example? (THREE.Object3D() advanced)
I'm attempting to understand how to group / link child meshes to a parent. I want to be able to:
drag the parent
rotate child elements relative to the parent
have parent rotation / translation do ...
33
votes
4answers
36k views
Converting World coordinates to Screen coordinates in Three.js using Projection
There are several excellent stack questions (1, 2) about unprojecting in Three.js, that is how to convert (x,y) mouse coordinates in the browser to the (x,y,z) coordinates in Three.js canvas space. ...
33
votes
6answers
21k views
ThreeJS camera.lookAt() has no effect, is there something I'm doing wrong?
In Three.js, I want a camera to be pointed at a point in 3D space.
For this purpose, I tried using the camera.lookAt function like so:
camera.lookAt(new THREE.Vector3(-100,-100,0));
However, I ...
32
votes
6answers
26k views
Is there at TWO JS counterpart to THREE JS [closed]
I am moving along well learning ThreeJS as an interface to WebGL. Thank you all for your previous help.
I am developing a new approach to 3D Dynamics and would like a 3D component to the textbook. ...
32
votes
3answers
22k views
How do I put limits on OrbitControl?
Is there a way to put limits on the OrbitControls.js? Imagine I'm creating something above the ground, I wouldn't like the camera to go below the ground, know what I mean?! The same things goes for ...
31
votes
3answers
30k views
Converting 3D position to 2d screen position [r69!]
I need Three.js code to convert 3D object coordinates to 2d ones in a 'div' element so that I can place text labels where they need to be (without those labels scaling/moving/rotating along with the ...
31
votes
1answer
21k views
Multiple transparent textures on the same mesh face in Three.js
Is it possible to lay multiple textures on top of each other on the same face in Three.js so that the alpha blending is done GPU accelerated in webGL?
The textures are (or should be) applied to the ...
31
votes
4answers
66k views
How to move an object forward in Three.js?
Is there any way to move an object forward in Three.js?
Maybe I should convert the rotation.x,y,z to a vector, and deal with it. But I'm beginner, and I don't have any idea how to do it.
31
votes
4answers
19k views
Three.JS rotate projection so that the y axis becomes the z-axis
Traditionally, in 3D projections, the Y-axis is the axis that represents "up and down". I learned to think of it, with other engines, as that axis being the Z-axis. What I was wondering was whether ...
31
votes
2answers
19k views
How do I rotate some moons around a planet with THREE.js?
I think this picture best explains my issue:
First I translate the box along the red line. Next, I want the effect of rotation to be the blue line in a, but what's actually happening is more like ...
31
votes
1answer
46k views
Three.js png texture - alpha renders as white instead as transparent
I'm creating a cube and I apply 6 different textures to each of it's faces. Each texture is a .png file and contains transparent parts. I'm also applying a color to the cube - I want to see that color ...
