The scene of three.js

A THREE.Scene object, sometimes called a scene graph, can be used to hold all the necessary information for a graphical scene. In Three.js, this means THREE.Scene holds all objects, lights, and other objects needed for rendering.
This section is mainly to build a basic scene, and then you can add and delete objects in the scene through the gui.

renderings

insert image description here

source code

The plug-in js introduced [my csdn also has download resources, if you can’t open git, you can download it on csdn]:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link type="text/css" rel="stylesheet" href="../css/index.css" />
		<script src="../libs/three.js"></script>
		<script src="../libs/Stats.js"></script>
		<script src="../libs/dat.gui.js"></script>
		<script src="../libs/TrackballControls.js"></script>
		<script src="../js/util/three_util.js"></script>
	</head>
	<body>
		<div id="webgl-output"></div>
		<script src="../js/2.js"></script>
	</body>
</html>

index.css:

*{
    
    
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	/* overflow: hidden; */
}
body {
    
    
	overflow: hidden;
}

2.js:

var stats = initStats();
var scene = new THREE.Scene();
// scene的雾化效果
scene.fog = new THREE.Fog(0xffffff, 0.015, 100)
//scene.fog = new THREE.FogExp2(0xffffff, 0.01)
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 100);
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(new THREE.Color(0x000000));
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;

var planeGeometry = new THREE.PlaneGeometry(60, 40, 1, 1);
var planeMaterial = new THREE.MeshLambertMaterial({
    
    
	color: 0xffffff
});
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.receiveShadow = true;
plane.rotation.x = -0.5 * Math.PI;
plane.position.x = 0;
plane.position.y = 0;
plane.position.z = 0;

// 添加点光源
scene.add(plane);

camera.position.x = -30;
camera.position.y = 40;
camera.position.z = 30;
camera.lookAt(scene.position);

// 添加环境光
var ambientLight = new THREE.AmbientLight(0x3c3c3c);
scene.add(ambientLight);

// 点光源
var spotLight = new THREE.SpotLight(0xffffff, 1.2, 150, 120);
spotLight.position.set(-40, 60, -10);
spotLight.castShadow = true;
scene.add(spotLight);


document.getElementById("webgl-output").appendChild(renderer.domElement);

var step = 0;

var controls = new function () {
    
    
	this.rotationSpeed = 0.02;
	this.numberOfObjects = scene.children.length;

	this.removeCube = function () {
    
    
		var allChildren = scene.children;
		var lastObject = allChildren[allChildren.length - 1];
		if (lastObject instanceof THREE.Mesh) {
    
    
			scene.remove(lastObject);
			this.numberOfObjects = scene.children.length;
		}
	};

	this.addCube = function () {
    
    

		var cubeSize = Math.ceil((Math.random() * 3));
		var cubeGeometry = new THREE.BoxGeometry(cubeSize, cubeSize, cubeSize);
		var cubeMaterial = new THREE.MeshLambertMaterial({
    
    
			color: Math.random() * 0xffffff
		});
		var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
		cube.castShadow = true;
		cube.name = "cube-" + scene.children.length;

		cube.position.x = -30 + Math.round((Math.random() * planeGeometry.parameters.width));
		cube.position.y = Math.round((Math.random() * 5));
		cube.position.z = -20 + Math.round((Math.random() * planeGeometry.parameters.height));
		cube.rotation.x += controls.rotationSpeed
		cube.rotation.y += controls.rotationSpeed
		cube.rotation.z += controls.rotationSpeed

		// add the cube to the scene
		scene.add(cube);
		this.numberOfObjects = scene.children.length;
	};

	this.outputObjects = function () {
    
    
		console.log(scene.children);
	}
};

var gui = new dat.GUI();
gui.add(controls, 'rotationSpeed', 0, 0.5);
gui.add(controls, 'addCube');
gui.add(controls, 'removeCube');
gui.add(controls, 'outputObjects');
gui.add(controls, 'numberOfObjects').listen();

var trackballControls = initTrackballControls(camera, renderer);
var clock = new THREE.Clock();


render();
function render() {
    
    
	stats.update()
	trackballControls.update(clock.getDelta())
	scene.traverse(function (e) {
    
    
	    if (e instanceof THREE.Mesh && e != plane) {
    
    
	        e.rotation.x += controls.rotationSpeed;
	        e.rotation.y += controls.rotationSpeed;
	        e.rotation.z += controls.rotationSpeed;
	    }
	});
	requestAnimationFrame(render);
	renderer.render(scene, camera);
}

// 定义 resize方法，屏幕尺寸变更时触发
window.addEventListener('resize', onResize, false)
function onResize() {
    
    
	// aspect属性，这个属性表示屏幕的长宽比
	camera.aspect = window.innerWidth / window.innerHeight
	camera.updateProjectionMatrix()
	renderer.setSize(window.innerWidth, window.innerHeight)
}

important point:

This section introduces the application of ambientLight ambient light;
The fog effect of the scene scene.fog = new THREE.Fog(0xffffff, 0.015, 100), from near to far, superimposed linear fog effect;
The fog effect of the scene scene.fog = new THREE.FogExp2(0xffffff, 0.01), from near to far, exponentially increases the fog effect;
scene.remove removes an object;
scene.add adds an object;
scene.children traverses the objects in the scene;
getObjectByName(name, recursive) recursive: recursive , find objects based on name, when recursive is false, only find child elements, if true, find all descendant elements;
traverse(function) can return all elements in the scene, and can also make the callee and all its descendants execute the function function;