I'm trying to recreate this glowing box from Beat Saber in ThreeJS:
I started by creating a shape in Blender and exporting an OBJ. I've loaded it in Three, as just a geometry:
Next I needed some lighting. I tried using a RectAreaLight, positioned inside but facing outwards, and this works alright:
My problem is that, compared with the screenshot above, it doesn't really seem like it's glowing, it just looks like a bright white triangle on a red cube. I'm not sure how to get the light to "spill" outside, like in the screenshot. Maybe I need to use a different kind of light?
what are you looking for is done usally by pixel shaders.
Take a look at glow and bloom shaders like:
https://threejs.org/examples/webgl_postprocessing_unreal_bloom.html
Related
The player of my 3d game using threeJS with react (R3F) cannon, fiber is currently a sphere. This is because i want it to slide with no friction, and the geometric shapes that has sides/vertexes dont.
The thing i wanted to achieve is to have the same no-friction movement but making the useSphere object (or any that i can use with cannon) taller. But as it is a sphere is completely rounded so that i can only increase radious and i only want to make it taller not wider.
Any solution to this problem is welcome as my game is first person camera so i dont even show the player just want the correct physics with cannon library.
Ive seen that three js includes geometries like capsules: https://threejs.org/docs/#api/en/geometries/CapsuleGeometry
That i feel might work if i had the chance to use it with cannon but i dont know how to. I simply want a no edge shape that is taller than a ball, like a ball but larger. I think there might be a way to make a custom shape but i sincerely havent found anything.
Thanks in advance for your help, would be really nice to me.
I import a GLB scene (with baked textures) in AFrame using THREEjs but for some reason these white lines appear on my objects (check example photo bellow).
The walls are actually grouped meshes so I can somewhat understand why the lines appear, but I cant understand why it happens on the objects too. When I upload the same scene on the THREE.js/editor the white seams don't appear so I assume its a setting that AFrame sets automatiacally?
Each object is a single material with a single "map" texture. Does anyone know why it happens and how to avoid it? Thank you in advance!
An example photo of the white seams. They appear in the perimeter of each unwrapped UV part
Your model has an issue with the alpha buffer. Once you disable its usage in the renderer, the mentioned white lines dissapear
<a-scene renderer="alpha: false"
Check it out here
In my current project I need to make a visible spotlight, just like one which calls batman. I mean that cone of light, that you can see on a night sky.
I haven't any graphical or 3d experience and I just can't make light visible.
Would be nice if you can show me how do that or give couple advice.
Here is codepen for experiments.
Thanks a lot.
P.S. I need visible whole cone, not just reflection from box.
JSFiddle Demo of batsignal-type spotlight
Lights (and shadows) can be tricky for many reasons. They have many parameters and require much tweaking to look right. Just getting light to show up can be a little counter-intuitive which is why this line of code is your best friend:
light.shadowMapVisible = true;
Light objects are not visible. If you look at one, you won't see anything. If you want a sun in a sky that lights up your scene, you must create the light source and the sun object if you want something to see.
Getting light to show up usually means providing a surface upon which light can shine. In the example above, that surface is a sphere that surrounds us. In our example, we also build a yellow transparent cone to fake the beam of light. Try adding a texture to this cone to achieve greater realism. In real life, this cone would be visible as light from a spotlight reflecting off tiny particles in the air. In our 3d world, there are no particles to reflect off of unless we put them there, hence the cone. Good luck!
Tips:
Remember that there are many kinds of lights. Some can cast shadows, some cannot. Some affect only certain materials.
The renderer has a parameter called "maxLights" that defaults to 4.
I'm actually trying to include a .jpg image into my 3D scene. All solutions i have found consisted in apply those images on meshes as texture : but then the scene does not look like well. Indeed, we can see the mesh border whether it be a plane or sphere... I just want to see the image. Does exist it another solution ?
On my application, i want to rotate an airplane around the earth, and the problem is about including this airplane.
Thanks for your help :)
Perhaps the class THREE.Sprite will accomplish the effect you want. THREE.Sprite can display an image, and can use either screen coordinates (e.g. canvas coordinates) or it can be part of your 3D scene, but a sprite image is always facing the camera. If you want the image to rotate, you do need to use it as a texture on a mesh. Whatever you decide to do in the end, I've posted a bunch of tutorial-style examples at http://stemkoski.github.io/Three.js/ that may help. Good luck!
I am drawing two relative simple shapes and the geometry of them do not overlap.
Here is the code sample:
http://jsfiddle.net/pGD4n/9/
The Three.js Trackball is in there so you can click and drag to spin the objects around in 3d space. The problem is that as the objects rotate some faces disappear revealing the object below. A slight more rotation and the missing face returns, but others have gone missing.
I've tried BasicMaterial, Normal Material and LambertMaterial with both SmoothShading and Flat Shading. I have tried the scene with and without lighting. Moving the objects farther apart seems to correct the issue, but in the given example code the meshes do not overlap and should not have this problem. Problem happens in both Chrome and Firefox.
I imagine that switching to the OpenGL renderer would resolve the issue, but for compatibility we need use the Canvas renderer.
Any help or ideas appreciated.
This is a limitation of CanvasRenderer. Unfortunately per pixel z sorting is not available in CanvasRenderer so it basically tries to sort the whole polygon instead. Depending of where you're looking from the center of one polygon may be closer than the polygon on the side and so it "jumps".
The only solution right now is using WebGLRenderer. I'm working on a new renderer for context2d which hopefully will solve this without requiring webgl but it will still take some time.