threejs fogについて

// マテリアルを作成する
var material = new THREE.SpriteMaterial({
  map: new THREE.TextureLoader().load("test.png"),
});
// マテリアルでフォグを有効にする
material.fog = true;

スプライトを作成中、
.fogというプロパティを参考サイトから見つけたのですが、
こちらはいったいなにをしているのでしょうか？
つけてもつけてなくてもいまいち見た目に変化がなく・・・

行動規範の内容に同意します

回答1件

Fog・・・霧ですね

カメラから遠くになればなるほどFog設定で指定した色になっていく感じです
(現実においての霧も遠くになれば白くなる・・・というイメージです)

当然Fog設定が必要になりますので
https://ics.media/tutorial-three/fog.html
あたりを見れば設定方法がわかるかと思います

WebGLRendererでないと動かないのでサンプルを記載します

index.html
1<!DOCTYPE html>
2<html lang="en">
3	<head>
4		<title>three.js canvas - particles - sprites</title>
5		<meta charset="utf-8">
6		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
7		<style>
8			body {
9				background-color: #000000;
10				margin: 0px;
11				overflow: hidden;
12			}
13
14			a {
15				color: #0078ff;
16			}
17		</style>
18	</head>
19	<body>
20
21		<script src="../build/three.js"></script>
22
23		<script src="js/renderers/Projector.js"></script>
24		<script src="js/renderers/CanvasRenderer.js"></script>
25
26		<script src="js/libs/stats.min.js"></script>
27		<script src="js/libs/tween.min.js"></script>
28
29		<script>
30
31			var container, stats;
32			var camera, scene, renderer, particle;
33			var mouseX = 0, mouseY = 0;
34
35			var windowHalfX = window.innerWidth / 2;
36			var windowHalfY = window.innerHeight / 2;
37
38			init();
39			animate();
40
41			function init() {
42
43				container = document.createElement( 'div' );
44				document.body.appendChild( container );
45
46				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 5000 );
47				camera.position.z = 1000;
48
49				scene = new THREE.Scene();
50				scene.background = new THREE.Color( 0x000040 );
51				scene.fog = new THREE.Fog( 0x000000, 1000, 2000 );
52
53				var light = new THREE.HemisphereLight( 0xeeeeff, 0x777788, 0.75 );
54				light.position.set( 0.5, 1, 0.75 );
55				scene.add( light );
56
57				var material = new THREE.SpriteMaterial( {
58					map: new THREE.CanvasTexture( generateSprite() ),
59					blending: THREE.AdditiveBlending,
60					fog: true
61				} );
62
63				for ( var i = 0; i < 1000; i++ ) {
64
65					particle = new THREE.Sprite( material );
66
67					initParticle( particle, i * 10 );
68
69					scene.add( particle );
70				}
71
72				renderer = new THREE.WebGLRenderer();
73				renderer.setPixelRatio( window.devicePixelRatio );
74				renderer.setSize( window.innerWidth, window.innerHeight );
75				container.appendChild( renderer.domElement );
76
77				stats = new Stats();
78				container.appendChild( stats.dom );
79
80				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
81				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
82				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
83
84				//
85
86				window.addEventListener( 'resize', onWindowResize, false );
87
88			}
89
90			function onWindowResize() {
91
92				windowHalfX = window.innerWidth / 2;
93				windowHalfY = window.innerHeight / 2;
94
95				camera.aspect = window.innerWidth / window.innerHeight;
96				camera.updateProjectionMatrix();
97
98				renderer.setSize( window.innerWidth, window.innerHeight );
99
100			}
101
102			function generateSprite() {
103
104				var canvas = document.createElement( 'canvas' );
105				canvas.width = 16;
106				canvas.height = 16;
107
108				var context = canvas.getContext( '2d' );
109				var gradient = context.createRadialGradient( canvas.width / 2, canvas.height / 2, 0, canvas.width / 2, canvas.height / 2, canvas.width / 2 );
110				gradient.addColorStop( 0, 'rgba(255,255,255,1)' );
111				gradient.addColorStop( 0.2, 'rgba(0,255,255,1)' );
112				gradient.addColorStop( 0.4, 'rgba(0,0,64,1)' );
113				gradient.addColorStop( 1, 'rgba(0,0,0,1)' );
114
115				context.fillStyle = gradient;
116				context.fillRect( 0, 0, canvas.width, canvas.height );
117
118				return canvas;
119
120			}
121
122			function initParticle( particle, delay ) {
123
124				var particle = this instanceof THREE.Sprite ? this : particle;
125				var delay = delay !== undefined ? delay : 0;
126
127				particle.position.set( 0, 0, 0 );
128				particle.scale.x = particle.scale.y = Math.random() * 32 + 16;
129
130				new TWEEN.Tween( particle )
131					.delay( delay )
132					.to( {}, 10000 )
133					.onComplete( initParticle )
134					.start();
135
136				new TWEEN.Tween( particle.position )
137					.delay( delay )
138					.to( { x: Math.random() * 4000 - 2000, y: Math.random() * 1000 - 500, z: Math.random() * 4000 - 2000 }, 10000 )
139					.start();
140
141				new TWEEN.Tween( particle.scale )
142					.delay( delay )
143					.to( { x: 0.01, y: 0.01 }, 10000 )
144					.start();
145
146			}
147
148			//
149
150			function onDocumentMouseMove( event ) {
151
152				mouseX = event.clientX - windowHalfX;
153				mouseY = event.clientY - windowHalfY;
154			}
155
156			function onDocumentTouchStart( event ) {
157
158				if ( event.touches.length == 1 ) {
159
160					event.preventDefault();
161
162					mouseX = event.touches[ 0 ].pageX - windowHalfX;
163					mouseY = event.touches[ 0 ].pageY - windowHalfY;
164
165				}
166
167			}
168
169			function onDocumentTouchMove( event ) {
170
171				if ( event.touches.length == 1 ) {
172
173					event.preventDefault();
174
175					mouseX = event.touches[ 0 ].pageX - windowHalfX;
176					mouseY = event.touches[ 0 ].pageY - windowHalfY;
177
178				}
179
180			}
181
182			//
183
184			function animate() {
185
186				requestAnimationFrame( animate );
187
188				render();
189				stats.update();
190
191			}
192
193			function render() {
194
195				TWEEN.update();
196
197				camera.position.x += ( mouseX - camera.position.x ) * 0.05;
198				camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
199				camera.lookAt( scene.position );
200
201				renderer.render( scene, camera );
202
203			}
204
205		</script>
206	</body>
207</html>
208