通过查看文档,scene场景中有两个方法可以添加雾化的效果。
本示例的浏览地址:http://www.ithanmang.com/threejshome/201806/20180624/03-foggy%20scene.html
分别是:线性雾(Fog()),和指数雾(FogExp2()).
查看three.js源码可得知,fog 是scene的属性,因此可以直接初始化。
因此添加雾化效果的方式
var scene = new THREE.Scene();
// 定义线性雾,密度随着距离的增加而线性增长
scene.fog = new THREE.Fog( 0xffffff, 0.015, 100);
参数:hex:雾的颜色,near:场景添加雾的最小距离,far:雾化效果的截止距离。
示例源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>向场景中添加雾化效果</title>
<style>
body {
margin: 0;
overflow: hidden;
}
</style>
<script src="../libs/jquery-1.9.1.js"></script>
<script src="../libs/build/three.min.js"></script>
<script src="../libs/examples/js/libs/dat.gui.min.js"></script>
<script src="../libs/examples/js/libs/stats.min.js"></script>
</head>
<body>
<div id="WebGL-output"></div>
<div id="Stats-output"></div>
<script>
$(function () {
var stats = initStats();
var scene = new THREE.Scene();
// 定义线性雾,密度随着距离的增加而线性增长
scene.fog = new THREE.Fog( 0xffffff, 0.015, 100);
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000);
camera.position.set(-30, 40, 30);
camera.lookAt(scene.position);
var webGlRenderer = new THREE.WebGLRenderer();
webGlRenderer.antialias = true;
webGlRenderer.autoClear = true;
webGlRenderer.setClearColor(0xEEEEEE);
webGlRenderer.setSize(window.innerWidth, window.innerHeight);
webGlRenderer.shadowMap.enabled = true;
webGlRenderer.shadowMap.type = THREE.PCFSoftShadowMap;
$("#WebGL-output").append(webGlRenderer.domElement);
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;
scene.add(plane);
var ambientLight = new THREE.AmbientLight(0x0C0C0C);
scene.add(ambientLight);
var spotLight = new THREE.SpotLight(0xFFFFFF);
spotLight.position.set(-40, 60, -10);
spotLight.castShadow = true;
spotLight.shadow.mapSize.height = 2048;
spotLight.shadow.mapSize.width = 2048;
scene.add(spotLight);
var controls = new function () {
this.rotationSpeed = 0.02;
this.numberOfObjects = scene.children.length;
this.color = scene.fog.color.getStyle();
this.near = scene.fog.near;
this.far = scene.fog.far;
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.CubeGeometry(cubeSize, cubeSize, cubeSize);
var cubeMaterial = new THREE.MeshLambertMaterial({color: Math.random() * 0xffffff});
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.castShadow = true;
cube.receiveShadow = true;
// 让随机出现的小立方位置体限制在平面之内
cube.position.x = -30 + Math.round((Math.random() * planeGeometry.parameters.width));
cube.position.y = 5 + Math.round((Math.random() * 5));
cube.position.z = -20 + Math.round((Math.random() * planeGeometry.parameters.height));
scene.add(cube);
this.numberOfObjects = scene.children.length;
};
};
var gui = new dat.GUI();
gui.add(controls, 'rotationSpeed', 0, 0.5);
gui.add(controls, 'addCube');
gui.add(controls, 'removeCube');
gui.add(controls, 'numberOfObjects').listen();
var fogGui = gui.addFolder("Fog");
fogGui.addColor(controls,'color').onChange(function (e) {
scene.fog.color.setStyle(e);
});
fogGui.add(controls,'near',0,1);
fogGui.add(controls,'far',0,10000);
function render() {
stats.update();
// traverse 方法 在这个对象(scene)和所有子对象(children)像上执行回调
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;
}
});
webGlRenderer.render(scene, camera);
}
// 初始化性能插件
function initStats() {
var stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
$("#Stats-output").append(stats.domElement);
return stats;
}
function animate() {
render();
requestAnimationFrame(animate);
}
animate();
});
</script>
</body>
</html>