Home - nooneknows2020/three.js_lesson GitHub Wiki

three.jsの導入

CDNの場合。

用意するファイル

  • index.html
  • main.js
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>My first three.js app</title>
  <style>
    body { margin:0 }
  </style>
  <script type="importmap">
    {
      "imports": {
        "three": "https://cdn.jsdelivr.net/npm/three@<version>/build/three.module.js"
      }
    }
  </script>
</head>
<body>
  <script type="module" src="./main.js"></script>
</body>
</html>

インポートマップを使って、three.jsライブラリとアドオンモジュールを参照する。

<version>をthree.jsの実際のバージョン ("0.149.0"など) に置き換えること。最新バージョンは、npmバージョンリストで確認できる。

import * as THREE from 'three';

console.log("Hello three.js");

ローカルサーバを起動して、表示を確認する。

アドオンの追加

インポートマップにアドオンを記載する。

<script type="importmap">
{
  "imports": {
    "three": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js",
    "three/addons/": "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/"
  }
}
</script>

アドオンをインポートする。

import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

...

const controls = new OrbitControls( camera, renderer.domElement );

最初のシーン

回転する立方体を描画する。

  • シーン、カメラ、レンダラの設定
    • HTML要素にレンダラを追加する
  • ジオメトリ、マテリアル、メッシュの設定
    • シーンにメッシュを追加する
  • レンダリングループ（アニメーション）の設定
    • レンダラにシーンとカメラを追加する
import * as THREE from 'three';

// シーン
const scene = new THREE.Scene();
// カメラ
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
// レンダラ
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

// ジオメトリ
const geometry = new THREE.BoxGeometry( 1, 1, 1 );
// マテリアル
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
// メッシュ
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );

camera.position.z = 5;

// レンダリングループ
function animate() {
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
	renderer.render( scene, camera );
}
renderer.setAnimationLoop( animate );

線の描画

2本の青い線で構成された上向きの矢印を描画する。

import * as THREE from 'three';

// シーン
const scene = new THREE.Scene();
// カメラ
const camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 500);
camera.position.set(0, 0, 100);
camera.lookAt(0, 0, 0);

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

// ジオメトリ
const points = [];
points.push(new THREE.Vector3(-10, 0, 0));
points.push(new THREE.Vector3(0, 10, 0));
points.push(new THREE.Vector3(10, 0, 0));
const geometry = new THREE.BufferGeometry().setFromPoints(points);
// マテリアル
// create a blue LineBasicMaterial
const material = new THREE.LineBasicMaterial({ color: 0x0000ff });
// 線
const line = new THREE.Line(geometry, material);
scene.add(line);
renderer.render(scene, camera);

3Dモデルの読み込み

  • 3Dモデルを用意する
  • GLTFLoaderプラグインを追加する
  • ライトを設定する
  • モデルの大きさやカメラの位置に気を付ける
import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

// シーン
const scene = new THREE.Scene();
// カメラ
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.set(0, 0, 5);
// レンダラ
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

// ライト
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(5, 5, 5);
scene.add(light);

// 3Dモデルの読み込み
let model;
const loader = new GLTFLoader();
loader.load('./teapot/teapot.glb', function(gltf){
  model = gltf.scene;
  model.scale.set(10, 10, 10);
  scene.add(model);
}, undefined, function(error){
  console.error(error);
});

// レンダリングループ
function animate() {
  if(model){
    model.rotation.x += 0.01;
    model.rotation.y += 0.01;
  }
    renderer.render( scene, camera );
}
renderer.setAnimationLoop( animate );
⚠️ **GitHub.com Fallback** ⚠️