Questions tagged [three.js]

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

Filter by
Sorted by
Tagged with
1
vote
0answers
38 views

How can I use canon.js in three.js editor?

I would like to add bullet physics to a scene crated by the three.js editor. Where do I need to put the canon.js file in order to be able to access it's functions from the editor scripts? I ...
-1
votes
1answer
65 views

threejs lerp and camera the animation is not smooth

what is the problem with linear interpolation? in update() in case this is animate() and when I call zoomCamera() in update() there is lerp with smooth but when I call here ...
0
votes
0answers
11 views

Using three.js, how can I set up a headless version of a game state on a node server like the babylon.js-NullEngine?

I have been working towards creating a multiplayer three.js fps game and am planning to only do client-side prediction in the browser. On the other hand, I am using Node.js, Express.js and Socket.io ...
0
votes
3answers
70 views

Center Perspective Camera on Coordinates

I've got a PerspectiveCamera and set of coordinates (x,y,z). How could I pan the camera to make these coordinates at the center of the screen?
0
votes
0answers
63 views

Three js raycaster WITHOUT camera

I seem to find only examples to use the raycaster with the camera, but none that just have a raycaster from Point A to Point B. I have a working raycaster, it retrieves my Helpers, Lines etc. but it ...
0
votes
2answers
222 views

Drag 3D camera with mouse cursor

I have a camera that is moved by changing its X and Z coordinates. However, the camera is rotated, so when an object moves by 1 unit in the world, the number of pixels it moves by isn't trivial to ...
1
vote
1answer
41 views

Camera Sensitivity in PointerLockControls to match actual games

I am creating a FPS game online. I want the user to be able to use a sensitivity they are familiar with from games they've played. In this case, I want them to use their Fortnite sensitivity. I am ...
1
vote
0answers
14 views

How to load models with possibility to change textures in Three.js

I'm working on a game in Three.js where I have a few variations of the same model in blender. What I want to achieve is that I'll load the model once with all the material settings, but then I'll ...
0
votes
0answers
168 views

OpenGL seamless repeated texture has artifacts on edges

I'm currently trying to map a seamless texture onto a 3d wall object but when it comes to the edges of the texture there are visible artifacts. closeup: Here is the shader code i use for the texture ...
0
votes
2answers
109 views

How to avoid the cutoff of a Sprite when overlapping in a terrain?

I have a scene where I have a terrain as a PlaneGeometry. And I'm trying to locate a building on it as Sprite. But I'm not able to put that building/sprite centered on the terrain without getting a ...
0
votes
0answers
24 views

How to align a particle billboard to the floor of the world

I'm using https://github.com/squarefeet/ShaderParticleEngine and THREE.js to manage particles in my scene. I have a special case where some particle emitters need their particles to align to the ...
0
votes
1answer
108 views

Combine rotation XZ (horizontal) with YZ (vertical). Math formula

I'm trying to make a rotation vertically and horizontally around a point at the same time but I'm not able to combine both. I have this formula for the horizontal rotation: ...
0
votes
1answer
24 views

How to orient a layer to connect 2 points AND facing the camera

here is my question, which I hope will be in general interest: If you have got 2 Points in 3D space and want a plane to connect those, you can quite easily use a function similar to "lookAt" to ...
1
vote
0answers
1k views

How to make an object which position is not on the world origin rotate around the world orgin in threejs?

I've loaded an object and set its position on vector(5,2,-5) by threejs. And I wanted it to rotate around the origin point in the world coodinate system. I found a method in class Object3D called '...
1
vote
2answers
4k views

How to move the camera to center an object in screen?

For example, an object is located at (x,y,z) in world space. Now how to calculate the offset translation, I mean no rotation, that will be applied to the camera so as to place the object at the center ...
1
vote
1answer
1k views

3rd person camera rotate around player with mouse

I'm trying to make a 3rd person camera for a game with THREE.js and Physijs (if that's important), and so far I have set it up so that the camera follows behind the player using cos and sin etc. but I ...
0
votes
1answer
983 views

Change shadervalues for different Meshes in Three.js

Hey I am writing a Shader for Three.js. My goal is to have multiple objects with the same shader and each object should have a color set on the object that is then given to the shader. The goal is to ...
0
votes
1answer
1k views

Raycasting in three.js not working properly on ipad and touch devices

I am working on a 3D tool for desktop and iPad. Everything is working fine except for two issues: Issue 1 - When I select a 3D object with the mouse and move it on an iPad (as opposed to on desktop, ...
0
votes
0answers
121 views

How to position a 3D crosshair on an objects face and set its angles **outward** from objects face?

What I have right now, is a ray tracer for my cursor on my canvas, when I click on the object, it gets the vector of my selection in the 3D space on the object I had my mouse on. The ray tracer ...
0
votes
1answer
176 views

Finding the closest face normal from a given point in space efficiently

I have a large model (roughly 400k faces) and a large number of points on this model (roughly 2000) and I need to calculate a normal per point based on the closest face on the model. Is there a faster ...
0
votes
1answer
707 views

Set custom Yaw Pitch and Roll in Three.js

So I have the following struct in C++, it gets updates with the values of an program that uses a camera in spectator mode: ...
2
votes
1answer
2k 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 ...
0
votes
1answer
1k 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 ...
1
vote
1answer
54 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. ...
1
vote
0answers
197 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 ...
1
vote
1answer
466 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 ...
1
vote
0answers
253 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 ...
2
votes
1answer
1k 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
263 views

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

I am loading the object from my json file. ...
0
votes
1answer
611 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 <...
2
votes
1answer
421 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
634 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 ...
2
votes
2answers
6k 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: ...
3
votes
4answers
6k 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 ...
0
votes
1answer
385 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
1answer
396 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 ...
1
vote
0answers
372 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?
2
votes
1answer
5k 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 ...
0
votes
4answers
943 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
54 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
889 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
236 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
55 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
2k 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 ...
2
votes
0answers
582 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
134 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
42 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
50 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
295 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
2k 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 ...