0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

html javascript で 3D

Posted at

今回はサイトの見栄えをよくするための術を再びご紹介します。

下をクリックしてみてください。

かっけえええ....

ではこのようなものはどのようにして作れれているのでしょうか

今回はサイトに3Dモデルを埋め込む方法を紹介します。

Three.js で3D

まずは基本。ライブラリのダウンロード

今回使うライブラリはhttps://threejs.org/です。

まずは「Code」の「download」をクリックし「three.js-master.zip」をダウウンロードします。

その次に「three.js-master.zip」を解凍し、
開いて最初にある「tree.js-master」というフォルダを取り出します。

ディレクトリ構成

ディレクトリ構造は次のようになります。

.
├── index.js
├── index.html
└── three.js-master/

index.jsのコード

作業用フォルダの「index.js」を編集します。

次のようなものを書きます。

index.js
window.addEventListener("DOMContentLoaded", init);

function init() {
  // 処理を書く
}

関数「init()」には「Three.js」を使用するためのコードを書きます。

index.htmlのコード

作業用フォルダの「index.html」を編集します。

次のようなものを書きます。

index.html
<!DOCTYPE html>
<html>
    <head>
      <meta charset="UTF-8" />
        <!-- モジュール「three.js」を読み込む -->
        <script src="three.js-master\build\three.js"></script>
        <!-- さっきの「index.js」を読み込む -->
        <script src="index.js"></script>
    </head>
    <body>
        <canvas id="myCanvas"></canvas>
    </body>
</html>

処理を書く

回転する立方体

kaiten-rippoutai.js

window.addEventListener("DOMContentLoaded", init);

function init() {
  const width = 960;
  const height = 540;

  // レンダラーを作成
  const renderer = new THREE.WebGLRenderer({
    canvas: document.querySelector("#myCanvas")
  });
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(width, height);

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

  // カメラを作成
  const camera = new THREE.PerspectiveCamera(
    45,
    width / height,
    1,
    10000
  );
  camera.position.set(0, 0, +1000);

  // 箱を作成
  const geometry = new THREE.BoxGeometry(500, 500, 500);
  const material = new THREE.MeshStandardMaterial({
    color: 0x0000ff
  });
  const box = new THREE.Mesh(geometry, material);
  scene.add(box);

  // 平行光源
  const light = new THREE.DirectionalLight(0xffffff);
  light.intensity = 2; // 光の強さを倍に
  light.position.set(1, 1, 1);
  // シーンに追加
  scene.add(light);

  // 初回実行
  tick();

  function tick() {
    requestAnimationFrame(tick);

    // 箱を回転させる
    box.rotation.x += 0.01;
    box.rotation.y += 0.01;

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

ここからダウンロードすることもできます

参考

次回、さらに詳しく解説しようと思います。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?