教室の3Dモデル - AIプログラミングサンプル

教室の3Dモデル

three.js を使って教室の3Dモデルを作ってください。

ChatGPT 4o で試しました。 jishiha.icon

three.js という JavaScript 3D Library があるのは知っていたが使い方は全く知らなかったので AI に作ってもらった。

https://gyazo.com/941c2fd27d6517d58ea8802d7174f245

AIが書いてくれたコード

code:inde.html

<!DOCTYPE html>

<head>

<style>

body { margin: 0; }

canvas { display: block; }

</style>

</head>

<body>

// シーン、カメラ、レンダラーを初期化

const scene = new THREE.Scene();

scene.background = new THREE.Color(0xa0a0a0);

const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);

camera.position.set(10, 10, 20);

camera.lookAt(0, 0, 0);

const renderer = new THREE.WebGLRenderer({antialias: true});

renderer.setSize(window.innerWidth, window.innerHeight);

document.body.appendChild(renderer.domElement);

// 光源

const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);

scene.add(ambientLight);

const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);

directionalLight.position.set(10, 20, 10);

scene.add(directionalLight);

// 床

const floorGeometry = new THREE.PlaneGeometry(20, 20);

const floorMaterial = new THREE.MeshStandardMaterial({color: 0xeeeeee});

const floor = new THREE.Mesh(floorGeometry, floorMaterial);

floor.rotation.x = -Math.PI / 2;

scene.add(floor);

// 壁（前・後・左・右・天井）

const wallMaterial = new THREE.MeshStandardMaterial({color: 0xdedede, side: THREE.BackSide});

const room = new THREE.Mesh(new THREE.BoxGeometry(20, 10, 20), wallMaterial);

room.position.y = 5; // 床から5m上に浮かせてちょうど囲まれるように

scene.add(room);

// 机と椅子の作成関数

function createDesk(x, z) {

const deskMaterial = new THREE.MeshStandardMaterial({color: 0x8b4513});

const top = new THREE.Mesh(new THREE.BoxGeometry(2, 0.2, 1), deskMaterial);

top.position.set(x, 1, z);

scene.add(top);

const legGeo = new THREE.BoxGeometry(0.1, 1, 0.1);

for (let dx of -0.9, 0.9) {

for (let dz of -0.4, 0.4) {

const leg = new THREE.Mesh(legGeo, deskMaterial);

leg.position.set(x + dx, 0.5, z + dz);

scene.add(leg);

}

// 椅子

const chairMaterial = new THREE.MeshStandardMaterial({color: 0x555555});

const seat = new THREE.Mesh(new THREE.BoxGeometry(1, 0.1, 1), chairMaterial);

seat.position.set(x, 0.5, z - 1.5);

scene.add(seat);

const back = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 0.1), chairMaterial);

back.position.set(x, 1, z - 2);

scene.add(back);

}

// 教室内に机と椅子を複数配置

for (let i = -3; i <= 3; i++) {

for (let j = -2; j <= 2; j++) {

createDesk(i * 2.5, j * 2.5);

}

// レンダリングループ

function animate() {

requestAnimationFrame(animate);

renderer.render(scene, camera);

}

animate();

</script>

</body>

</html>