Three.js is a JavaScript 3D Library which makes use of WebGL

learn more… | top users | synonyms (1)

0
votes
0answers
24 views

Relative quaternion rotation (delta rotation) produces unstable results

Use case: I have a currentRotation quaternion and a targetRotation quaternion and need to calculate the relative rotation between them - as in: what rotation do I need to apply to transform an object ...
0
votes
0answers
17 views

Three.js recover camera values

When I start the script, camera has starting values. When I will move it and click button to set up startign values it is never same. What values I missed? The best way, I suppose, it is to look at ...
0
votes
0answers
13 views

In three.js, is it possible to start a rigged model animation with a function like playAnimation(from frame 1, to frame 4, loop, etc)?

In three.js, is it possible to start a rigged model animation with a function like playAnimation(from frame 1, to frame 4, loop, etc)?
0
votes
0answers
20 views

Handling different renderers Y axis direction in a single engine

I have an engine that uses either three.js (3D WebGL rendering library) or pixi.js (2D rendering library) depending on the game. The problem is that pixi.js has y-axis pointing downwards (same as in ...
2
votes
0answers
36 views

Clipping drawn mesh by arbitrary volume

I'm trying to create a visual effect where an arbitrary part of the main scene is either clipped out by or cropped to an arbitrary volume. That is to say, I might want to draw just the area of the ...
0
votes
0answers
21 views

Create angle when moving object

Create angle when moving object. I want to pretend like I'm throwing some object in real life. example: CODE: new TWEEN.Tween(start).to(end, duration, {bezier:[{x:100, y:100}, {x:0, y:200}, {x:-100,...
0
votes
0answers
24 views

Line following the camera

How can I make a line that follows a camera view? See the example in the image: (The red line is the one I want to generate, and the blue dot is the camera.) I have this code that generates the line,...
0
votes
0answers
42 views

MagicaVoxel PLY file does not seem to render glass in aframe/threejs

So I have an extremely simple shape (a sphere) I made in magicavoxel. I've selected a color from the palette, gone to the render tab, then turned on glass. When I bake and load the PLY file in aframe/...
1
vote
1answer
95 views

Throw ball - distance and force

I have a question, I need a formula to calculate the distance and a force based on the speed that drags the finger up on the phone. And is there any way I can get a look? And also shows the trajectory ...
0
votes
0answers
59 views

Throw ball inthree.js

How can I flip an object using the mouse OR touch the phone? It's like a bowling game, with a sharp upward movement the ball will reach farther. And a slow upward movement will make the ball not have ...
1
vote
0answers
48 views

Texture mapping artifacts at triangle edge (for thin triangles?)

I'm working on generating programmatic textures for 3d models and showing them in WebGL using Threejs. To do this I generate a texture image (PNG) that contains per-triangle textures (a rectangle on ...
1
vote
1answer
160 views

2d game with 3d js. game engine

I'm trying to understand if it's possible to create a game where the player can switch between 2d (strategic/bird view) and 3d (actual gameplay) using only the 3d supported JS/HTML5 game engine, like ...
0
votes
1answer
82 views

How to add a JSON object / model into your whitestorm world / scene?

I am loading the object from my json file. var loader = new THREE.ObjectLoader(); loader.load("blue-car.json", function ( car ) { car.position.set(2, 0, 0); car.addTo(world); } ); How can I add ...
0
votes
1answer
130 views

How would I process accelerometer data to use it for camera rotation?

I'm using Three.js to make a web-based 3D first-person game. I would like the player to be able to control the camera rotation with their device's accelerometer. The sensor data is received via the ...
0
votes
1answer
38 views

Sorting sprites above the surface of 3D mesh?

I'm having trouble getting sprites to display on top of a 3D mesh. My requirements are as follows: Sprite should billboard Sprite should not clip into the mesh Sprite should be hidden when on the ...
2
votes
3answers
123 views

How can I rotate the camera for a player walking around the surface of a sphere? [duplicate]

I'm making a 3D game where the player can walk across the surface of a planet. I am having a problem correctly rotating the camera's frame of reference, so that the camera is oriented correctly ...
1
vote
2answers
837 views

Adding multiple materials to a single mesh in three.js

I've been doing some reading and can't seem to figure out a good way to do this.. I have a simple globe with a material on it like so: const earthGeomerty = new THREE.SphereGeometry( 4, 48, 48 ); ...
2
votes
3answers
811 views

Three.js— how to rotate sphere without moving light (using OrbitControls)?

Okay, I think the problem that I'm having is that when I create my DirectionalLight with three.js, when I then rotate my object with OrbitControls the entire scene is rotating, not just the sphere I ...
0
votes
1answer
123 views

Rotating pitch and yaw causes roll

So I'm new to working with a 3D space and not sure how to fix my problem, I basically have a turret that rotates along its Z axis, and pitches along it's Y but after rotating 180 on the Z axis the ...
0
votes
0answers
111 views

Make THREE.CSS3DRenderer child of THREE.WebGLRenderer

I have THREE.WebGLRenderer, which renders a map image on a plane on scene1. I also have hot spot elements rendered using the THREE.CSS3DRenderer on a separate scene2 but possitioned above the map. ...
0
votes
0answers
17 views

Intersenctions between frustrum planes and eg. ground

I'm working on something as satellite map viewer with bunch of 3d meshes over ground. Is my assumption valid: I want know which part of ground require new data. I want resolve line equations of ...
0
votes
1answer
111 views

Shader to render objects with distance independent size

I am trying to find a way to render certain objects in my 3d scene without the effects of the perspective projection. E.g. I want them to have the same pixel dimension independent of distance to the ...
0
votes
0answers
8 views

Adjusting DeviceOrientationCtrl AlphaOffset with lookAt variant?

We have an object B controlled with DeviceOrientation. We have another object C that we shall call the target object. Currently B is not looking at C. We wish to adjust the the rotation alphaOffset so ...
1
vote
0answers
132 views

How to simulate projectile path in 3D with Physijs andThree.js? [closed]

I'm new in 3D rendering with WebGL. I would like to simulate a 3D projectile path using Three.js and Physijs. How could I achieve this?
1
vote
1answer
2k views

How to make texture size correctly in THREE.js?

I'm new to THREE.js and I have a frustrating problem. I can't get my grass texture to size "normally" on the terrain. I get it, the terrain is steep, but that doesn't mean the grass should be ...
1
vote
2answers
250 views

Position object in FOV in threejs

I'm just starting with threejs, and I'm building a basic first person shooter. I use pointer lock controls. When the user clicks ("shoots") an object, I remove it and place it at another random ...
1
vote
1answer
45 views

How to create guides to off-screen objects?

I've played Metroid Blast on Wii U, and would like to build one of its features in a three.js game. The feature is: if an opponent is out of view, a guide is displayed showing the direction of the ...
0
votes
1answer
263 views

360 degree quaternion interpolation?

I am in the process of implementing interpolation into a simple game loop I am playing with after reading the infamous "fix your timestep" article (which is amazing by the way). I have the position ...
1
vote
1answer
188 views

Unexpected quaternion rotation behavior

First off let me apologize for the vague title but I really couldn't think of a more descriptive one (maybe after reading this a more advanced user might be able to edit it). Alright, so I have been ...
1
vote
0answers
50 views

align local Y to be parallel with global Y during or after slerp

I am using the following function to have a globe rotate a point on its surface to face the global Z toward the camera. This works fine, but after each rotation the Y axis seen as a green line is not ...
4
votes
2answers
633 views

How do you avoid lag with Three.js and mousemove?

I'm trying to create a browser moba-like game using three.js. I'm using WASD for movement and the player rotation follows the mouse with mousemove then lookAt() the intersection. The problem: As I ...
2
votes
0answers
145 views

My collision detection is not working when I rotate my mesh in three.js

I am trying to move a ball mesh through a maze. The maze belongs to a parent object3d. My issue is that when I move the ball I can't detect collision right well because in the rotation, the axis ...
4
votes
1answer
80 views

Timers and performance for mobile JS

I'm using the Three.js JavaScript library to do some things in WebGL, and I wonder how the graphic aspects of timers are done on mobile. I was creating numbers with geometries and just replacing them ...
1
vote
0answers
34 views

How to use quaternion on another referential

I'm new on Three.js and despite a mechanical background, I can't find how quaternion works: it's like it always refers on local part referential and not the global one. I've illustrated it here : ...
1
vote
0answers
30 views

Unstable behavior when applying impulse

I created a video that describes the problem since it very hard to explain it. Basically, using physi.js, I am applying random impulse on the object. In the video, at 0:17 the problem begins when the ...
2
votes
1answer
199 views

White dots artifacts when applying borders to hex tiled geometry

I have a hexagon tiled geometry I created in Blender Which I then load in WebGL, using THREE.js library. Below is the loading code, I've cut the code of creating scene, lights, etc. I create rendered ...
0
votes
1answer
1k views

How can I export a model from Unity to three.js?

I want to buy some assets from the Unity asset store and use them in my three.js project, but I am not sure what the best way to go about this is. Some cursory googling got me this, but Collada ...
0
votes
1answer
460 views

three.js objects disappear

I haven't got a lot of experience with 3D Frameworks - but was playing around with three.js and came across something that (to me) is a bit odd and I wondered why this happened. I am rendering the ...
0
votes
2answers
455 views

Loading Collada Files Quickly (three.js, OpenGL, Javascript)

Okay, so I've created these sleek-looking spaceship models for an OpenGL game that I'm going to make. To make them look sleek and smooth, I used a Subdivision Surface modifier in Blender. Hmm... ...
1
vote
0answers
32 views

My Directional light lights the floor of my cave but not the ceiling (concave mesh)

I am developing a small demo with Meshes created from a vertex map. When i put a hole in the mesh (making it concave) the physics work fine but the directional lightning only lights one part of the ...
-1
votes
1answer
797 views

THREE.JS: why is the rotation only applied on the last axis used?

my function: function rotateAroundWorldAxis2(object, radians1, radians2) { object.rotWorldMatrix.makeRotationX(radians1).makeRotationZ(radians2); // object.rotWorldMatrix; ...
0
votes
1answer
359 views

PhysiJS and objects on top of moving objects

Using Physijs which uses ammo.js. I am attempting to simply place a sphere on top of a box, the box is moving back and forth and I want the sphere to move with it while also being able to move on top ...
-3
votes
1answer
196 views

handling wars in multiplayer browser game [closed]

I'm building a browser game about countries, cities, the user control his city, building it upgrading it, can fight other cities in the same country, elections and war between countries, peace, trade ...
1
vote
1answer
401 views

Vertex ordering with THREEjs's exporter

I'm using THREEjs's exporter to export a 2D polygon plane. The resulting JSON gives me the vertices. I'm trying to properly order these vertices as to make the actual polygon shape, without luck. ...
3
votes
1answer
2k views

determining view boundaries based on z position when using a perspective projection

I'm using three.js to make an animation of a box moving around the screen in 3 dimensions. It is moving pseudo-randomly, according to a noise function. So, I want to place an invisible wall just ...
0
votes
1answer
638 views

How can you merge the geometries of cloned objects in Three.JS?

So I'm testing the best non-voxel way to display a lot of objects at once and so I found how to merge geometries. Now, I can easily merge most geometries, but I can't seem to merge the geometries of ...
0
votes
1answer
530 views

WebGL (three.js) - rendering object behind camera far plane

I need to have one object that is always visible/rendered (a lens flare, to be exact). I don't want to set the camera far plane to the maximum possible distance between camera and the sun (performance ...
0
votes
1answer
159 views

JavaScript THREE.js webgl spotlight rendering

I'm playing with webgl/JavaScript/THREE and a spotlight. And I see unexpected results. And I don't understand what's going on, and I'm hoping you can point me in the right direction. In my particular ...
0
votes
2answers
2k views

Three.js: Lighting not calculating correctly on THREE.Geometry objects

I have a three.js (REVISION: '68') issue with the lighting of THREE.Geometry objects: I'm using the THREE.Geometry class to build up objects using vertices and faces, then I computeFaceNormals() and ...
0
votes
1answer
199 views

Rendering mountains around a tile layer [closed]

When making a 2D Pokémon game, I just faked elevation by putting mountain tiles underneath the land. Now my tiles are 3D models, so I'm using layer properties to define their elevation. What I don't ...