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:8637

900

←

Prev Next

→

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

Script

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdn.rawgit.com/mrdoob/three.js/master/build/three.js"></script>
    <style>
      body { margin: 0; }
    </style>
  </head>
  <body>
    <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: 0xffff00 } );
      var torus = new THREE.Mesh( geometry, material );
      scene.add( torus );

// タップした位置に光源を移動
      function onTouch(event) {
        var mouse = new THREE.Vector3();
        mouse.x = ( event.touches[0].clientX / window.innerWidth ) * 2 - 1;
        mouse.y = - ( event.touches[0].clientY / window.innerHeight ) * 2 + 1;
        mouse.z = 0.5;
        
        mouse.unproject(camera);
        var dir = mouse.sub(camera.position).normalize();
        var distance = - camera.position.z / dir.z;
        var pos = camera.position.clone().add(dir.multiplyScalar(distance));

var light = new THREE.DirectionalLight( 0xffffff, 0.5 );
        light.position.copy(pos);
        scene.add( light );

// 立体の影を計算
        renderer.shadowMap.enabled = true;
        renderer.shadowMap.type = THREE.PCFSoftShadowMap;
        torus.castShadow = true;
        light.castShadow = true;
      }

// タップイベントのリスナーを追加
      document.addEventListener("touchstart", onTouch, false);

// アニメーション
      function animate() {
        requestAnimationFrame(animate);
        torus.rotation.x += 0.01;
        torus.rotation.y += 0.01;
        renderer.render(scene, camera);
      }

animate();
    </script>
  </body>
</html>