質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.99%

threejs fogについて

受付中

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 425

cheche0830

score 141

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


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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

0

Fog・・・霧ですね

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

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

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

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>three.js canvas - particles - sprites</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <style>
            body {
                background-color: #000000;
                margin: 0px;
                overflow: hidden;
            }

            a {
                color: #0078ff;
            }
        </style>
    </head>
    <body>

        <script src="../build/three.js"></script>

        <script src="js/renderers/Projector.js"></script>
        <script src="js/renderers/CanvasRenderer.js"></script>

        <script src="js/libs/stats.min.js"></script>
        <script src="js/libs/tween.min.js"></script>

        <script>

            var container, stats;
            var camera, scene, renderer, particle;
            var mouseX = 0, mouseY = 0;

            var windowHalfX = window.innerWidth / 2;
            var windowHalfY = window.innerHeight / 2;

            init();
            animate();

            function init() {

                container = document.createElement( 'div' );
                document.body.appendChild( container );

                camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 5000 );
                camera.position.z = 1000;

                scene = new THREE.Scene();
                scene.background = new THREE.Color( 0x000040 );
                scene.fog = new THREE.Fog( 0x000000, 1000, 2000 );

                var light = new THREE.HemisphereLight( 0xeeeeff, 0x777788, 0.75 );
                light.position.set( 0.5, 1, 0.75 );
                scene.add( light );

                var material = new THREE.SpriteMaterial( {
                    map: new THREE.CanvasTexture( generateSprite() ),
                    blending: THREE.AdditiveBlending,
                    fog: true
                } );

                for ( var i = 0; i < 1000; i++ ) {

                    particle = new THREE.Sprite( material );

                    initParticle( particle, i * 10 );

                    scene.add( particle );
                }

                renderer = new THREE.WebGLRenderer();
                renderer.setPixelRatio( window.devicePixelRatio );
                renderer.setSize( window.innerWidth, window.innerHeight );
                container.appendChild( renderer.domElement );

                stats = new Stats();
                container.appendChild( stats.dom );

                document.addEventListener( 'mousemove', onDocumentMouseMove, false );
                document.addEventListener( 'touchstart', onDocumentTouchStart, false );
                document.addEventListener( 'touchmove', onDocumentTouchMove, false );

                //

                window.addEventListener( 'resize', onWindowResize, false );

            }

            function onWindowResize() {

                windowHalfX = window.innerWidth / 2;
                windowHalfY = window.innerHeight / 2;

                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();

                renderer.setSize( window.innerWidth, window.innerHeight );

            }

            function generateSprite() {

                var canvas = document.createElement( 'canvas' );
                canvas.width = 16;
                canvas.height = 16;

                var context = canvas.getContext( '2d' );
                var gradient = context.createRadialGradient( canvas.width / 2, canvas.height / 2, 0, canvas.width / 2, canvas.height / 2, canvas.width / 2 );
                gradient.addColorStop( 0, 'rgba(255,255,255,1)' );
                gradient.addColorStop( 0.2, 'rgba(0,255,255,1)' );
                gradient.addColorStop( 0.4, 'rgba(0,0,64,1)' );
                gradient.addColorStop( 1, 'rgba(0,0,0,1)' );

                context.fillStyle = gradient;
                context.fillRect( 0, 0, canvas.width, canvas.height );

                return canvas;

            }

            function initParticle( particle, delay ) {

                var particle = this instanceof THREE.Sprite ? this : particle;
                var delay = delay !== undefined ? delay : 0;

                particle.position.set( 0, 0, 0 );
                particle.scale.x = particle.scale.y = Math.random() * 32 + 16;

                new TWEEN.Tween( particle )
                    .delay( delay )
                    .to( {}, 10000 )
                    .onComplete( initParticle )
                    .start();

                new TWEEN.Tween( particle.position )
                    .delay( delay )
                    .to( { x: Math.random() * 4000 - 2000, y: Math.random() * 1000 - 500, z: Math.random() * 4000 - 2000 }, 10000 )
                    .start();

                new TWEEN.Tween( particle.scale )
                    .delay( delay )
                    .to( { x: 0.01, y: 0.01 }, 10000 )
                    .start();

            }

            //

            function onDocumentMouseMove( event ) {

                mouseX = event.clientX - windowHalfX;
                mouseY = event.clientY - windowHalfY;
            }

            function onDocumentTouchStart( event ) {

                if ( event.touches.length == 1 ) {

                    event.preventDefault();

                    mouseX = event.touches[ 0 ].pageX - windowHalfX;
                    mouseY = event.touches[ 0 ].pageY - windowHalfY;

                }

            }

            function onDocumentTouchMove( event ) {

                if ( event.touches.length == 1 ) {

                    event.preventDefault();

                    mouseX = event.touches[ 0 ].pageX - windowHalfX;
                    mouseY = event.touches[ 0 ].pageY - windowHalfY;

                }

            }

            //

            function animate() {

                requestAnimationFrame( animate );

                render();
                stats.update();

            }

            function render() {

                TWEEN.update();

                camera.position.x += ( mouseX - camera.position.x ) * 0.05;
                camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
                camera.lookAt( scene.position );

                renderer.render( scene, camera );

            }

        </script>
    </body>
</html>

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/08/16 23:38

    ありがとうございました。ちなみこれはparticleのように2Dでは使えないですかね・・・
    やってみたんですが変化がなく。。

    キャンセル

  • 2018/08/17 12:00

    https://github.com/mrdoob/three.js/issues/724
    FogはCanvasRendererではまだサポートされてません(もう5年以上前の記載なので、多分サポートする予定はなさそう)

    キャンセル

  • 2018/08/17 18:05

    ありがとうございました!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.99%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる