You do not need to have any objects in your scene to do this. You already know the camera position. Using vector.unproject( camera ) you can get a ray pointing in the direction you want. You just need to extend that ray, from the camera position, until the z-coordinate of the tip of the ray … Read more
Both your spheres are transparent, and are remaining so. What is happening is that the smaller sphere is not being rendered at all. Transparency in WebGL is tricky. You can google the issue to find out more about it. But you have stumbled upon an issue related to how three.js in particular handles transparency. The … Read more
You have to be precise here. You can calculate the visible rectangular region given the camera’s field-of-view, camera.fov, and a given distance, dist, from the camera. Since the object presumably has depth, you have to pick one plane through the mesh, and do the calculation at that distance. Here is how to calculate the visible … Read more
In three.js, an object’s orientation can be specified by its Euler rotation vector object.rotation. The three components of the rotation vector represent the rotation in radians around the object’s internal x-axis, y-axis, and z-axis respectively. The order in which the rotations are performed is specified by object.rotation.order. The default order is “XYZ” — rotation around … Read more
The pattern for instantiating an orthographic camera in three.js is: var camera = new THREE.OrthographicCamera( width / – 2, width / 2, height / 2, height / – 2, near, far ); where width and height are the width and height of the camera’s cuboid-shaped frustum measured in world-space units. near and far are the … Read more
If you want some objects to render “on top”, or “in front”, one trick is to create two scenes — the first scene is your regular scene, and the second scene contains the objects that you want to have on top. First, set renderer.autoClear = false; Then create two scenes var scene = new THREE.Scene(); … Read more
To my knowledge there is no automatic way to calculate UV. You must calculate yourself. Calculate a UV for a plane is quite easy, this site explains how: calculating texture coordinates For a complex shape, I don’t know how. Maybe you could detect planar surface. EDIT Here is a sample code for a planar surface … Read more
The short answer is you have to take into consideration the offset of the canvas. The long answer depends on how your code is written, so I’ll give you two answers, which should cover the bases. There are a lot of possible combinations, so you may have to experiment. Also, different browsers may act differently. … Read more
I am assuming you are using a perspective camera. You can set the camera’s position, field-of-view, or both. The following calculation is exact for an object that is a cube, so think in terms of the object’s bounding box, aligned to face the camera. If the camera is centered and viewing the cube head-on, define … Read more
Well an old and already answered question but I wanted to add my solution for beginner consideration out there. Have playing along Atmospheric scattering and GLSL for a long time and developed this VEEERRRYYY Simplified version of Atmospheric scattering (if animation stops refresh page or view the GIF in something more decend): [ planet is … Read more