Creating Shadows by Moving Light A cylindrical three-dimensional object is displayed by JavaScripts Three.js. In addition, a light source is set on the screen, and the shadow of the three-dimensional object is displayed according to the position of the light source. Tapping the screen moves the light source to that position. The shadow of the three-dimensional object also moves according to the position of the moved light source.'s game

Click here for free DL of the app version that can save data.

No:8640

1098

←

Prev Next

→

Creating Shadows by Moving Light A cylindrical thr..ALL
Developer もちきなこ｜Date and time 23/7/17 17:22:47
Build time 21.477 sec｜Game capacity 2.271KB｜

Script

以下は、Three.jsを使用して光を移動させて影を作るサンプルコードです。

このコードでは、Three.jsを使って円筒状の立体を表示し、画面をタップすると光源の位置がタップした位置に移動し、それに応じて立体の影も移動します。

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

Click here for free DL of the app version that can save data.

以下は、Three.jsを使用して光を移動させて影を作るサンプルコードです。

```html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Shadow Game</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
    }
  </style>
</head>
<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>
  <script>
    // レンダラーを作成
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

// シーンを作成
    const scene = new THREE.Scene();

// カメラを作成
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.z = 5;

// 光源を作成
    const light = new THREE.DirectionalLight(0xffffff);
    light.position.set(1, 1, 1);
    scene.add(light);

// 立方体を作成
    const geometry = new THREE.CylinderGeometry(1, 1, 2, 32);
    const material = new THREE.MeshPhongMaterial({ color: 0x00ff00 });
    const cylinder = new THREE.Mesh(geometry, material);
    scene.add(cylinder);

// アニメーションループ
    function animate() {
      requestAnimationFrame(animate);

// 光源の位置をマウスの位置に設定
      light.position.x = (event.clientX / window.innerWidth) * 10 - 5;
      light.position.y = (event.clientY / window.innerHeight) * -10 + 5;

// 影の位置を光源の位置に設定
      cylinder.position.x = light.position.x;
      cylinder.position.y = light.position.y;

renderer.render(scene, camera);
    }

// 画面をタップしたときに実行される関数
    function handleTap(event) {
      event.preventDefault();
      animate();
    }

// 画面をタップしたときにアニメーションを開始
    document.addEventListener('click', handleTap, false);
  </script>
</body>
</html>
```

このコードでは、Three.jsを使って円筒状の立体を表示し、画面をタップすると光源の位置がタップした位置に移動し、それに応じて立体の影も移動します。