threejs clipping 'sphere' possible? - javascript

I'm looking to find out if its possible to create a sphere that handles clipping in threejs. At the moment I'm building a series of clipping planes to handle all directions as shown in the image, but this seems rather wasteful. If its just affecting a material property would it not be possible for a sphere or rect geo to do the same thing.
thanks in advance!

Related

Drawing a Cylinder from two Coordinates in 3D Space (three.js)

Heyho,
im relativly new to programming, right now im trying to solve a problem but don't know how and if it's even possible in three.js.
I bet someone can tell me...
My goal is it, to create a cylinder looking like geometry in three.js that draws from one vector3 to another.
I need this to create an 3D dimensionline.
I know three.js provides an arrowhelper but theirs can only draw 2D lines and i need to be able to define the width of the arrow.
Things I tried:
At first i tried to use the basic cylinder geometry of three.js but i
couldn't figure out how to give it a start and end point.
The second idea that came to my mind is the shape (was able to define points)
but i think i only can draw 2d shapes with it.
Can someone help me please?

How to match texture for specific spot on sphere

I have a sphere and use texture on it. I would like to match texture for a specific spot on the sphere without any stretch, wrapping texture etc. just set my x,y texture to specific coordinate on the sphere. The rest of the sphere should be transparency! Like on the image below :D
Question. How can I get it? What should I use? Is it custom UVMapp or ShaderMaterial.
Greetings, and thanks!

Three.js drop shadow

I was wondering if there's a way to project a shadow without have a "ground" plane where project it.
I'd like to do that because the camera can be moved around the object and would be ugly see it pass through the ground.
I'm using Three.js latest-version with the WebGl renderer.
Yes this is possible by applying ShadowMaterial to the plane geometry. This material can receive shadows and is completely transparent. so you just position the plane geometry at the desired location in the scene and you are good to go. check out this. https://threejs.org/docs/#api/en/materials/ShadowMaterial
This is technically impossible, you could write a shader that renders the shadow on a transparent plane, that way you would not notice it when the "camera" goes through the plane, only when it goes through the shadow itself.
To do so you can lerp between the shadowratio and a transparent black or white in the pixel shader and then set the corresponding blending states on the rendering context.

Looking for a way to draw a line between two points on a sphere in Three.js

My app (a flight tracker) needs to draw a line between two points (cities say) on a sphere (earth) along the surface (i.e. the great circle route) using Three.js.
I can think of 2 ways - (a) creating Three.js 'Line' with a set of (enough) points that I calculate manually and (b) writing the lines into the texture I use for the sphere after it's loaded but before I apply it as a texture.
I can see problems with both (not even sure if (b) is possible in Three.js yet) - anyone think of a better way or have an opinion?
Thanks in advance.
You use many particles to create a kind of dotted line.

Background with three.js

Can anybody help me with three.js?
I need to draw background, something, like a THREE.Sprite, but it neet to be UNDER any 3d object, that will draw later. I have a camera, that can be move only on Z axis.
I tryed to use:
cube mapping shader - PROBLEM: artefacts with shadow planes, it's unstable draw
THREE.Sprite that dublicate camera moving - PROBLEM: artefacts with shadow plane - it have a edge highlighting OR drawing only other spirtes without objects.
HTML DOM Background - PROBLEM: big and ugly aliasing in models.
What can I try more? Thanks!
You could maybe try drawing in several passes, i.e. making a first render of the background scene to a buffer, and then a second one over the first "buffer". Maybe using the buffer as background (painting it in 2D with an orthographic projection, and disabling depth buffer writes in that pass).
I haven't tried it myself with three.js, but that's how I'd do that with "traditional" OpenGL.
If you want a "3d" background i.e. something that will follow the rotation of your camera, but not react to the movement (be infinitely far), then the only way to do it is with a cubemap.
The other solution is a environment dome - a fully 3d object.
If you want a static background, then you should be able todo just a html background, i'm not sure why this would fail and what 'aliasing in models' you are talking about.

Categories