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

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

ただいまの
回答率

90.49%

  • Three.js

    125questions

    Three.jsはWebGLをサポートしているJavaScriptの3D描画用ライブラリです。

threeJSでどうしても思った通りの影が出ません........

解決済

回答 1

投稿

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

dialbird

score 323

こんにちは

ThreeJSで綺麗な影が出ないことでの質問です
ThreeJSで影を作るときに行う基本工程は揃えてあるはずなのですが、なぜかこのようなちっぽけな影になってしまいます(画面中央少し下の黒ぽち)
ボールの大きさを変えても変化なしです。

どなたか解決策を教えてください。
お願いいたします。

イメージ説明

$(window).on('load',init);

function init(){
    const width = 800;
    const height = 500;

    //レンダラー
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(width,height);
    renderer.setClearColor(0xd1d1d1,1);
    $('#myCanvas').append(renderer.domElement);
    //カメラ
    const camera = new THREE.PerspectiveCamera(45,width/height,1,1000);
    camera.position.set(400,400,400);
    camera.lookAt(new THREE.Vector3(0,0,0));
    //コントローラ
    var controls = new THREE.OrbitControls(camera);
    //シーン
    const scene = new THREE.Scene();

    //中心おぶじぇくと
    const cGeometry = new THREE.SphereGeometry(30,64,64);
    const cMaterial = new THREE.MeshPhongMaterial({color:'red'});
    const core = new THREE.Mesh(cGeometry,cMaterial);
    core.position.set(0,100,0);
    scene.add(core);

    //地面
    const pGeometry = new THREE.PlaneGeometry(600,600);
    const pMaterial = new THREE.MeshPhongMaterial({color:'#e8ba7b'});
    const plane = new THREE.Mesh(pGeometry,pMaterial);
    plane.rotation.set(-90*Math.PI/180,0,0);
    scene.add(plane);

    //ライト
    const directionalLight = new THREE.DirectionalLight('#fff');
    directionalLight.position.set(1000,1000,1000);
    scene.add(directionalLight);
    const amb = new THREE.AmbientLight('#464646');
    scene.add(amb);


    var directionalLightShadowHelper = new THREE.CameraHelper( directionalLight.shadow.camera);
    scene.add( directionalLightShadowHelper);

    var directionalLightHelper = new THREE.DirectionalLightHelper( directionalLight);
    scene.add( directionalLightHelper);

    const helper = new THREE.AxisHelper(1000);
    scene.add(helper);

    //影の作成に必要な設定をまとめておく
    renderer.shadowMap.enabled = true;
    core.castShadow = true;
    plane.receiveShadow = true;
    directionalLight.castShadow = true;

    //アニメーション開始
    (function animate(){
        requestAnimationFrame(animate);
        renderer.render(scene,camera);
        controls.update();
    }());
}
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

check解決した方法

+1

directionalLight.shadow.cameraメソッドというものをプリセットのまま使っていたことが問題でした!

以下のコードを追加しないと十分に広い範囲のdirectionalLightが手に入らないみたいです!
helperがないと気づけんかった........

//プリセットでは全部5(-5)なので、範囲がすごく狭い
directionalLight.shadow.camera.left = -50;
    directionalLight.shadow.camera.right = 50;
    directionalLight.shadow.camera.top = -50;
    directionalLight.shadow.camera.bottom = 50;

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

関連した質問

同じタグがついた質問を見る

  • Three.js

    125questions

    Three.jsはWebGLをサポートしているJavaScriptの3D描画用ライブラリです。