“This is the 16th day of my participation in the First Challenge 2022. For details: First Challenge 2022”

The sample code USES three. Js – r73 version: cdnjs.cloudflare.com/ajax/libs/t…

Last time we talked about the types of light and the effects without light. This time we’re going to talk about AmbientLight in threejs

The ambient light

  • Ambient light that has been reflected many times is called ambient light and its original direction cannot be determined. Ambient light is a kind of ubiquitous light. Ambient light sources are considered to be coming from any direction. Therefore, when you specify only the ambient light for the scene, all objects will behave the same regardless of the normal vector. (This is because reflected light can enter your eye from all directions.)
  • The location of ambient light is meaningless.
THREE.AmbientLight = function ( color )
Copy the code
  • Add ambient light to the scene and see how the geometry looks
var param;
var light;
var lightPos
function initLight() {
    var ParamObj = function () {
        this.x = 0;
        this.y = 0;
        this.z = 0;
    }
    param = new ParamObj();
    var gui = new dat.GUI();
    gui.add(param, "x", -10000.10000).name('Location of Ambient Light X')
    gui.add(param, "y", -10000.10000).name('Position of ambient light Y')
    gui.add(param, "z", -10000.10000).name('Position of ambient Light Z')
		// Ambient light is defined as red
    light = new THREE.AmbientLight(0xFF0000);
    light.position.set(param.x, param.y, param.z);
    scene.add(light);

}
Copy the code
  • We added ambient light to the scene and added a GUI to control the XYZ value of the ambient light.
  • No matter how much we change the location of the ambient light, the color of the geometry stays the same, right

What color does green glass see red objects?

  • Why do I look through the green quilt and see red objects as black?
  • First of all, let’s analyze the irradiation situation of the red geometry above us. The material of our geometry is red, and the color of the light is red. According to the reflection color of the material, what we see is red.
// Ambient light is defined as black
light = new THREE.AmbientLight(0x000000); 
Copy the code

  • The black ambient light hits the red geometry, and the geometry doesn’t reflect any light to our eyes, so the geometry turns black.
  • So if I make the green ambient light shining on the red geometry, what color is it?
// Ambient light is defined as green
light = new THREE.AmbientLight(0x00ff00);
Copy the code
  • Answer: Black, too
  • Green glass appears green because it absorbs light of other colors besides green. Red objects, therefore, are red because they reflect red light and absorb light of other colors. The red light reflected from the red object is filtered through the green glass. So red objects look black through green glass.

Codepen sample code

TrackballControls TrackballControls

  • Github address: github.com/JonLim/thre…
  • CDN address: ithanmang. Gitee. IO/threejs/hom…
  • Careful friends will find that we can control the mouse to zoom in and out and drag the scene to change. When the browser size changes, the objects in the scene will also change. Here I refer to the trackball space TrackballControls and SOME processing on CSS
  • Browser style adjustments to hide the browser scroll bar
body {
  margin: 0;
  overflow: hidden;
}
Copy the code
  • Update the camera aspect ratio and change the renderer size when the browser size changes
function threeStart() {.../* Listen on events */
    window.addEventListener('resize', onWindowResize, false);
}

/* Window changes trigger */
function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
}
Copy the code
  • Add the trackball control
    • Trackball control CDN is unstable, it is best to download to local
/* Controller */
function initControls() {
    /* Trackball control */
    controls = new THREE.TrackballControls(camera, renderer.domElement);

    /* Attribute argument */
    controls.rotateSpeed = 0.2;// Rotation speed
    controls.zoomSpeed = 0.2;// Zoom speed
    controls.panSpeed = 0.1;// 平controls

    controls.staticMoving = false;// Static movement, true, no inertia
    controls.dynamicDampingFactor = 0.2;// The smaller the damping coefficient, the larger the slip

    controls.minDistance = 1; // Minimum viewing Angle
    controls.maxDistance = 500;// The maximum Angle is Infinity
}

/* Data update */
function update() {
    controls.update();
}

function animation() {
    renderer.render(scene, camera);
    requestAnimationFrame(animation);
    update()
}

function threeStart() {... initControls(); }Copy the code

conclusion

In this section, we mainly covered the following

  • Type of light – ambient light
  • Reflection and absorption of light
  • TrackballControls TrackballControls