光源の設定　Three.jsの使い方を勉強してみた

こんにちは！

プログラム学習中のdynaです！

この記事は前回の 「Three.jsを学習してみた、その1　導入から表示まで」 の続きです。

Three.jsの使い方を勉強してみた導入から表示まで

「初めてのThree.js」を使い、学習した記録です。シーン、カメラ、レンダラーメッシュ、ジオメトリとマテリアルなど入門編です。

今回は、 光源を追加してみました。

デモはこちら↓　表示されない場合は右下のRerunを押してね。

See the Pen 初めてのThree.js学習② by dyna (@sakudyna) on CodePen.

1. 光源を追加する
- 1.1. ちょっとハマったポイント
2. 全体のコード

光源を追加する

光源を追加します。

光源を追加する事で、より立体的に見えます。

前回のコードに、光源の設定のコードを追加します。

※光源も種類が複数あったので、今後まとめたいと思います！


 // 光源の設定　色,
  const spotLight = new THREE.SpotLight(0xffffff);
//位置　x、y、z
  spotLight.position.set(-20, 30, -5);
  spotLight.castShadow = true;
  scene.add(spotLight);

// 光源の設定　色,

const spotLight = new THREE.SpotLight(0xffffff);

//位置　x、y、z

spotLight.position.set(-20, 30, -5);

spotLight.castShadow = true;

scene.add(spotLight);

ちょっとハマったポイント

これで表示されるかと思いきや・・・メッシュのマテリアルの種類によって光への反応が異なるようです(;’∀’)

ということで、メッシュ部分を以下のコードに書き換えます。


  // sphere（球）の作成
      const sphereGeometry = new THREE.SphereGeometry(10, 60, 60);
      const sphereMaterial = new THREE.MeshLambertMaterial({color: 0x1597bb});
      const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);

// sphere（球）の作成

const sphereGeometry = new THREE.SphereGeometry(10, 60, 60);

const sphereMaterial = new THREE.MeshLambertMaterial({color: 0x1597bb});

const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);

MeshBasicMaterial　⇒　MeshLambertMaterial　へ。

MeshBasicMaterial　はライトに反応しないそうです。

MeshBasicMaterial
単純なシェーディング（フラットまたはワイヤーフレーム）の方法でジオメトリを描画するためのマテリアル。
この素材はライトの影響を受けません。
引用元：https://threejs.org/docs/#api/en/materials/MeshBasicMaterial

メッシュやマテリアルって何だっけ・・・という方は、
「Three.jsを学習してみた、その1　導入から表示まで」を見てね！

Three.jsの使い方を勉強してみた導入から表示まで

「初めてのThree.js」を使い、学習した記録です。シーン、カメラ、レンダラーメッシュ、ジオメトリとマテリアルなど入門編です。

マテリアルも種類がたくさんあるので、この辺も調べて記事にしたいと思います・・・！

全体のコード


<html>
<head>
   　<meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title>Example dy</title>
    <script type="text/javascript"src="https://cdnjs.cloudflare.com/ajax/libs/three.js/99/three.min.js">　　      </script>
</head>
<body>

<!-- 描画 -->
<div id="output">
</div>

<!-- JSの読み込み -->
<script>

    // once everything is loaded, we run our Three.js stuff.
    function init() {

        // シーンの作成（物体、光源の表示、保持をするオブジェクト）
        const scene = new THREE.Scene();

        // カメラの作成（何が見えるかの設定）
        const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

        // レンダラーの作成（cameraオブジェクトの角度に基づき、sceneオブジェクトがどう見えるか計算してくれる）
        const renderer = new THREE.WebGLRenderer();
        //背景色
        renderer.setClearColor(new THREE.Color(0xFDFDFD));
        //sceneの大きさの通知
        renderer.setSize(window.innerWidth, window.innerHeight);
        //デバイスの表示調整
        renderer.setPixelRatio(window.devicePixelRatio);
       　//影の有効化
        renderer.shadowMap.enabled = true;
      
        // 平面の定義 幅、高さ
        const planeGeometry = new THREE.PlaneGeometry(30, 30);
        // 基本的なマテリアルの作成
        const planeMaterial = new THREE.MeshLambertMaterial({color: 0xcccccc});
        //  平面の定義と、マテリアルを合わせてmeshオブジェクトにする
        const plane = new THREE.Mesh(planeGeometry, planeMaterial);
      
       //plane.receiveShadow = true;

        // planeの配置
        plane.rotation.x = -0.5 * Math.PI;
        plane.position.x = 0;
        plane.position.y = 0;
        plane.position.z = 0;

        // sceneにplaneを追加して表示する
        scene.add(plane);

        // sphere（球）の作成
        const sphereGeometry = new THREE.SphereGeometry(10, 60, 60);
        const sphereMaterial = new THREE.MeshLambertMaterial({color: 0x1597bb});
        const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
        //影の有効化
        //sphere.castShadow = true;


        // sphereの配置
        sphere.position.x = 0;
        sphere.position.y = 10;
        sphere.position.z = 1;

        // sphereをsceneに追加して表示する
        scene.add(sphere);

        // カメラを中心に配置する
        camera.position.x =-30;
        camera.position.y = 40;
        camera.position.z = 30;
        camera.lookAt(scene.position);
      
       　// 光源の設定
        const spotLight = new THREE.SpotLight(0xffffff);
        spotLight.position.set(-20, 30, -5);
        spotLight.castShadow = true;
        scene.add(spotLight);

        // HTMLにレンダラーの出力を追加する
        document.getElementById("output").appendChild(renderer.domElement);
      
       // 初回実行
        turn();
      
        function turn() {
        requestAnimationFrame(turn);

        // 回転させる
        sphere.rotation.x += 0.02;
        sphere.rotation.y += 0.02;

        // renderに指示 cameraをsceneに渡して、表示する
        renderer.render(scene, camera);
        }
 

        
    }
    window.onload = init;

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

100

101

102

103

104

105

106

107

108

<html>

<head>

<title>Example dy</title>

</head>

<body>

</div>

// once everything is loaded, we run our Three.js stuff.

function init() {

// シーンの作成（物体、光源の表示、保持をするオブジェクト）

const scene = new THREE.Scene();

// カメラの作成（何が見えるかの設定）

const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

// レンダラーの作成（cameraオブジェクトの角度に基づき、sceneオブジェクトがどう見えるか計算してくれる）

const renderer = new THREE.WebGLRenderer();

//背景色

renderer.setClearColor(new THREE.Color(0xFDFDFD));

//sceneの大きさの通知

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

//デバイスの表示調整

renderer.setPixelRatio(window.devicePixelRatio);

　//影の有効化

renderer.shadowMap.enabled = true;

// 平面の定義幅、高さ

const planeGeometry = new THREE.PlaneGeometry(30, 30);

// 基本的なマテリアルの作成

const planeMaterial = new THREE.MeshLambertMaterial({color: 0xcccccc});

// 平面の定義と、マテリアルを合わせてmeshオブジェクトにする

const plane = new THREE.Mesh(planeGeometry, planeMaterial);

//plane.receiveShadow = true;

// planeの配置

plane.rotation.x = -0.5 * Math.PI;

plane.position.x = 0;

plane.position.y = 0;

plane.position.z = 0;

// sceneにplaneを追加して表示する

scene.add(plane);

// sphere（球）の作成

const sphereGeometry = new THREE.SphereGeometry(10, 60, 60);

const sphereMaterial = new THREE.MeshLambertMaterial({color: 0x1597bb});

const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);

//影の有効化

//sphere.castShadow = true;

// sphereの配置

sphere.position.x = 0;

sphere.position.y = 10;

sphere.position.z = 1;

// sphereをsceneに追加して表示する

scene.add(sphere);

// カメラを中心に配置する

camera.position.x =-30;

camera.position.y = 40;

camera.position.z = 30;

camera.lookAt(scene.position);

　// 光源の設定

const spotLight = new THREE.SpotLight(0xffffff);

spotLight.position.set(-20, 30, -5);

spotLight.castShadow = true;

scene.add(spotLight);

// HTMLにレンダラーの出力を追加する

document.getElementById("output").appendChild(renderer.domElement);

// 初回実行

turn();

function turn() {

requestAnimationFrame(turn);

// 回転させる

sphere.rotation.x += 0.02;

sphere.rotation.y += 0.02;

// renderに指示 cameraをsceneに渡して、表示する

renderer.render(scene, camera);

}

window.onload = init;

</script>

</body>

</html>

Three.js、楽しいですが奥が深い。

引き続き学習していきたいと思います（＾＾）

ここまで読んで下さりありがとうございます。　

200時間履修でプログラマーとして就職できるレベルへ。テックジム【無料資料請求】

光源の設定 Three.jsの使い方を勉強してみた

光源を追加する

ちょっとハマったポイント

全体のコード

光源の設定　Three.jsの使い方を勉強してみた