threejs加载glb三维模型文件--解决全黑的问题

克里斯蒂亚诺更新

已于 2025-02-18 02:13:54 修改

阅读量573

点赞数 3

分类专栏： jiaotong小程序文章标签： webgl

于 2025-02-18 01:36:16 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_36152801/article/details/145695061

版权

jiaotong小程序专栏收录该内容

6 篇文章

订阅专栏

展示：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Three.js OrbitControls Example with Grid and GLTF Model</title>
  <style>
    body { margin: 0; overflow: hidden; }
    canvas { display: block; }
  </style>
</head>
<body>
  <script type="module">
    
   

	    import * as THREE from "three";
	    import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
		import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
		
		

    // 创建场景
    const scene = new THREE.Scene();
    
    // 创建相机
    const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
    camera.position.z = 5; // 设置相机位置

    // 创建渲染器
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    // 创建网格
    const gridHelper = new THREE.GridHelper(1000, 10);
    scene.add(gridHelper);

    // 添加一个环境光源
    const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); // 环境光，增加强度
    scene.add(ambientLight);

    // 添加一个点光源
    const pointLight = new THREE.PointLight(0xffffff, 2, 100); // 强度加大
    pointLight.position.set(5, 5, 5); // 设置点光源位置
    scene.add(pointLight);

    // 使用 OrbitControls 来控制相机
    const controls = new OrbitControls(camera, renderer.domElement);
    controls.enableDamping = true; // 启用阻尼效果
    controls.dampingFactor = 0.25; // 阻尼系数
    controls.screenSpacePanning = false; // 不允许屏幕空间平移

    // 加载 GLTF 模型
    const loader = new GLTFLoader();
    loader.load(
      '../models/zong.glb',  // 模型文件路径
      (gltf) => {
        // 模型加载完成后添加到场景
        scene.add(gltf.scene);
        gltf.scene.scale.set(0.5, 0.5, 0.5); // 可选：缩放模型
        gltf.scene.position.set(0, 0, 0); // 可选：设置模型位置
      },
      (xhr) => {
        console.log((xhr.loaded / xhr.total * 100) + '% loaded'); // 加载进度
      },
      (error) => {
        console.error('Error loading model:', error); // 错误处理
      }
    );

    // 动画循环
    function animate() {
      requestAnimationFrame(animate);

      // 更新控制器
      controls.update();

      // 渲染场景
      renderer.render(scene, camera);
    }

    animate(); // 启动动画

    // 监听窗口大小变化
    window.addEventListener('resize', () => {
      renderer.setSize(window.innerWidth, window.innerHeight);
      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();
    });
  </script>
</body>
</html>

目录结构：

但是我要中直接展示的效果：如下

解决全黑的问题：加入环境光和方向光（类似太阳光）

代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Three.js GLTF Model with Shadows (No Texture)</title>
  <style>
    body { margin: 0; overflow: hidden; }
    canvas { display: block; }
  </style>
</head>
<body>
  <script type="module">
 
 	    import * as THREE from "three";
 	    import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
 		import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
 		
 		
    // 创建场景
    const scene = new THREE.Scene();
        // 设置场景背景颜色为灰白色
        scene.background = new THREE.Color(0xeeeeee); // 设置为灰白色背景

    // 创建相机
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.set(10, 10, 20); // 调整相机位置
    camera.lookAt(0, 0, 0); // 确保相机朝向模型

    // 创建渲染器并启用阴影
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.shadowMap.enabled = true; // 启用阴影映射
    document.body.appendChild(renderer.domElement);

    // 创建网格（为了演示阴影效果）
    const gridHelper = new THREE.GridHelper(500, 10);
    scene.add(gridHelper);

    // 添加一个环境光源（增加强度）
    const ambientLight = new THREE.AmbientLight(0xffffff); // 增强环境光强度
    scene.add(ambientLight);
	
	const directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
	scene.add( directionalLight );

    // 添加一个点光源，并使其投射阴影
    const pointLight = new THREE.PointLight(0xffffff, 2, 100); // 强度加大
    pointLight.position.set(5, 10, 5); // 设置点光源位置
    pointLight.castShadow = true; // 启用点光源的阴影
    scene.add(pointLight);

    // 配置阴影设置
    pointLight.shadow.mapSize.width = 1024;  // 阴影贴图宽度
    pointLight.shadow.mapSize.height = 1024; // 阴影贴图高度
    pointLight.shadow.camera.near = 0.1;  // 阴影近裁剪面
    pointLight.shadow.camera.far = 25;    // 阴影远裁剪面

    // 使用 OrbitControls 来控制相机
    const controls = new OrbitControls(camera, renderer.domElement);
    controls.enableDamping = true; // 启用阻尼效果
    controls.dampingFactor = 0.25; // 阻尼系数
    controls.screenSpacePanning = false; // 不允许屏幕空间平移

    // 加载 GLTF 模型
    const loader = new GLTFLoader();
    loader.load(
      '../models/zong.glb',  // 模型文件路径
      (gltf) => {
        const model = gltf.scene;
        model.castShadow = true;  // 模型投射阴影
        model.receiveShadow = true;  // 模型接收阴影
        scene.add(model);
      },
      (xhr) => {
        console.log((xhr.loaded / xhr.total * 100) + '% loaded'); // 加载进度
      },
      (error) => {
        console.error('Error loading model:', error); // 错误处理
      }
    );

    // 动画循环
    function animate() {
      requestAnimationFrame(animate);

      // 更新控制器
      controls.update();

      // 渲染场景
      renderer.render(scene, camera);
    }

    animate(); // 启动动画

    // 监听窗口大小变化
    window.addEventListener('resize', () => {
      renderer.setSize(window.innerWidth, window.innerHeight);
      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();
    });
  </script>
</body>
</html>