本人主要用于商城商品的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
