JQuery+Three.js实现产品3D模型展示

 JQuery+Three.js

JQuery相较于以前，使用的频率已经越来越少了，但仍然有些公司会采用该框架进行一些项目的维护工作，基于此，对于有些想要在网站上展示3D模型的需求，结合Three.js来实现，就显得很有必要了。

JQuery中引入Three.js

不同于Vue，React等框架可以直接通过npm安装Three.js的包，JQuery不支持此种方式，它需要另外下载Three.js的压缩包，将其解压，并放置到代码目录下，记住，需要放到static或者public的大目录下，否则会出现报错，这一点通过ES6引入的方式也是类似。

目前github上最新的Three.js包是ES6形式的，如果将其放置到代码目录下引入，也会出现报错，只有下载之前Three.js老版本的包，才能将其成功引入。

将Three.js放到指定文件夹之后，在需要展示的页面引入three.js，不同于ES6的引入方式，JQuery需要通过script引入

其他模块的引入也类似，比如GLTFLoader，OrbitControls，gui等等，可根据需要按需引入

初始化过程

 引入模块之后，需要初始化变量，这其中涉及到的实例化过程同样也要遵循应有的标准，例如：实例化一个场景和背景颜色

scene = new THREE.Scene();
scene.background = new THREE.Color( 0xffffff );

至于其他过程，与ES6引入的方式类似，加载3D模型并让其动起来

         const model=new THREE.GLTFLoader();
         model.load( 'static/gltf/xxx.glb', function ( gltf ) {
              console.log(gltf)
              const mesh = gltf.scene;
              const s = 1.2;
              //根据初始化映入眼帘的模型需要展示的效果，分别设置模型的尺寸（scale)，位置(position)与旋转角度(rotation)
              mesh.scale.set( s, s, s );
              mesh.position.x=-1;
              mesh.position.y = -5;
              mesh.position.z=5;
              mesh.rotation.y = 1.5;
              mesh.rotation.z = -3;
              mesh.rotation.x=Math.PI/8
              scene.add( mesh );
              //根据需要，选择是否调回模型的play播放方法
              const mixer = new THREE.AnimationMixer( mesh );
              for(let i=0;i{
          isPlay?playBtnDom.innerHTML = '播放':playBtnDom.innerHTML = '停止'
          isPlay=!isPlay
      }