THREE.js Border and overlay - Material Shader - javascript

With THREE.js, is it possible to give a sphere a material shader that will make it look something like this? (The effect I'm looking for is the border, glow, and the streak going across the red.)
If so, can I get any help with finding good documentation/tutorials on material shaders?
Right now the material I'm using has a phong base phong shader, but it's not the effect I'm looking to achieve.
var protonMat = new THREE.MeshPhongMaterial({
color: 0xC31818,
emissive: 0xBE2323,
shininess: 0,
shading: THREE.SmoothShading
});
Sorry I don't have much code, I don't know where to start for these shaders!

I think you would need a combination of multiple materials to achieve that.
Have you already checked this example?

Related

Three.js - How do I change the edge colors of my SphereGeometry object?

This is the basic example from the Threejs documentation
function initSphere(){
const geometry = new THREE.SphereGeometry( 150, 14, 14 );
const material = new THREE.MeshBasicMaterial( {color: 0xFF0000, vertexColors: 0xFFFFFF} );
const sphere = new THREE.Mesh( geometry, material );
scene.add( sphere );
}
It creates a red sphere which is what I wanted, but I can't really see the sphere and it's edges because it just looks like a red circle. I was thinking that changing the edges to a white color would help make the effect I want, but I can't seem to know how to ask this question to solve it.
Can anyone help?
First, your shape is "just a red circle" because you are using MeshBasicMaterial. This material is simply a color and does not include any kind of shading or highlights--it doesn't even need a light source! Every bit of the shape will be rendered as 0xff0000.
If you want shading/highlights, You will need to use a more complex material like MeshPhongMaterial, MeshLambertMaterial, or MeshStandardMaterial. Because these are shaded, you will need to include a light in your scene.
Secondly, the vertexColors property does not change the color of the "edges." Instead, it is a Boolean that indicates whether vertex colors are used to color the Mesh.
If you want to show edges, you could try using EdgesGeometry to define a secondary shape.

How to incorporate a "moving" background in THREE.js

I cam across this site: https://travisscott.com/
As you can see, when you move the camera, the gradient background has different 360 degree shading.
What part of THREE.js would something like this be part of?
Can someone point me in the right direction?
As #gaitat said in their comment above- the background is a cube map wrapped in a sphere. This is just a normal three.js material with a texture map applied. Here is the code from the page cleaned up to be readable:
var backgroundSphere = new THREE.Mesh(
new THREE.SphereGeometry(30,10,10),
new THREE.MeshBasicMaterial({
map: (new THREE.TextureLoader).load("assets/images/textures/pano.jpg"),
side: c.DoubleSide
})
);
The shiny material on the model is achieved using the same environment map:
var shinyMaterial = new THREE.MeshStandardMaterial({
color: 16777215,
metalness: 1,
roughness: -1,
envMap: <A loaded cube texture (the same as the pano image above)>,
side: c.DoubleSide,
shading: c.FlatShading
});
There is more information on loading a cube texture in the three.js docs: https://threejs.org/docs/#api/textures/CubeTexture
Page is using: three.js [r79] from what I can see.
Here's the process.
Create the asset - Get a 360 panorama image from some source. Photoshop it to make it blurred.
Create sphere in your Threejs setup. Make its scale 10x heigher than the main model scale
Apply MeshLambertMaterial to it with face sides to be BackSided
Load the 360 image that you edited in your scene
Apply the image as emissiveMap. Make sure that the emissive color is set to white.
Render

Three.js disable lighting

I want to disable lighting entirely in three.js, and render a 3D object. Currently, since lighting is active in some form, the object appears completely black. I have no calls to any sort of lighting currently in my program, and I have been unable to find a solution with searching.
Edit: Code
var white = 0xFFFFFF;
var facemat = new THREE.MeshBasicMaterial( { color: white, opacity: 1.0, shading: THREE.FlatShading } );
vrmlLoader.addEventListener('load', function ( event ) {
var object = event.content;
object.material = facemat;
scene.add(object);
});
vrmlLoader.load("ship.wrl");
My questions for this particular post have mostly been answered. If I am to ask more I will drive this post off topic.
Shading / lighting take care of drawing an object in such a way that you can perceive its depth. In your example picture, shading is disabled - there is no depth, the object is the same everywhere - you cannot differentiate parts of it.
Now, it should be pretty obvious that you can't draw stuff without colour - just like you can't draw on a piece of paper without pencils or any other tool. What you are seeing is simply your object drawn with black colour. What you want to see is your object drawn in white, which is almost the same but if you do that currently, you'll see nothing since your background is white!
Anyway, after those clarifications, here is a how-to:
Change the background colour of your renderer to white:
renderer.setClearColor(0, 1)
Change the colour of your object by changing its material:
object.material = new THREE.MeshBasicMaterial(0xFFFFFF)

Three.js custom geometry raycaster catches wrong object

I need to use my own gemetry since the default cube does not look like it should in wireframe mode (now it is made of triangles instead of squares).
So I made my own geometry and it looks ok, but the raycaster does not work as good with my own objects as it does with the built-in cubes.
var cube = new THREE.Line( getCube( 5,5, 5), new THREE.LineDashedMaterial( { color: 0x000000,dashSize: 1, gapSize: 0.1, linewidth: 2 } ),THREE.LinePieces );
where getCube() returns
var geometry = new THREE.Geometry()
See example:
http://jsfiddle.net/QHjSM/12/
6 colour filled box on the top are the defalt THREE.CubeGeometry boxes, and selecting them with raycaster works perfect, 6 wireframe are my custom geometry.
Issues:
If you try to click outside the box, but pretty close to it it will catch the box, and if you click inside the box (in the middle of it) it will not catch it neither.
But the most annoying thing is that if you click inside one box, but close to another one sometimes it catches not the wrong one.
I'm not sure can it be done better, tried all the geometry.compute... methods, but still no effect.
Good day, your custom cubes are not in fact cubes. They are just a stack of lines with no cooresponding faces. Your selection is not returning as expected due to the fact that your "cubes" indeed have gapping holes right threw them. What you can do is in your getCube function after you've built the vertices you can then build all your faces in a similar way.
Have a look at this example: Issue with custom geometry and face normal
Generally you'll need to carefully pattern out every 3 set of vertices so that when you build the faces there in a clock-wise direction so that the normals will be computerd correctly. Here's a basic example of adding a face.
geometry.faces.push(new THREE.Face3(1,2,3));
BUT! Note that this will result in the same aforementioned diagonal lines through your wireframe. So, for your use case why not simply use both the basic cube mesh with picking and remove the wireframe then overlay the line drawn boxes as your custom wireframe. Best of both worlds.
FYI, you probably already know but Face4 is gone, so you'll need to use Face3 and some sort of custom wireframe to do this anyway.
Edit:
I did a little test to your fiddle, noticed something strange. Using the CanvasRender, even with the wireframe off the default cube you still see the diagonal lines! I try WebGLRenderer and it's fine. I'll have to look into that one further.
CanvasRenderer
http://jsfiddle.net/QHjSM/13/
WebGLRenderer
http://jsfiddle.net/QHjSM/14/
Me again, hmm it appears those ghosted face lines are visible in all the CanvasRenderer examples that use a MeshBasicMaterial on the Three.js site. The only thing I was able to do was simply reduce the opacity of the cube mesh material to 0.1 to lessen the effect. I suppose the only other method is to switch to the WebGLRenderer but I look forward to being wrong on this :) Here's the last test
http://jsfiddle.net/QHjSM/16/

Threejs create skybox scene

I tried to create a skybox in three.js.
I created 2 scenes. The first is the skybox, and the second is my game scene.
I'm just learning three.js, and I don't really know, why it doesn't work. Only the skybox is rendered, the other scene isn't.
Code: http://jsfiddle.net/5bqFr/
Thanks in advance
What's happening now is that, even if the skybox is being rendered first, you're also writing on the depth buffer. The skybox happens to be closer to the camera than the sphere and that's why you don't see the sphere.
You just need to disable writing into depth:
new THREE.MeshBasicMaterial( { color: 0x0000FF, depthWrite: false } );

Categories