3D human body with three.js's game

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

No:8366

1146

←

Prev Next

→

3D human body with three.js
Developer User4160｜Date and time 23/7/15 14:53:43
Build time 11.907 sec｜Game capacity 1.57KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームアプリランキング

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

<DOCTYPE html>
<html>
  <head>
    <title>3D Human Body</title>
    <style>
      body {
        margin: 0;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script>
      // ウェブページ上の描画領域を生成
      const canvas = document.createElement("canvas");
      document.body.appendChild(canvas);

// ウェブGLレンダラーを生成
      const renderer = new THREE.WebGLRenderer({ canvas });

// ウェブGLレンダラーのサイズを設定
      renderer.setSize(window.innerWidth, window.innerHeight);

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

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

// ボディを生成
      const geometry = new THREE.CylinderGeometry(1, 1, 2, 32);
      const material =  new THREE. MeshBasicMaterial({color: 0xff00FF, flatShading: true});
      const body = new THREE.Mesh(geometry, material);
      scene.add(body);

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

body.rotation.x += 0.1;
        body.rotation.y += 0.01;

renderer.render(scene, camera);
      }

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