Rotation scaling loop animation with three.js's game

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

No:8398

7982

←

Prev Next

→

Rotation scaling loop animation with three.js
Developer User4183｜Date and time 23/7/15 17:03:53
Build time 19.909 sec｜Game capacity 1.812KB｜

Script

了解です。以下にHTMLファイルとJavaScriptコードの例を示します。この例ではthree.jsを使用して、回転、拡大縮小、ループアニメーションを実現しています。

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>回転拡大縮小アニメーション</title>
    <style>
      body { margin: 0; }
    </style>
  </head>
  <body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>
    <script>
      // シーンを作成
      const scene = new THREE.Scene();

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

// レンダラーを作成
      const renderer = new THREE.WebGLRenderer();
      renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(renderer.domElement);

// ジオメトリを作成
      const geometry = new THREE.BoxGeometry(0.8, 0.8, 0.8);

// マテリアルを作成
      const material = new THREE.MeshNormalMaterial({ color: 0x00ff00 });

// メッシュを作成
      const cube = new THREE.Mesh(geometry, material);
      scene.add(cube);
n=1;
c=0;
      // アニメーションループ
      function animate() {
        requestAnimationFrame(animate);

// キューブを回転させる
        cube.rotation.x += 0.01;
        cube.rotation.y += 0.01;

// キューブを拡大縮小する
        cube.scale.x += 0.01*n;
        cube.scale.y += 0.01*n;
        cube.scale.z += 0.01*n;

renderer.render(scene, camera);
c++;
if(c%250==249)n*=-1;
      }
      animate();
    </script>
  </body>
</html>
```