Newer
Older
Kusanagi-system-M / Three_test.js
// 必要なモジュールの読み込み
import * as THREE from 'three';
import { GLTFLoader } from 'GLTFLoader.js';
import { OrbitControls } from 'OrbitControls.js';

// シーンの作成
const scene = new THREE.Scene();
scene.background = new THREE.Color(0xeeeeee);

// カメラの作成
const camera = new THREE.PerspectiveCamera(
  60,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
camera.position.set(2, 2, 5);

// レンダラーの作成
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// ライトの追加
scene.add(new THREE.AmbientLight(0xffffff, 0.6));
const dirLight = new THREE.DirectionalLight(0xffffff, 1);
dirLight.position.set(5, 10, 7.5);
scene.add(dirLight);

// カメラ操作
const controls = new OrbitControls(camera, renderer.domElement);

// GLB読み込み
const loader = new GLTFLoader();
//loader.load('./test/models/koeki3D/koeki3D.glb',(gltf) => {
loader.load('./読み込みたい任意の3Dファイル.glb',(gltf) => {
    scene.add(gltf.scene);
  },undefined,(error) => {
    console.error('GLB-LoadEroor:', error);
  }
);

// レンダリングループ
function animate() {
  requestAnimationFrame(animate);
  controls.update();
  renderer.render(scene, camera);
}
animate();

// リサイズ対応
window.addEventListener('resize', () => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
});