一个嵌入3d模型的前端网页开发的活儿

这个单是客户想要通过threejs嵌入一个3d模型，用来展示一种文化符号。3d模型是gltf格式的。

除了3d模型的展示，页面上还有一些需要排版和定位的描述内容，这块几乎没有啥难度。重难点在于嵌入3d模型这部分。

以下是实现嵌入的关键代码：

   <!--引用的threejs插件-->
    <script src="js/three.js"></script>
    <script src="js/RGBELoader.js"></script>
    <script src="js/GLTFLoader.js"></script>
    <script src="js/OrbitControls.js"></script>

    <script>
      var container = document.createElement("div");
      container.className = "left-part";
      document.body.appendChild(container);

      var camera = new THREE.PerspectiveCamera(
        45,
        (window.innerWidth * 0.6) / window.innerHeight,
        5,
        10000
      );
      camera.position.set(0, 150, 100);

      var scene = new THREE.Scene();

      var renderer = new THREE.WebGLRenderer({
        antialias: true,
        alpha: true,
      });
      renderer.setSize(window.innerWidth * 0.6, window.innerHeight);
      renderer.setPixelRatio(window.devicePixelRatio);
      container.appendChild(renderer.domElement);
      renderer.inputEncoding = true;
      renderer.outputEncoding = THREE.sRGBEncoding;

      var hemiLight;
      hemiLight = new THREE.HemisphereLight(0xffffff, 0xffffff, 0.1);
      hemiLight.position.set(0, 500, 0);
      scene.add(hemiLight);

      var pointLight = new THREE.PointLight(0xffffff, 0.1);
      scene.add(pointLight);

      var ambientLight = new THREE.AmbientLight(0xffffff, 0.2);
      scene.add(ambientLight);

      var controls1 = new THREE.OrbitControls(camera, container);
      controls1.target.set(-31.21175058630257, 154.64532102109547, 163.72905);

      var poster = [];
      var mains = [];
      var mixer = [],
        action = [];
      var clock = new THREE.Clock();
      var gltfLoader = new THREE.GLTFLoader();

      var textureCube = new THREE.RGBELoader().setDataType(
        THREE.UnsignedByteType
      );
      textureCube.load("textures/7.hdr", function (texture) {
        var pmremGenerator = new THREE.PMREMGenerator(renderer);
        pmremGenerator.compileEquirectangularShader();
        var cubeRenderTarget = pmremGenerator.fromEquirectangular(texture);
        textureCube = cubeRenderTarget.texture;
        texture.dispose();

        gltfLoader.load("models/a1.gltf", function (gltf) {
          thismodel33 = gltf.scene;
          thismodel33.scale.set(100, 100, 100);
          thismodel33.position.set(0, 2000, 0);
          thismodel33.traverse(function (child) {
            if (child.isMesh) {
              child.material = child.material.clone();
              child.material.lightMap = child.material.aoMap;
              child.material.envMap = textureCube;
            }
          });
          scene.add(thismodel33);
        });
      });

      window.addEventListener("resize", onWindowResize, false);

      function onWindowResize(event) {
        camera.aspect = (window.innerWidth * 0.6) / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth * 0.6, window.innerHeight);
      }

      render();

      function render() {
        requestAnimationFrame(render);
        pointLight.position.copy(camera.position);
        pointLight.scale.copy(camera.scale);
        controls1.update(); //控制器更新
        renderer.clear();
        renderer.render(scene, camera);
      }
    </script>