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

learn more… | top users | synonyms (1)

2
votes
2answers
47 views

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

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
0answers
16 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 ); ...
1
vote
2answers
30 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
34 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
20 views

Server Reconciliation When Using Physics?

Basically I need some pointers on how this was previously achieved by others. I have a Three.js + Cannon.js base game with an authoritative server running Cannon.js Using Node.js. Let's keep in mind ...
0
votes
0answers
10 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
15 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
46 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
6 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
31 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?
0
votes
1answer
409 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
1answer
53 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 ...
0
votes
0answers
63 views

Camera movement on a sphere, and how to look while doing it

I am trying to make some kind of pointerlocked walking simulator that involves movement of the camera on the inside of a sphere. I've looked at Walking on a sphere, but that solution fights what I'm ...
1
vote
2answers
29 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
0answers
45 views

How to implement mesh subtraction with user interaction in real-time?

I am trying to perform a subtraction on 2 mesh files imported from objloader using THREE.js and ThreeCSG but it is not working as long as the objects are too big or not closed or it will be so slow. ...
0
votes
0answers
165 views

Unreal Engine - Why is the size of even the most minimal HTML5 project ~ 155 MB?

I created a new project in UE4 (ver 4.10.4) with "no starter content" and "scalable to 2D/3D" settings. Essentially, there are a total of 5 assets in the project 1) floor, 2) light source, 3) sky ...
0
votes
1answer
159 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
153 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 ...
0
votes
0answers
47 views

Physijs character animation

Assuming I have a character with walk animation (three.js format) and I am able to load it in three.js and everything is fine. Now I want to apply physics to this character using physijs. How can I ...
0
votes
0answers
23 views

How to assemble a skinned character model from component meshes?

I need to enable visible item swapping on 3d characters for my game, but for the life of me I can't work out how to do this in Three.js. Any information about how bones and skinning work in general or ...
0
votes
0answers
19 views

three.js game development game ioop?

i'm new to three.js. assume a game has 2 stage, if a player passes a particular score then the next level start, can someone point out the way to do that in threejs? i'm a beginner for game ...
1
vote
0answers
32 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 ...
3
votes
2answers
319 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
98 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 ...
3
votes
1answer
60 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
31 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
25 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 ...
1
vote
1answer
149 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 ...
0
votes
1answer
667 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
246 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
0answers
229 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
28 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
514 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
269 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
157 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
288 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
1k 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
420 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
350 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
123 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() ...
0
votes
1answer
178 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 ...
1
vote
0answers
555 views

Must light helper be added directly in scene?

Following method of adding light helper works ok: var light = new THREE.SpotLight( 0xFFFFFF ); light.position.set(100,100,100); scene.add(light); var helper = new THREE.SpotLightHelper( light ); ...
0
votes
1answer
599 views

How to implement 2d collision detection that is immune to low framerate and fast movement? [duplicate]

I am trying to implement my own collision detection for a 2.5d voxel style platformer using Three.js. I have a problem with my implementation - if the framerate is too low or the character is moving ...
4
votes
1answer
3k views

(Three.js) - What object3D properties are required to make rayCaster.intersectObjects() work?

FYI, i am trying to do something almost identical to the following: Merging geometry/mesh without losing benefits I essentially have a list of Three.object3D's. These objects are "merged" together ...
4
votes
1answer
310 views

How do I make cars on a one-dimensional track avoid collisions?

Using three.js, I use a simple spline to represent a road. Cars can only move forward on the spline. A car should be able to slow-down behind a slow moving car. I know how to calculate the distance ...
11
votes
3answers
5k views

Merging geometry/mesh without losing benefits

In three.js we can simply merge geometry to limit the amount of draw calls and thus increase performance. In a simple test with one material, I could draw 50.000 cubes + shadows @ 60fps on my GTX660 ...
2
votes
1answer
806 views

Emscripten code and three.js

I would like, if it's possible, to use Emscripten code generated from C/C++ with the Javascript library three.js. For example, from emscripten code I want to pass rendering information to the three.js ...
3
votes
1answer
3k views

Orthographic Camera and Raycasting in Three.js

I'm working on a test project porting a simple game from iOS to Javascript. I've got the orthographic camera working and it can view the objects in the scene and move up and down the tower of meshes ...
2
votes
1answer
1k views

Three.js camera turning leftside right

In Three.js I am trying to implement an orbiting camera can be rotated around the x and the y axis. I am using these two functions: function rotateX(rot) { var x = camera.position.x, ...