Three-dimensional object and shadow A doughnut-shaped three-dimensional object is displayed by JavaScript Three.js. When the screen is tapped, the light source moves to that position, and the shadow of the three-dimensional object is displayed according to the light source.'s game

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

No:8635

478

←

Prev Next

→

Three-dimensional object and shadow A doughnut-sha..ALL
Developer もちきなこ｜Date and time 23/7/17 17:20:07
Build time 16.858 sec｜Game capacity 1.717KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

<!DOCTYPE html>
<html>
  <head>
    <title>ドーナツゲーム</title>
    <style>
      body { margin: 0; }
      canvas { width: 100%; height: 100%; }
    </style>
  </head>
  <body>
    <script src="https://threejs.org/build/three.js"></script>
    <script>
      // Three.jsの初期化
      var scene = new THREE.Scene();
      var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
      var renderer = new THREE.WebGLRenderer();
      renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(renderer.domElement);

// ドーナツ形状の作成
      var geometry = new THREE.TorusGeometry(10, 3, 16, 100);
      var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
      var donut = new THREE.Mesh(geometry, material);
      scene.add(donut);

// 光源の作成
      var light = new THREE.PointLight(0xffffff, 1, 100);
      scene.add(light);

// カメラの位置調整
      camera.position.z = 30;

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

// ドーナツの回転
        donut.rotation.x += 0.01;
        donut.rotation.y += 0.01;

// レンダリング
        renderer.render(scene, camera);
      }

// 画面タップ時の処理（光源の移動）
      function onTouchTap() {
        var x = Math.random() * 40 - 20;
        var y = Math.random() * 40 - 20;
        var z = Math.random() * 40 - 20;
        light.position.set(x, y, z);
      }

document.addEventListener('click', onTouchTap, false);

// アニメーションの開始
      animate();
    </script>
  </body>
</html>