Car Rotation（失敗：インポートの不具合）

2025/04/18 Swift

CSS

body { margin: 0; overflow: hidden; }
canvas { display: block; }

Three.jsの読み込み

<!-- Three.js本体 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r161/three.min.js"></script>
<!-- GLTFLoader（車のGLBモデルを読み込むために必要です） -->
<script src="https://cdn.jsdelivr.net/npm/three@0.161.0/examples/js/loaders/GLTFLoader.js"></script>
<!-- OrbitControls（マウスで視点移動ができるようになります） -->
<script src="https://cdn.jsdelivr.net/npm/three@0.161.0/examples/js/controls/OrbitControls.js"></script>

変数の定義

let scene, camera, renderer, controls, car;

シーンの定義

scene = new THREE.Scene();
scene.background = new THREE.Color(0xeeeeee);

カメラの定義

camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 100);
camera.position.set(2, 2, 5);

引数は画角、アスペクト比、描画開始距離、描画終了距離　の4つです

カメラの初期位置をX,Y,Zで設定します

レンダラーの定義

renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

レンダラーはCanvasに描画する物体です

光源

const ambient = new THREE.AmbientLight(0xffffff, 0.6);
scene.add(ambient);

const directional = new THREE.DirectionalLight(0xffffff, 0.8);
directional.position.set(5,5,5);
scene.add(directional);

光源の色とサイズ？を決めてシーンに追加します

マウスによる視点移動

controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;

車モデルの読み込み

const loader = new THREE.GLTFLoader();
loader.load("https://rawcdn.githack.com/KhronosGroup/glTF-Sample-Models/master/2.0/VC/VC.glb",
  function(gltf) {
    car = gltf.scene;
    car.scale.set(0.5, 0.5, 0.5);
    scene.add(car);
  },
  undefined,
  function(error) {
    console.error("モデルの読み込みに失敗しました", error);
  }
);

ウィンドウのリサイズに対応

window.addEventListener("resize", () => {
    camera.aspect = window.innderWidth / window.innerHeight;
    camera.updateProjectMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
});

アニメーション

requestAnimationFrame(animate);
if (car) {
    car.rotation.y += 0.01; // 回転アニメーション
}
controls.update();
renderer.render(scene, camera);

BACK