threejs 实现灯光照射模型有阴影

“three”: “^0.169.0”
estudi_taller_carles_fontsere.glb：替换你的模型路径

<template>
  <div class="threejs"></div>
</template>

<script setup>
import { onMounted } from "vue";
import * as THREE from "three";
// 加载器
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
// 控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import { TransformControls } from "three/examples/jsm/controls/TransformControls.js";

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
camera.position.set(0, 100, 0);

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
new OrbitControls(camera, renderer.domElement);

const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(5, 10, 20);
scene.add(directionalLight);

const helper = new THREE.DirectionalLightHelper(directionalLight, 20);
scene.add(helper);

const render = () => {
  if (renderer) {
    renderer.render(scene, camera);
  }
  requestAnimationFrame(render);
};
render();

const transformControls = new TransformControls(camera, renderer.domElement);

const loader = new GLTFLoader();
loader.load("estudi_taller_carles_fontsere.glb", (gltf) => {
  scene.add(gltf.scene);
  transformControls.setMode("rotate");
  transformControls.attach(gltf.scene);
  scene.add(transformControls.getHelper());
});

onMounted(() => {
  document.querySelector(".threejs").appendChild(renderer.domElement);
});
</script>

<style scoped>
.threejs {
  width: 100vw;
  height: 100vh;
}
</style>