We Keep Coding

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 Border and overlay - Material Shader

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?

three.js SpotLight orientation (direction) issue

Well, here is the problem,
Actually what I try to achieve is to place, at some places, some spotlights in a basic three.js example.
Here is the way I try to set the spotlight target position :
var light = new THREE.SpotLight(0xFFFFFF);
light.position.set(0,130,0);
light.target.position.set(200,-130,400);
scene.add(light);
The spotlight (light) keeps lighting the point (0,0,0) even if, when I console.log the target.position.(x,y,z) it gives me the right values...
Here is a quick fiddle I did with my full example.
http://jsfiddle.net/1xfno37y/7/

You have to update your light.target after changing (eg. setting position):
light.target.updateMatrixWorld();
Or just add your light.target to the scene:
scene.add( light.target );
Three.js r.71
http://jsfiddle.net/1xfno37y/19/
Further reading: Critical bug with spotLight.target.position #5555

three-js canvas texture lost transparency with WebGL renderer (ok with Canvasrenderer)

I try to render a CircleGeometry over a cube one (from the camera point of view we show both). The cube is with a flat color, and the circle got a canvas with just an arc and no background color.
If I use a Canvasrenderer the canvas transparency is ok, and the arc is just print.
If I use the WebGL renderer, the full circle is filled with the page background color, with just the arc shown on it, so the transparency is lost.
I create a test for this : http://jsfiddle.net/f4u7s/6/
where you can switch between WebGL and CanvasRendering to show the problem.
(look for
// ------------> Switch HERE
//renderer = new THREE.CanvasRenderer();
renderer = new THREE.WebGLRenderer();
)
It sounds alike the three.js textures working with CanvasRenderer, but show up as black with WebGLRenderer ticket, with even with the solution proposed (mesh.dynamic = true), the problem is still here.
Am I missing something?

You need to set material.transparent to true.
plane = new THREE.Mesh(
new THREE.CircleGeometry( 50, 50 ),
new THREE.MeshBasicMaterial( {
map: texture,
transparent: true
} )
);
three.js r.144