学习 three.js (Part 3: Load model)

[nonocast]

在SketchUp中建个小房子，随便拉个长方体，画个中线，然后用move来一下中线，导出glB

main.js

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(3, 2, 5);
camera.lookAt(0, 0, 0);

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

const directionalLight = new THREE.DirectionalLight(0xffffff, 6); // 方向光
directionalLight.position.set(3, 3, 1);
scene.add(directionalLight);

const loader = new GLTFLoader();
loader.load('/house.glb', function (gltf) {
  const model = gltf.scene;
  scene.add(model);

  // 可选：调整模型的位置和缩放
  model.position.set(0, 0, 0);
  model.scale.set(1, 1, 1);

  renderer.render(scene, camera);
}, undefined, function (error) {
  console.error('An error happened while loading the model:', error);
});

最后附上模型: house.glb.zip 代码在: https://github.com/nonocast/hello-map