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>