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
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]:
- three.js
- dat.gui.js
- Stats.js
- TrackballControls.js
- util.js [csdn link]
- util.js [git link]
<!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;