本人主要用于商城商品的3D模型展示：

效果如下：

可旋转可放大的3D模型展示

用法介绍 

(1)如果你想直接使用简单的展示功能那么已经有封装好的js在此 下载引用即可

https://download.csdn.net/download/qq_39070698/12804776

使用方法

首先需要一个容器div

 <div id="container" style="width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;position: relative">



   </div>

然后引入下载的js

使用

 var config =
        {
            gltf: "https://gw.alipayobjects.com/os/lottie-asset/seinjs-homepage/assets/models/sein/sein.gltf", // 模型URL地址
            clearColor: [10, 20, 30, 1], // 背景清除色
            camera: { // 摄像头
                type: "PerspectiveCameraActor",
                options: {
                    aspect: "auto" ,// auto = game.screenWidth / game.screenHeight, 也可以为固定数字
                    far: 100, // 远裁剪面
                    near: 1, // 近裁剪面
                    fov: 60, // 仰角
                    position: [0, 12, -25] // 初始放置位置, x 为 左右翻转， y为上下翻转， z为zoom
                },
                lookAt: [0, 12, 0] // 自身朝向，x,y,z同上
            },
            control: { // 摄像头控制
                type: "CameraOrbitControlComponent",
                options: {
                    enableDamping: true, // 开启阻尼缓动
                    dampingFactor: 0.2, // 阻尼系数
                    zoomMax: 100, // 最大缩放
                    zoomMin: 0.1, // 最小缩放
                    target: [0, 12, 0] // 相机控制器朝向的目标，也是整个轨迹球的中点。
                }
            },
            lights: {  // 光源信息
                "alight": {
                    type: "AmbientLightActor",
                    options: {
                        color: [1,1,1],
                        amount: 0.5
                    }
                },
                "dlight": {
                    type: "DirectionalLightActor",
                    options: {
                        color: [1,1,1],
                        direction: [0, -1, 1],
                        amount: 2
                    }
                }
            }
        }



create3DPlayer(document.getElementById('container'), 'canvas3D', config)

canvas3D是生成的canvas的类名 可以直接用这个类名给canvas写样式

比如 

.canvas{width:100px;height:100px}

(2) 如果想自己封装（前提了解node  webpack typescript语法）

可下载   https://download.csdn.net/download/qq_39070698/12804903

目录如下

下载后首先  yarn  install  或者npm install
源码在src目录下 

这是typescript写的项目 原理是通过该项目  yarn build 后生成两个js文件  在dist目录下  拿出来引用到js项目中使用即可

主要文件  src/目录   index.html