オブジェクトの追加と削除

06-three.jsノート-シーンにフォグエフェクトを追加



06 Three Js Notes Add Fog Effects Scene



ドキュメントを表示することにより、シーンシーンにフォグ効果を追加する方法は2つあります。
この例の参照アドレス： http://ithanmang.com/threeJs/home/201806/20180624/03-fog.html
画像
線形フォグ（Fog（））と指数フォグ（FogExp2（））です。
three.jsのソースコードを見ると、フォグがシーンの属性であるため、直接初期化できることがわかります。
画像
だから霧の効果を追加する方法

var scene = new THREE.Scene() // Define linear fog, density increases linearly with distance scene.fog = new THREE.Fog( 0xffffff, 0.015, 100)

パラメータ：hex：フォグの色、near：シーンがフォグを追加する最小距離、far：フォグエフェクトのカットオフ距離。



サンプルソースコード
<html lang='en'> <head> <meta charset='UTF-8'> <title>Add fog effects to the scenetitle> <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() // Define linear fog, density increases linearly with distance 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 // Let the randomly appearing cubic positions be restricted to the plane 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() // The traverse method executes the callback on this object (scene) and all child objects (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) } // Initialize performance plugin 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>