基于Three.js实现3D汽车模型

最新推荐文章于 2024-04-29 10:24:48 发布

止语...

最新推荐文章于 2024-04-29 10:24:48 发布

阅读量1.9k

点赞数

分类专栏： 3D

本文链接：https://blog.csdn.net/qq_41629150/article/details/119327196

版权

3D 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

tips: 运行前请准备好对应的3D模型及Three.js三方库依赖

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="box"></div>
    <script type="module">
      // 注意依赖引入路径，根据自己目录调整
      import THREE from "THREE/build/three.min.js";
      import { GLTFLoader } from "THREE/examples/jsm/loaders/GLTFLoader.js";
      import { OrbitControls } from "THREE/examples/jsm/controls/OrbitControls.js";
      class Car {
        scene;
        renderer;
        innerwidth = innerWidth;
        innerHeight = innerHeight;

        constructor() {
          this.init();
        }

        async init() {
          // 加载gltf3D汽车模型配置文件， 3D模型文件可以在https://sketchfab.com/search?q=model+3&sort_by=-relevance&type=models上下载
          const gltf = await this.load3DModel("./models/bentley/scene.gltf");
          // 创建3D试图场景
          this.createScene();
          // 设置场景环境光
          this.setSceneEnvironment();
          // 创建3D虚拟摄像机
          this.createCamera();
          // 将gltf文件的配置添加至主场景中
          this.scene.add(gltf.scene);
          // 渲染试图
          this.loop();
        }

        createScene() {
          this.box = document.getElementById("box");
          this.scene = new THREE.Scene();
          this.renderer = new THREE.WebGLRenderer();
          // 设置渲染边界
          this.renderer.setSize(this.innerwidth, this.innerHeight);
          // 设置场景背景色
          this.scene.background = new THREE.Color(0xeeeeee);
          // 插入dom节点
          this.box.appendChild(this.renderer.domElement);
        }
        
        setSceneEnvironment(){
          // 创建一个新的scence对象，用于设置主场景的environment
          const scene = new THREE.Scene();
          // 设置从某个点想四周发射的光源，用于照亮模型
          scene.add(new THREE.PointLight());
          // 创建网格层，指定初始照亮的物体面
          const mesh = new THREE.Mesh(
            new THREE.BoxGeometry(),
            new THREE.MeshStandardMaterial({ side: THREE.BackSide })
          );
          scene.add(mesh);
          const pmremGenerator = new THREE.PMREMGenerator(this.renderer);
          this.scene.environment = pmremGenerator.fromScene(scene).texture;
        }

        createCamera() {
          this.camera = new THREE.PerspectiveCamera(
            80,
            window.innerWidth / window.innerHeight,
            1,
            10000
          );
          this.camera.position.set(400, 200, 100);
          this.controls = new OrbitControls(this.camera, this.box);
        }

        load3DModel(url) {
          const loader = new GLTFLoader();
          return new Promise((resolve, reject) => {
            loader.load(url, (gltf) => {
              resolve(gltf);
            });
          });
        }

        loop() {
          requestAnimationFrame(() => this.loop());
          this.renderer.render(this.scene, this.camera);
        }
      }
      new Car();
    </script>
  </body>
</html>