つでスカイボックスを作成する方法.js

これは、もともと公開されたcodinhood.com
スカイボックスは、一般的に遠く離れた三次元の背景の幻想を作成するためにビデオゲームで使用されます.スカイボックスは本質的にキューブの両側にテクスチャを持つキューブです.すべての6つのテクスチャは、彼らがはるかに大きな環境の中にある幻想を与えるそれらを囲むように、プレイヤーまたはカメラは、キューブ内に配置されます.reactnativeinfinity.com 宇宙での回転の幻想を作成するには、この手法を使用します.下のcodepenは試してみることができるいくつかの異なるスカイボックスを持っています.クリックして移動する画面をドラッグします.

三つ。jsセットアップ

まず、Aをセットアップするscene , camera , and renderer にinit 関数は3を初期化するために呼び出されます.js私たちはPerspectiveCamera かなり遠くまで広げられた位置で、我々は飛び込む前に箱を見ることができます.また、私たちはTHREE.WEbGLRenderer そしてページの本体に追加します.最後にanimate 関数は、我々が加えるどんなアップデートででも場面を再構築するのを扱います.

let scene, camera, renderer, skyboxGeo, skybox;

function init() {
  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(
    55,
    window.innerWidth / window.innerHeight,
    45,
    30000
  );
  camera.position.set(1200, -250, 20000);

  renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.domElement.id = "canvas";
  document.body.appendChild(renderer.domElement);
  animate();
}
function animate() {
  renderer.render(scene, camera);
  requestAnimationFrame(animate);
}

init();

コア3をインポートします.JSライブラリー.

<script src="https://threejs.org/build/three.min.js"></script>

ビューポートの高さにボディの高さを設定し、我々はキューブを見ることができるので、体に灰色の背景を追加します.

body {
  margin: 0;
  height: 100vh;
  background: #bdc3c7;
}

私たちは任意のオブジェクトを追加していないので、我々は今灰色の背景を参照してください.

3を加える。ジェイボックス

我々は、箱を加えることができますTHREE.BoxGeometry with width , height , and depth 設定する10000 . その後使用THREE.Mesh それにテクスチャを適用するには、この場合、それは純粋にデフォルトになりますwhite テクスチャ.最後に、オブジェクトを呼び出しますanimate 内部の関数init 関数.

function init() {
  ...
  skyboxGeo = new THREE.BoxGeometry(10000, 10000, 10000);
  skybox = new THREE.Mesh(skyboxGeo);
  scene.add(skybox);

  animate();

それが立方体であっても、それはまっすぐにそれを見ているので、それは正方形のように見えます.確認するには、キューブ内の回転アニメーションを追加することができますキューブですanimate 機能

function animate() {
  skybox.rotation.x += 0.005;
  skybox.rotation.y += 0.005;
  renderer.render(scene, camera);
  requestAnimationFrame(animate);
}

スカイボックスメッシュ素材

あなたは無料スカイボックス画像を見つけることができますopengameart.org または“無料スカイボックス画像”のGoogleを検索することができます.一緒にシームレスにメッシュキューブの両側に対応する6つの画像があります.例えば、反応ネイティブ無限大のために、6つのスペース像は以下に示すように異なる側に対応する.

それぞれのイメージは、例えば、対応する側によって名前をつけられるべきです.purplenebula_ft.png フロントイメージです.purplenebula_rt.png 正しいイメージでありpurplenebula_dn.png 下の画像です.これらの画像をキューブに追加するには次の3つの手順があります.

各画像をテクスチャとして読み込む

各テクスチャを材料配列にマップする

スカイボックスキューブにマテリアル配列を追加する

テクスチャとして読み込むイメージ

テクスチャは3で読み込むことができます.使用するJSTextureLoader().load() 関数.The load() メソッドは、パラメータとしてイメージのパスをとります.我々は、6を作成することによって、各画像を読み込むことができますTextureLoader() 以下のような関数:

const ft = new THREE.TextureLoader().load("purplenebula_ft.jpg");
const bk = new THREE.TextureLoader().load("purplenebula_bk.jpg");
const up = new THREE.TextureLoader().load("purplenebula_up.jpg");
const dn = new THREE.TextureLoader().load("purplenebula_dn.jpg");
const rt = new THREE.TextureLoader().load("purplenebula_rt.jpg");
const lf = new THREE.TextureLoader().load("purplenebula_lf.jpg");

しかし、我々のために我々のイメージの全てを通してループする再利用可能な機能をつくる方がよいでしょう.関数を作成するcreatePathStrings() これはファイルイメージ名からパス文字列の配列を生成します.filename .

function createPathStrings(filename) {
  const basePath = "./static/skybox/";
  const baseFilename = basePath + filename;
  const fileType = ".png";
  const sides = ["ft", "bk", "up", "dn", "rt", "lf"];
  const pathStings = sides.map(side => {
    return baseFilename + "_" + side + fileType;
  });

  return pathStings;
}

それぞれのイメージへのパスを表す文字列の配列を作成します.

['./static/skybox/purplenebula_ft.jpg', './static/skybox/purplenebula_bk.jpg', ...]

次に、TextureLoader().load() 上の配列の上のマッピングによって.別の機能を作りましょう.createMaterialArray() , 読み込まれたテクスチャの新しい配列を生成します.また、我々はfilename パラメータcreatePathStrings 関数.

let skyboxImage = "purplenebula";
function createMaterialArray(filename) {
  const skyboxImagepaths = createPathStrings(filename);
  const materialArray = skyboxImagepaths.map(image => {
    let texture = new THREE.TextureLoader().load(image);

    return texture;
  });
  return materialArray;
}

2 .各テクスチャをメッシュ配列にマップする

The MeshBasicMaterial() 三つ.JSメソッドでは、3つに我々のテクスチャを上にマップすることができます.JSマテリアル.これを行う別の関数を作成する代わりに、単にcreateMaterialArray() を返す関数.読み込まれたテクスチャの代わりにJSの材料.

function createMaterialArray(filename) {
  const skyboxImagepaths = createPathStrings(filename);
  const materialArray = skyboxImagepaths.map(image => {
    let texture = new THREE.TextureLoader().load(image);

    return new THREE.MeshBasicMaterial({ map: texture, side: THREE.BackSide }); // <---
  });
  return materialArray;
}

3 .スカイボックスキューブにメッシュ配列を追加する

我々は最終的に我々が上に作成したキューブにメッシュの配列を追加する準備が整いました.まず、変数を作成します.skyboxImage , ベースファイル名を指定します.その変数をcreateMaterialArray メッシュ配列を生成する.最後に、その配列をnew Three.Mesh() 関数.

const skyboxImage = 'purplenebula';

function init() {
...

  const materialArray = createMaterialArray(skyboxImage);
  skyboxGeo = new THREE.BoxGeometry(10000, 10000, 10000);
  skybox = new THREE.Mesh(skyboxGeo, materialArray);
  scene.add(skybox);

  animate();
}

我々のキューブは今、メッシュの配列を持っている必要がありますどのように表示するには、“外側のボックス”ボタンをクリックしてください.

キューブの中にカメラを配置する

我々は、変更することができますcamera 's z 位置20000 to 2000 カメラを立方体の内側に置くこと.

function init()
  ...
  camera.position.set(1200, -250, 2000);
  ...
}

軌道制御

上記の作品は、キューブの中に私たちを置くために、マウスとカメラを制御し、環境を見回すことができればそれが良いでしょう.軌道は3つのパッケージを制御します.JSは私たちにそれを加えることを許します<script> インポート

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

まず、別の変数controls 先頭の初期化に.そして、その変数をOrbitControls 中を通り抜ける方法camera and domElement . 設定を有効にするcontrols.enabled to true . 最後にminDistance and maxDistance ユーザーがキューブの外にズームすることはできません.

let scene, camera, renderer, skyboxGeo, skybox, controls;

function init() {
  ...

  controls = new THREE.OrbitControls(camera, renderer.domElement);
  controls.enabled = true;
  controls.minDistance = 700;
  controls.maxDistance = 1500;

  ...
  animate();
}

次に、animate() 機能追加controls.update() ;

function animate() {
  controls.update();
  renderer.render(scene, camera);
  requestAnimationFrame(animate);
}

今すぐクリックすることができますし、周囲の環境をドラッグして、必要な部分を参照してくださいする必要があります.あなたが再び回転する環境を望むなら、あなたがスペース回転しているように、あなたはautoRotate プロパティー

function init() {
  ...

  controls = new THREE.OrbitControls(camera, renderer.domElement);
  controls.enabled = true;
  controls.minDistance = 700;
  controls.maxDistance = 1500;
  controls.autoRotate = true;
  controls.autoRotateSpeed = 1.0;
  ...
  animate();
}

ウィンドウのサイズ変更

初期化の後にブラウザウィンドウをリサイズすると、キャンバスは新しいウィンドウサイズに合わせてリサイズされません.これを修正するには、camera.aspect and renderer サイズと幅window :

function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;

  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
}

次に、イベントリスナーをwindow resize イベントとこの新しい機能を渡します.このイベントリスナーをinit() 右上の関数animate() コール.

function init() {
  ...
  window.addEventListener('resize', onWindowResize, false);
  animate();
}

キャンバスは現在、ウィンドウでサイズ変更されます.

結論

スカイボックスはすぐに3 D環境の幻想を作成するきちんとした方法です.一般にビデオゲームのために使用されますが、あなたがWebプロジェクトでそれらを実装することができるいくつかの創造的な方法があるかもしれません.