three.js 入門 (12) - OBJファイルの読み込み

OBJファイルの読み込み方法をまとめました。

・three.js@0.133.1
・Node.js v16.13.0

前回

three.js 入門 (11) - 画像テクスチャと動画テクスチャ｜npaka｜note

1. モデルの準備

今回は、three.jsのexamplesの「models」と「textures」を利用します。2つのフォルダをdistフォルダにコピーしてください。

・models
・textures

three.js/examples at dev 揃 mrdoob/three.js

2. OBJファイルの読み込み

OBJファイルの読み込み手順は、次のとおりです。

(1) コードの作成。

・index.js

import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js';

// シーンの準備
const scene = new THREE.Scene();

// カメラの準備
const camera = new THREE.PerspectiveCamera(
  45,
  window.innerWidth / window.innerHeight,
  1,
  2000,
);
camera.position.z = 250;

// レンダラーの準備
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x7fbfff, 1.0);
document.body.appendChild(renderer.domElement);

// ライトの準備
const ambientLight = new THREE.AmbientLight(0xffffff, 0.4);
scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0xffffff);
directionalLight.position.set(-1, 1, 1).normalize();
scene.add(directionalLight);

// テクスチャの読み込み
const textureLoader = new THREE.TextureLoader(manager);
const texture = textureLoader.load('textures/uv_grid_opengl.jpg');

// OBJファイルの読み込み
const objLoader = new OBJLoader();
objLoader.load(
  'models/obj/male02/male02.obj',
  // ロード完了時の処理
  function (obj) {
    // テクスチャの設定
    obj.traverse(function (child) {
      if (child.isMesh) child.material.map = texture;
    });

    // シーンへのモデルの追加
    scene.add(obj);
    obj.position.y = -95;
  },
);

// コントローラの準備
const controls = new OrbitControls(camera, document.body);

// アニメーションループの開始
function animate() {
  requestAnimationFrame(animate);

  // コントローラの更新
  controls.update();

  renderer.render(scene, camera);
}
animate();

(2) 実行。

3. OBJファイル＋MTLファイルの読み込み

OBJファイル+MTLファイルの読み込み手順は、次のとおりです。

(1) コードの作成。

・index.js

import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import { DDSLoader } from 'three/examples/jsm/loaders/DDSLoader.js';
import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader.js';
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js';

// シーンの準備
const scene = new THREE.Scene();

// カメラの準備
const camera = new THREE.PerspectiveCamera(
  45,
  window.innerWidth / window.innerHeight,
  1,
  2000,
);
camera.position.z = 250;

// レンダラーの準備
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x7fbfff, 1.0);
document.body.appendChild(renderer.domElement);

// ライトの準備
const ambientLight = new THREE.AmbientLight(0xffffff, 0.4);
scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0xffffff);
directionalLight.position.set(-1, 1, 1).normalize();
scene.add(directionalLight);

// ローディングマネージャの準備
const manager = new THREE.LoadingManager();
manager.addHandler(/\.dds$/i, new DDSLoader()); // DDSローダーの準備
// manager.addHandler(/\.tga$/i, new TGALoader()); // TGAローダーの準備 (今回は未使用)

// MTLファイルの読み込み
new MTLLoader(manager).load(
  'models/obj/male02/male02_dds.mtl',
  // ロード完了時の処理
  function (materials) {
    materials.preload();

    // OBJファイルの読み込み
    new OBJLoader(manager)
      .setMaterials(materials) // マテリアルの指定
      .load(
        'models/obj/male02/male02.obj', 
        // ロード完了時の処理
        function (object) {
          // シーンへのモデルの追加
          scene.add(object);
          object.position.y = -95;
        });
  },
);

// コントローラの準備
const controls = new OrbitControls(camera, document.body);

// アニメーションループの開始
function animate() {
  requestAnimationFrame(animate);

  // コントローラの更新
  controls.update();

  renderer.render(scene, camera);
}
animate();

(2) 実行。

次回

Unityゲーム プログラミング・バイブル 2nd Generation