fix:修改文章

docs/fea/webgl/intro.md

@@ -46,3 +46,4 @@ group:
 1. [pixi中文](http://pixijs.huashengweilai.com/guide/start/9.make-sprite-from-texture-atlas.html#%E9%80%9A%E8%BF%87%E7%BA%B9%E7%90%86%E8%B4%B4%E5%9B%BE%E9%9B%86%E5%88%9B%E5%BB%BA%E7%B2%BE%E7%81%B5)
 2. [PIXI API大全](https://pixijs.download/release/docs/index.html)
 3. [bit 贴图大全](https://opengameart.org/)
+4. [threeJs](https://techbrood.com/threejs/examples/#webgl_shadowmap_pointlight)

docs/tools/blackMac.md

@@ -0,0 +1,12 @@
+---
+nav:
+  title: 工具
+  path: /tools
+group:
+  title: 💊 黑苹果
+  order: 4
+  path: /blackMac
+---
+
+
+(保姆教程)[https://apple.sqlsec.com/1-%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86/1-1.html]

src/diamond/components/AppMouseClass.js

@@ -0,0 +1,348 @@
+/////鼠标类/////
+/////lb-20191009/////
+import * as THREE from 'three';
+
+import CommonClass from './CommonClass.js';
+
+class AppMouseClass {
+    constructor(scene) {
+        this.scene = scene.scene;
+        this.container = scene.container;
+        this.camera = scene.camera;
+        this.moveObject = scene.moveObject;
+        this.selectObject = scene.selectObject;
+        this.isMouseGroup = false;//是否组
+        this.mouseLeftClickFunc = scene.mouseLeftClickFunc;
+        this.mouseLeftClickCancelFunc = scene.mouseLeftClickCancelFunc;
+        this.mouseRightClickFunc = scene.mouseRightClickFunc;
+        this.mouseRightClickCancelFunc = scene.mouseRightClickCancelFunc;
+        this.mouseMoveFunc = scene.mouseMoveFunc;
+
+        //射线数组及鼠标过滤数组
+        this.intersectArr = scene.intersectArr.length ? scene.intersectArr : this.scene.children;
+        this.mouseArr = scene.mouseArr;
+        this.oldObject = '';
+
+        //鼠标
+        this.mouse = new THREE.Vector2();
+        this.selectCube = ''; //选中的方块
+        this.mouseCircle = '';
+
+        //PC端
+        this.pcclickTime = 0;
+        this.pcLastTap = 0;
+
+        //移动端
+        this.clickTime = 0;
+        this.lastTap = 0;
+
+        //是否PC端
+        this.isPc = new CommonClass().isPc();
+    }
+
+    init() {
+        //this.searchSceneItems();
+        //this.initCircle();
+
+        if (this.isPc) {
+            //监听事件
+            this.initMouseRight();
+            this.container.addEventListener('click', this.onDocumentClick.bind(this), false);
+            this.container.addEventListener('mousemove', this.onDocumentMove.bind(this), false);
+            this.container.addEventListener('dblclick', this.onDocumentDoubleClick.bind(this), false);
+        } else {
+            //监听移动端事件
+            this.container.addEventListener('touchstart', this.onTouchStart.bind(this), {
+                passive: false
+            }); //点击时
+            this.container.addEventListener('touchmove', this.onTouchMove.bind(this), {
+                passive: false
+            }); //移动时
+            this.container.addEventListener('touchend', this.onTouchEnd.bind(this), {
+                passive: false
+            }); //停止时
+            //scope.domElement.addEventListener( 'touchstart', onTouchStart, {passive: false} );
+            //window.addEventListener( 'mousewheel', onDocumentMousewheel, false );
+        }
+
+    };
+
+    //返回选中的设备模型数据
+    returnSelectMesh(event) {
+        if (this.isPc) {
+            // 通过鼠标点击位置,计算出 raycaster 所需点的位置,以屏幕为中心点,范围 -1 到 1
+            this.mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
+            this.mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
+        } else {
+            //移动端点击位置
+            let touch = event.touches[0] ? event.touches[0] : event.changedTouches[0];
+            this.mouse.x = (touch.pageX / window.innerWidth) * 2 - 1;
+            this.mouse.y = -(touch.pageY / window.innerHeight) * 2 + 1;
+        }
+
+        let raycaster = new THREE.Raycaster();
+        raycaster.setFromCamera(this.mouse, this.camera);
+        let intersects = raycaster.intersectObjects(this.intersectArr, true);
+
+        return intersects;
+    };
+
+    //鼠标左键点击
+    onDocumentClick(event) {
+        let intersects = this.returnSelectMesh(event);
+        //左键点击
+        this.leftClick(event, intersects)
+
+        event.preventDefault();
+    };
+
+    //左键点击
+    leftClick(event, intersects) {
+        this.clearPageElement();
+
+        if (intersects.length > 0) {
+            //对象筛选
+            this.getItem(intersects);
+            this.scene.moveObject = this.moveObject;
+            this.scene.selectObject = this.moveObject;
+            this.selectObject = this.moveObject;
+
+            //创建外框
+            if (this.selectObject) {
+                this.createModelBorder();
+
+                this.mouseLeftClickFunc && this.mouseLeftClickFunc();
+            } else {
+                return false;
+            }
+        }else{
+            this.mouseLeftClickCancelFunc && this.mouseLeftClickCancelFunc();
+        }
+    };
+
+    //加载鼠标右键
+    initMouseRight() {
+        this.container.oncontextmenu = (event) => {
+            this.onDocumentRightClick(event);
+
+            return false; //屏蔽浏览器自带的右键菜单
+        };
+    };
+
+    //鼠标右键点击
+    onDocumentRightClick(event) {
+        let intersects = this.returnSelectMesh(event);
+        //选中并执行显示各类右键菜单
+        this.rightClick(event, intersects);
+    };
+
+    //右键点击
+    rightClick(event, intersects) {
+        this.clearPageElement();
+
+        if (intersects.length > 0) {
+            //对象筛选
+            this.getItem(intersects);
+            this.scene.moveObject = this.moveObject;
+            this.scene.selectObject = this.moveObject;
+            this.selectObject = this.moveObject;
+
+            //创建外框
+            if (this.selectObject) {
+                this.createModelBorder();
+
+                this.mouseRightClickFunc && this.mouseRightClickFunc();
+            } else {
+                return false;
+            }
+        }else{
+            this.mouseRightClickCancelFunc && this.mouseRightClickCancelFunc();
+        }
+    }
+
+    //鼠标双击时
+    onDocumentDoubleClick(event) {
+        let intersects = this.returnSelectMesh(event);
+
+        //method:0为左键,1为右键
+        if (intersects.length > 0) {
+            //对象筛选
+            this.getItem(intersects);
+            this.scene.moveObject = this.moveObject;
+            this.scene.selectObject = this.moveObject;
+            this.selectObject = this.moveObject;
+        }
+
+        event.preventDefault();
+    };
+
+    //鼠标移动时
+    onDocumentMove(event) {
+        let intersects = this.returnSelectMesh(event);
+
+        if (intersects.length > 0) {
+            this.oldObject = this.moveObject;
+
+            $('.container-hand').css('cursor', 'auto');
+            for (let i = 0; i < intersects.length; i++) {
+                let obj = intersects[i].object;
+
+                if (this.isMouseGroup) {
+                    this.moveObject = this.checkParent(obj);
+                    if (this.moveObject && this.mouseArr.indexOf(this.moveObject.name) !== -1) {
+                        $('.container-hand').css('cursor', 'pointer');
+
+                        this.mouseMoveFunc && this.mouseMoveFunc();
+                    }
+                    break;
+                } else if (this.mouseArr.indexOf(obj.name) !== -1) { //obj.isMesh && 
+                    $('.container-hand').css('cursor', 'pointer');
+                    this.mouseMoveFunc && this.mouseMoveFunc();
+                    break;
+                }
+
+
+            }
+        }
+
+        event.preventDefault();
+    };
+
+    //移动端操作-点击开始
+    onTouchStart(event) {
+        let touch = event.touches[0] ? event.touches[0] : event.changedTouches[0];
+        if (flagSmallMap)
+            if (touch.pageX > window.innerWidth - mapWidth && touch.pageY > window.innerHeight - mapaHeight) {
+                controls.enabled = false; //鼠标在小地图按下时控制失效
+            }
+        this.clickTime = Date.now();
+    }
+
+    //移动端操作-点击停止
+    onTouchEnd(event) {
+        if (Date.now() - this.clickTime <= 700) {
+            let intersects = this.returnSelectMesh(event);
+            this.leftClick(event, intersects);
+
+            this.onDocumentMove(event);
+
+            if (Date.now() - this.lastTap <= 300) {
+                //双击
+                this.onDocumentDoubleClick(event);
+            }
+
+            //this.lastTap = Date.now();
+
+        } else {
+            let intersects = this.returnSelectMesh(event);
+            this.rightClick(event, intersects);
+
+        }
+        this.lastTap = Date.now();
+
+        return false;
+    }
+
+    //检测GROUP上层
+    checkParent(object) {
+        if (object && object.type == 'Scene') return;
+
+        if (object.type == 'Group') return object;
+
+        let obj = this.checkParent(object.parent);
+        return obj;
+    }
+
+    //对象筛选
+    getItem(intersects) {
+        for (let i = 0; i < intersects.length; i++) {
+            let obj = intersects[i].object;
+
+            //检测组或网格
+            if (this.isMouseGroup) {
+                this.moveObject = this.checkParent(obj);
+                break;
+            } else {
+                if (this.mouseArr.indexOf(obj.name) !== -1) { //obj.isMesh && 
+                    this.moveObject = obj;
+                    break;
+                }
+            }
+        }
+    };
+
+    //所有场景元素 //---
+    searchSceneItems() {
+        this.sceneItems = [];
+        this.scene.traverse(child => {
+            switch (child.type) {
+                case 'Mesh':
+                    this.sceneItems.push(child);
+                    break;
+            }
+        });
+    };
+
+    //创建模型选中外框
+    createModelBorder() {
+        if (this.selectObject) {
+            this.selectCube = new THREE.BoxHelper(this.selectObject, 0xa10000); //BoundingBoxHelper //0x193677
+            this.selectCube.update();
+            this.scene.add(this.selectCube);
+            this.selectCube.renderOrder = window['three3d'] ? window['three3d'].addOrder() : 0;
+        }
+    };
+
+    //重建外框
+    reCreateModelBorder() {
+        this.scene.remove(this.selectCube);
+        this.createModelBorder();
+    }
+
+    //清除监听
+    removeListener() {
+        if (this.isPc) {
+            this.container.removeEventListener('click', this.onDocumentClick.bind(this), false);
+            this.container.removeEventListener('mousemove', this.onDocumentMove.bind(this), false);
+            this.container.addEventListener('dblclick', this.onDocumentDoubleClick.bind(this), false);
+        } else {
+            //监听移动端事件
+            this.container.removeEventListener('touchstart', this.onTouchStart.bind(this), {
+                passive: false
+            }); //点击时
+            this.container.removeEventListener('touchmove', this.onTouchMove.bind(this), {
+                passive: false
+            }); //移动时
+            this.container.removeEventListener('touchend', this.onTouchEnd.bind(this), {
+                passive: false
+            }); //停止时
+        }
+    };
+
+    //清除页面元素
+    clearPageElement() {
+        //面板信息
+        this.scene.moveObject = '';
+        this.scene.selectObject = '';
+        this.moveObject = '';
+        this.selectObject = '';
+        this.scene.remove(this.selectCube);
+    }
+
+    initCircle() {
+        let geometry = new THREE.CircleBufferGeometry(50, 50);
+        let material = new THREE.MeshBasicMaterial({
+            color: 0xffffff,
+            side: THREE.DoubleSide,
+            transparent: true,
+            opacity: 0.6
+        });
+        this.mouseCircle = new THREE.Mesh(geometry, material);
+        this.scene.add(this.mouseCircle);
+        this.mouseCircle.visible = false;
+        this.mouseCircle.renderOrder = window['three3d'] ? window['three3d'].addOrder() : 0;
+    }
+
+}
+
+export default AppMouseClass;

src/diamond/components/CommonClass.js

@@ -0,0 +1,70 @@
+import * as THREE from 'three';
+import TWEEN from 'tween';
+
+import {
+	CSS2DRenderer,
+	CSS2DObject
+} from "three/examples/jsm/renderers/CSS2DRenderer.js"
+
+import skybox1 from '../assets/img/skybox/star/1/px.jpg'
+import skybox2 from '../assets/img/skybox/star/1/nx.jpg'
+import skybox3 from '../assets/img/skybox/star/1/py.jpg'
+import skybox4 from '../assets/img/skybox/star/1/ny.jpg'
+import skybox5 from '../assets/img/skybox/star/1/pz.jpg'
+import skybox6 from '../assets/img/skybox/star/1/nz.jpg'
+
+import grasslight from '../assets/img/floor/grasslight.jpg'
+import skyboxOne1 from '../assets/img/back/blue.jpg'
+
+class CommonClass {
+	constructor() {
+		this.pageObj = '';
+
+		this.fixedPageobj();
+	}
+
+	//默认对象值
+	fixedPageobj() {
+		this.pageObj = {
+
+			isVision: false, //版本
+			isTween: false, //动画
+			isStats: false, //性能监测
+			isGui: false, //GUI显示
+			isCutPic: false,//Canvas截图
+			cutPicType: 0,//截图类型，0-PNG，1-JPG，2-BMP
+			isAxes: false, //三维坐标轴
+			isMouse: false, //鼠标射线
+			isMouseGroup: false,//鼠标射线是否拾取GROUP
+			isDoubleClick: false,//双击打印点的位置
+
+			mouseLeftClickFunc: '', //左键点击执行
+			mouseLeftClickCancelFunc: '', //左键取消执行
+			mouseRightClickFunc: '', //右键点击执行
+			mouseRightClickCancelFunc: '', //右键取消执行
+			mouseMoveFunc: '',//鼠标移动执行
+
+			isCameraView: false, //观察者模式
+			isSceneRotate: false, //场景旋转
+			isControlRotate: false, //物体旋转
+
+			isLimitControl: false, //限制地平线上
+
+			isHalfRenderer: false,//帧数对半
+			isCss2dRenderer: false, //CSS2D
+			isCss3dRenderer: false, //CSS3D
+
+
+			groundMethod: 0, //地板样式
+			backGound: grasslight, //地板背景
+			skyboxMethod: 0,//场景背景方式
+			skyboxOne: skyboxOne1, //场景背景-单一
+			skybox: [skybox1, skybox2, skybox3, skybox4, skybox5, skybox6], //场景背景-天空盒
+			guiParams: {}, //GUI参数
+			mouseArr: []//鼠标射线数组
+		};
+	}
+
+}
+
+export default CommonClass;

src/diamond/components/ThreeClass.js

@@ -0,0 +1,550 @@
+import * as THREE from 'three';
+
+import {
+    WEBGL
+} from "three/examples/jsm/WebGL.js"
+import {
+    OrbitControls
+} from "three/examples/jsm/controls/OrbitControls.js"
+import Stats from 'three/examples/jsm/libs/stats.module.js';
+import {
+    GUI
+} from 'three/examples/jsm/libs/dat.gui.module.js';
+import TWEEN from 'tween';
+import {
+    CSS2DRenderer,
+    CSS2DObject
+} from "three/examples/jsm/renderers/CSS2DRenderer.js"
+import {
+    CSS3DRenderer,
+    CSS3DObject
+} from "three/examples/jsm/renderers/CSS3DRenderer.js"
+
+import CommonClass from './CommonClass.js';
+import AppMouseClass from './AppMouseClass.js';
+
+import textureFloor from '../assets/img/floor/starcross.png'
+import textureFloor2 from '../assets/img/floor/star.png'
+import textureFloor3 from '../assets/img/floor/stargrid.png'
+
+class ThreeClass {
+    constructor(pageObj) {
+        this.pageObj = pageObj;
+        this.common = new CommonClass();
+
+        //获取界面大小
+        this.W = window.innerWidth;
+        this.H = window.innerHeight;
+
+        //动画计时
+        this.delta = '';
+        this.clock = new THREE.Clock();
+
+        //初始化
+        this.loadTime = 100; //加载时间计时
+        this.renderOrder = 100;
+
+        //基础
+        this.container = '';
+        this.scene = '';
+        this.lightScene = '';
+        this.camera = ''; //场景摄像机
+        this.controls = ''; //控制
+        this.renderer = '';
+        this.css2dRenderer = '';
+        this.css3dRenderer = '';
+        this.stats = '';
+        this.gui = '';
+        this.axes = '';
+
+        this.cameraView = ''; //观测摄像机
+
+        //鼠标
+        this.intersectArr = [];
+        this.moveObject = '';
+        this.selectObject = '';
+
+        //是否
+        this.flagLoad = false; //是否加载
+        this.flagHalf = false;
+        this.interval_load = '';
+
+        //参数
+        this.skyboxMethod = this.pageObj.skyboxMethod;
+        this.skyboxOne = this.pageObj.skyboxOne;
+        this.skybox = this.pageObj.skybox;
+        this.backGound = this.pageObj.backGound;
+        this.guiParams = this.pageObj.guiParams;
+        this.mixerArray = [];
+        this.mouseArr = this.pageObj.mouseArr;
+
+        //启用
+        this.isVision = this.pageObj.isVision != '' ? this.pageObj.isVision : false;
+        this.isTween = this.pageObj.isTween != '' ? this.pageObj.isTween : false;
+        this.isStats = this.pageObj.isStats != '' ? this.pageObj.isStats : false;
+        this.isGui = this.pageObj.isGui != '' ? this.pageObj.isGui : false;
+        this.isCutPic = this.pageObj.isCutPic != '' ? this.pageObj.isCutPic : 0;
+        this.cutPicType = this.pageObj.cutPicType != '' ? this.pageObj.cutPicType : false;
+        this.isAxes = this.pageObj.isAxes != '' ? this.pageObj.isAxes : false;
+        this.isMouse = this.pageObj.isMouse != '' ? this.pageObj.isMouse : false;
+        this.isMouseGroup = this.pageObj.isMouseGroup != '' ? this.pageObj.isMouseGroup : false;
+        this.isDoubleClick = this.pageObj.isDoubleClick != '' ? this.pageObj.isDoubleClick : false;
+        this.isCameraView = this.pageObj.isCameraView != '' ? this.pageObj.isCameraView : false;
+        this.isSceneRotate = this.pageObj.isSceneRotate != '' ? this.pageObj.isSceneRotate : false;
+        this.isControlRotate = this.pageObj.isControlRotate != '' ? this.pageObj.isControlRotate : false;
+        this.isLimitControl = this.pageObj.isLimitControl != '' ? this.pageObj.isLimitControl : false;
+        this.isHalfRenderer = this.pageObj.isHalfRenderer != '' ? this.pageObj.isHalfRenderer : false;
+        this.isCss2dRenderer = this.pageObj.isCss2dRenderer != '' ? this.pageObj.isCss2dRenderer : false;
+        this.isCss3dRenderer = this.pageObj.isCss3dRenderer != '' ? this.pageObj.isCss3dRenderer : false;
+
+        this.mouseLeftClickFunc = this.pageObj.mouseLeftClickFunc != '' ? this.pageObj.mouseLeftClickFunc : '';
+        this.mouseLeftClickCancelFunc = this.pageObj.mouseLeftClickCancelFunc != '' ? this.pageObj.mouseLeftClickCancelFunc : '';
+        this.mouseRightClickFunc = this.pageObj.mouseRightClickFunc != '' ? this.pageObj.mouseRightClickFunc : '';
+        this.mouseRightClickCancelFunc = this.pageObj.mouseRightClickCancelFunc != '' ? this.pageObj.mouseRightClickCancelFunc : '';
+        this.mouseMoveFunc = this.pageObj.mouseMoveFunc != '' ? this.pageObj.mouseMoveFunc : '';
+    }
+
+    //加载
+    load() {
+        this.isVision ? console.log(THREE.REVISION) : '';
+        //兼容性判断
+        if (WEBGL.isWebGLAvailable() === false) {
+            document.body.appendChild('您的浏览器不支持WebGL,请更换Chrome或360浏览器。');
+        } else {
+            this.init();
+        }
+    }
+
+    //初始化
+    init() {
+        this.initCanvas();
+        this.initScene();
+        this.initCamera();
+        this.isCameraView ? this.initCameraView() : '';
+        this.initLight();
+        this.initGround();
+        this.initControls();
+        this.initRenderer();
+        this.initModel();
+        this.initShader();
+
+        this.isStats ? this.initStats() : '';
+        this.isGui ? this.initGui() : '';
+        this.isAxes ? this.initAxes() : '';
+
+        //窗口变化
+        window.addEventListener('resize', this.onWindowResize.bind(this), false);
+
+        this.interval_load = setInterval(() => {
+            if (this.flagLoad) {
+                clearInterval(this.interval_load);
+
+                this.isMouse ? this.initMouse() : '';//鼠标
+                if (this.isDoubleClick) {
+                    $(document).on('dblclick', e => {
+                        this.common.dBlclick(e, this.camera, this.scene);
+                    });
+                }
+
+                this.start();
+                this.animate(); //执行渲染
+            }
+        }, this.loadTime);
+    }
+
+    initModel() { }
+
+    initShader() { }
+
+    start() { }
+
+    //初始化画布
+    initCanvas() {
+        this.container = document.createElement('div');
+        this.container.id = 'div_canvas';
+        this.container.className = 'container-hand';
+        document.body.appendChild(this.container);
+        //document.body.insertBefore(this.container, document.body.firstChild);
+    }
+
+    //初始化场景
+    initScene() {
+        this.scene = new THREE.Scene();
+        this.lightScene = new THREE.Scene();
+
+        //天空盒
+        switch (this.skyboxMethod) {
+            case 2:
+                this.scene.background = new THREE.Color('#000d4d');
+                //this.scene.background = new THREE.Color('#111C51');
+                //this.scene.background = new THREE.Color('#101C4F');
+                //this.scene.background = new THREE.Color('#333333');
+                break;
+            case 1:
+                this.scene.background = new THREE.TextureLoader().load(this.skyboxOne);
+                break;
+            default:
+                this.scene.background = new THREE.CubeTextureLoader().load(this.skybox);
+        }
+
+        //this.scene.fog = new THREE.Fog(this.scene.background, 1, 5000);
+
+        //全景图
+        /* const geometry = new THREE.SphereBufferGeometry(1000, 120, 80);
+        geometry.scale(-1, 1, 1);
+        const texture = new THREE.TextureLoader().load(panorama);
+        const material = new THREE.MeshBasicMaterial({ map: texture });
+        const mesh = new THREE.Mesh(geometry, material);
+        this.scene.add(mesh); */
+    }
+    //初始化摄像机
+    initCamera() {
+        this.camera = new THREE.PerspectiveCamera(30, this.W / this.H, 1, 100000);
+        this.camera.position.set(-357, 96, 166);
+
+        if (this.isCameraView) {
+            let helper = new THREE.CameraHelper(this.camera);
+            this.scene.add(helper);
+        }
+    }
+    //初始化观测摄像机
+    initCameraView() {
+        this.cameraView = new THREE.PerspectiveCamera(30, this.W / this.H, 1, 100000);
+        this.cameraView.position.set(1000, 1000, 1000);
+    }
+    //初始化光线
+    initLight() {
+        this.scene.add(new THREE.AmbientLight(0x555555));
+
+        const light = new THREE.DirectionalLight(0xdfebff, 2);
+        light.position.set(50, 200, 100);
+        light.position.multiplyScalar(1.3);
+        light.castShadow = true;
+        light.shadow.mapSize.width = 1024;
+        light.shadow.mapSize.height = 1024;
+        this.scene.add(light);
+    }
+    //初始化布料背景
+    initGround() {
+        //模式
+        switch (this.pageObj.groundMethod) {
+            case 0:
+                //网格
+                let helper = new THREE.GridHelper(5000, 100);
+                this.scene.add(helper);
+                break;
+            case 1:
+                //草地
+                let loader = new THREE.TextureLoader();
+                let groundTexture = loader.load(this.backGound);
+                groundTexture.wrapS = groundTexture.wrapT = THREE.RepeatWrapping;
+                groundTexture.repeat.set(500, 500);
+                groundTexture.anisotropy = 4;
+
+                let meshMaterial = new THREE.MeshBasicMaterial({
+                    /* side: THREE.BackSide,
+                    map: groundTexture,transparent:false,opactiy:0, needUpdate:true,fog:false */
+                    map: groundTexture
+                });
+                meshMaterial.side = THREE.BackSide;
+
+                let groundMaterial = [];
+                for (var i = 0; i < 6; ++i) {
+                    groundMaterial.push(i == 2 ? new THREE.MeshBasicMaterial({
+                        map: groundTexture
+                    }) : '');
+                }
+
+                this.backGroundMesh = new THREE.Mesh(new THREE.BoxGeometry(1000000, 0, 1000000), groundMaterial);
+                this.backGroundMesh.name = '背景';
+
+                //ground.receiveShadow = true;
+                this.scene.add(this.backGroundMesh);
+                this.backGroundMesh.renderOrder = window['scene3d'] ? window['scene3d'].addOrder() : 0;
+                break;
+            case 2:
+                //地板
+                const planeGeometry = new THREE.PlaneGeometry(5000, 5000);
+                let plane = new THREE.Mesh(planeGeometry);
+                this.texture = new THREE.TextureLoader().load(textureFloor);
+                //水平面旋转并且设置位置
+                plane.rotation.x = -0.5 * Math.PI;
+                //plane.material.update = true;
+                plane.position.set(0, -2, 0);
+                plane.name = 'plane';
+                plane.material = new THREE.MeshBasicMaterial({
+                    map: this.texture,
+                    side: THREE.DoubleSide,
+                    depthTest: false
+                });
+                plane.material.map.matrixAutoUpdate = false;
+                plane.material.map.matrix.identity().scale(300, 300);
+                //plane.material.map.needsUpdate = true;
+                plane.material.map.wrapS = plane.material.map.wrapT = THREE.RepeatWrapping;
+                //plane.receiveShadow = true;
+                this.scene.add(plane);
+                break;
+            case 3:
+                //地板
+                const planeGeometry2 = new THREE.PlaneGeometry(5000, 5000);
+                let plane2 = new THREE.Mesh(planeGeometry2);
+                this.texture = new THREE.TextureLoader().load(textureFloor2);
+                //水平面旋转并且设置位置
+                plane2.rotation.x = -0.5 * Math.PI;
+                //plane.material.update = true;
+                plane2.position.set(0, -2, 0);
+                plane2.name = 'plane';
+                plane2.material = new THREE.MeshBasicMaterial({
+                    map: this.texture,
+                    side: THREE.DoubleSide,
+                    depthTest: false,
+                    color: '0x00FFFF'
+                });
+                plane2.material.map.matrixAutoUpdate = false;
+                plane2.material.map.matrix.identity().scale(150, 150);
+                //plane.material.map.needsUpdate = true;
+                plane2.material.map.wrapS = plane2.material.map.wrapT = THREE.RepeatWrapping;
+                //plane.receiveShadow = true;
+                this.scene.add(plane2);
+                break;
+            case 4:
+                //地板
+                const planeGeometry3 = new THREE.PlaneGeometry(5000, 5000);
+                let plane3 = new THREE.Mesh(planeGeometry3);
+                this.texture = new THREE.TextureLoader().load(textureFloor3);
+                //水平面旋转并且设置位置
+                plane3.rotation.x = -0.5 * Math.PI;
+                //plane.material.update = true;
+                plane3.position.set(0, -2, 0);
+                plane3.name = 'plane';
+                plane3.material = new THREE.MeshBasicMaterial({
+                    map: this.texture,
+                    side: THREE.DoubleSide,
+                    depthTest: false,
+                    color: '0x00FFFF'
+                });
+                plane3.material.map.matrixAutoUpdate = false;
+                plane3.material.map.matrix.identity().scale(60, 60);
+                //plane.material.map.needsUpdate = true;
+                plane3.material.map.wrapS = plane3.material.map.wrapT = THREE.RepeatWrapping;
+                //plane.receiveShadow = true;
+                this.scene.add(plane3);
+                break;
+        }
+
+    }
+    //加载界面控制器
+    initControls() {
+        this.controls = new OrbitControls(this.isCameraView ? this.cameraView : this.camera, this.container);
+        this.isLimitControl ? this.controls.maxPolarAngle = Math.PI * 0.499 : '';
+        //设置相机距离原点的最近距离
+        this.controls.minDistance = 10;
+        //设置相机距离原点的最远距离
+        this.controls.maxDistance = 10000;
+        this.isControlRotate ? this.controls.autoRotate = true : '';
+    }
+    //鼠标
+    initMouse() {
+        if (window['appmouse']) {
+            window['appmouse'].removeListener(this);
+            window['appmouse'] = null;
+        }
+
+        window['appmouse'] = new AppMouseClass(this);
+        window['appmouse'].isMouseGroup = this.isMouseGroup;
+        window['appmouse'].init();
+    }
+    //加载渲染器
+    initRenderer() {
+        //标签
+        if (this.isCss2dRenderer) {
+            this.css2dRenderer = new CSS2DRenderer();
+            this.css2dRenderer.setSize(this.W, this.H);
+            this.css2dRenderer.domElement.style.position = 'absolute';
+            this.css2dRenderer.domElement.style.top = 0;
+            this.container.appendChild(this.css2dRenderer.domElement);
+        }
+
+        //canvas
+        if (this.isCss3dRenderer) {
+            this.css3dRenderer = new CSS3DRenderer();
+            this.css3dRenderer.setSize(this.W, this.H);
+            this.css3dRenderer.domElement.style.position = 'absolute';
+            this.css3dRenderer.domElement.style.top = 0;
+            this.container.appendChild(this.css3dRenderer.domElement);
+        }
+
+
+        //场景
+        if (!this.isCutPic) {
+            this.renderer = new THREE.WebGLRenderer({
+                antialias: true,
+                logarithmicDepthBuffer: true,//精度更高的z缓冲，来代替原有的Z缓冲
+                //alpha: true
+            });
+
+        } else {
+            //开启图形缓冲区用于截图
+            this.renderer = new THREE.WebGLRenderer({
+                antialias: true,
+                logarithmicDepthBuffer: true,
+                preserveDrawingBuffer: true,//保留图形缓冲区
+                //alpha: true
+            });
+        }
+
+        this.renderer.setSize(this.W, this.H);
+        this.renderer.setPixelRatio(window.devicePixelRatio);
+        this.container.appendChild(this.renderer.domElement);
+
+        this.renderer.gammaInput = true;
+        this.renderer.gammaOutput = true;
+        this.renderer.gammaFactor = 2.2;
+        this.renderer.shadowMap.enabled = true;
+        this.renderer.sortObjects = true;
+
+        this.renderer.physicallyCorrectLights = true;
+        this.renderer.outputEncoding = THREE.sRGBEncoding;
+
+    }
+    //动画
+    animate() {
+        //更新控制器
+        requestAnimationFrame(this.animate.bind(this));
+
+        this.render();
+        this.stats ? this.stats.update() : '';
+    }
+    //渲染
+    render() {
+        this.delta = this.clock.getDelta();
+
+        //动画
+        if (this.mixerArray.length) {
+            for (let i = 0; i < this.mixerArray.length; i++) {
+                this.mixerArray[i].mixer.update(this.delta);
+            }
+        }
+
+        this.isSceneRotate ? this.scene.rotation.y += Math.PI * 0.001 : '';
+        this.controls ? this.controls.update(this.delta) : '';
+
+        this.isTween ? TWEEN.update() : '';
+        this.composer ? this.composer.render(this.delta) : '';
+
+        if (this.isHalfRenderer) this.flagHalf = !this.flagHalf;
+
+        if (this.isHalfRenderer) {
+            if (this.flagHalf) {
+                !this.composer ? this.renderer.render(this.scene, this.isCameraView ? this.cameraView : this.camera) : '';
+                this.isCss2dRenderer ? this.css2dRenderer.render(this.scene, this.isCameraView ? this.cameraView : this.camera) : '';
+                this.isCss3dRenderer ? this.css3dRenderer.render(this.scene, this.isCameraView ? this.cameraView : this.camera) : '';
+            }
+        } else {
+            !this.composer ? this.renderer.render(this.scene, this.isCameraView ? this.cameraView : this.camera) : '';
+            this.isCss2dRenderer ? this.css2dRenderer.render(this.scene, this.isCameraView ? this.cameraView : this.camera) : '';
+            this.isCss3dRenderer ? this.css3dRenderer.render(this.scene, this.isCameraView ? this.cameraView : this.camera) : '';
+        }
+
+
+    }
+
+    ////////////////辅助//////////////
+    //性能监测
+    initStats() {
+        this.stats = new Stats(); // 创建一个性能监视器
+        this.stats.setMode(0); // 0: fps, 1: ms
+        this.stats.domElement.style.position = 'absolute'; // 样式， 坐标
+        this.stats.domElement.style.left = '0px';
+        this.stats.domElement.style.top = '0px';
+        document.getElementById('canvas_frame').appendChild(this.stats.domElement); // 添加到canvas-frame
+
+        !this.isStats ? this.stats = '' : '';
+    }
+    //GUI
+    initGui() {
+        let self = this;
+        this.gui = new GUI(); //创建GUI
+
+        if (this.isCutPic) {
+            this.settings = {
+                '截图'() {
+                    self.cutPic();
+                },
+            };
+            //button
+            let folderCut = this.gui.addFolder('操作');
+            folderCut.add(this.settings, '截图');
+            folderCut.open();
+        }
+    }
+
+    //截图
+    cutPic() {
+        let dom = document.getElementById('div_canvas').firstChild;
+        switch (this.cutPicType) {
+            case 1:
+                this.downLoad(this.saveAsJPG(dom));
+                break;
+            default:
+                this.downLoad(this.saveAsPNG(dom));
+        }
+
+    }
+
+    // 保存成png格式的图片
+    saveAsPNG(canvas) {
+        return canvas.toDataURL('image/png');
+        //return canvas.toDataURL('image/bmp');//bmp有些浏览器不支持
+    }
+
+    // 保存成jpg格式的图片
+    saveAsJPG(canvas) {
+        return canvas.toDataURL('image/jpeg');
+    }
+
+    //下载文件
+    downLoad(url) {
+        let fd = document.createElement('a');
+        fd.download = '截图文件';//默认名是下载
+        fd.href = url;
+        document.body.appendChild(fd);
+        fd.click();
+        fd.remove();
+    }
+
+    //三维坐标轴的显示
+    initAxes() {
+        this.axes = new THREE.AxisHelper(1000000);
+        this.scene.add(this.axes);
+    }
+
+    ///////////////其他///////////////
+    onWindowResize() {
+        //窗口变化时
+        this.W = window.innerWidth;
+        this.H = window.innerHeight;
+
+        this.camera.aspect = this.W / this.H;
+        this.camera.updateProjectionMatrix();
+
+        if (this.isCameraView) {
+            this.cameraView.aspect = this.W / this.H;
+            this.cameraView.updateProjectionMatrix();
+        }
+
+        this.renderer.setSize(this.W, this.H);
+        this.isCss2dRenderer ? this.css2dRenderer.setSize(this.W, this.H) : '';
+        this.isCss3dRenderer ? this.css3dRenderer.setSize(this.W, this.H) : '';
+
+        this.composer ? this.composer.setSize(window.innerWidth, window.innerHeight) : '';
+    }
+    addOrder() {
+        //渲染层级
+        this.renderOrder += 10;
+        return this.renderOrder;
+    }
+
+}
+
+export default ThreeClass;

src/diamond/themes/css/style.css

@@ -0,0 +1,42 @@
+body {
+	margin: 0;
+	padding: 0;
+	font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", sans-serif;
+	font-size: 14px;
+	line-height: 24px;
+
+	/* background-color: #cce0ff; */
+	background-color: #fff;
+	color: #000;
+	width: 100%;
+	height: 100%;
+	overflow: hidden;
+}
+
+canvas {
+	display: block;
+}
+
+.div-pagetip {
+	position: absolute;
+	left: 0;
+	bottom: 0;
+	width: 300px;
+	height: auto;
+	z-index: 99999;
+	margin: 0 auto;
+	background: #1A1A1A;
+	border: 1px solid #ddd;
+}
+
+.div-pagetip-first {
+	text-align: center;
+	padding: 3px;
+	border-bottom: 1px solid #2c2c2c;
+}
+
+.div-pagetip-other {
+	text-indent: 10px;
+	padding: 3px;
+	border-bottom: 1px solid #2c2c2c;
+}

src/diamond/views/index/index.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <title>Three.js钻石展示</title>
+    <meta name="keywords" content="Three.js,钻石展示">
+    <meta name="description" content="Three.js钻石展示的案例">
+    <meta name="author" content="lb2020">
+    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+</head>
+
+<body>
+    <div id="canvas_frame"></div>
+    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
+    <script src="./index.js"></script>
+</body>
+</html>

src/diamond/views/index/index.js

@@ -0,0 +1,236 @@
+import * as THREE from 'three'
+import {
+    HDRCubeTextureLoader
+} from 'three/examples/jsm/loaders/HDRCubeTextureLoader.js';
+import {
+    PMREMGenerator
+} from 'three/examples/jsm/pmrem/PMREMGenerator.js';
+import {
+    PMREMCubeUVPacker
+} from 'three/examples/jsm/pmrem/PMREMCubeUVPacker.js';
+import {
+    BokehShader,
+    BokehDepthShader
+} from 'three/examples/jsm/shaders/BokehShader2.js';
+
+import {
+    GLTFLoader
+} from 'three/examples/jsm/loaders/GLTFLoader.js';
+
+import ThreeClass from '../../components/ThreeClass.js';
+import CommonClass from '../../components/CommonClass.js';
+
+import glb from '../../assets/models/glb/diamond/diamond.glb'
+
+import box1 from '../../assets/img/skybox/diamond/px.hdr'
+import box2 from '../../assets/img/skybox/diamond/nx.hdr'
+import box3 from '../../assets/img/skybox/diamond/py.hdr'
+import box4 from '../../assets/img/skybox/diamond/ny.hdr'
+import box5 from '../../assets/img/skybox/diamond/pz.hdr'
+import box6 from '../../assets/img/skybox/diamond/nz.hdr'
+
+import skybox1 from '../../assets/img/skybox/euro/2/px.jpg'
+import skybox2 from '../../assets/img/skybox/euro/2/nx.jpg'
+import skybox3 from '../../assets/img/skybox/euro/2/py.jpg'
+import skybox4 from '../../assets/img/skybox/euro/2/ny.jpg'
+import skybox5 from '../../assets/img/skybox/euro/2/pz.jpg'
+import skybox6 from '../../assets/img/skybox/euro/2/nz.jpg'
+
+/* 初始加载 */
+$(function () {
+    let common = new CommonClass();
+    let pageObj = $.extend(common.pageObj, {
+        isSceneRotate: true,
+        groundMethod: -1,
+
+    });
+
+    window['scene3d'] = new SceneClass(pageObj);
+    window['scene3d'].load();
+});
+
+class SceneClass extends ThreeClass {
+    constructor(pageObj) {
+        super(pageObj);
+
+        this.objects = [];
+
+        this.gemBackMaterial = new THREE.MeshPhysicalMaterial({
+            map: null,
+            color: 0xF0F0F0,
+            metalness: 1.0,
+            roughness: 0,
+            opacity: 0.3,
+            side: THREE.DoubleSide,
+            transparent: true,
+            envMapIntensity: 10,
+            premultipliedAlpha: true,
+            // TODO: Add custom blend mode that modulates background color by this materials color.
+        });
+
+        this.gemFrontMaterial = new THREE.MeshPhysicalMaterial({
+            map: null,
+            color: 0xF0F0F0,
+            metalness: 0.0,
+            roughness: 0,
+            opacity: 0.1,
+            side: THREE.BackSide,
+            transparent: true,
+            envMapIntensity: 1,
+            premultipliedAlpha: true
+        });
+    }
+
+    initModel() {
+        new GLTFLoader().load(glb, gltf => {
+            gltf.scene.traverse(child => {
+
+                if (child.isMesh) {
+                    child.position.set(0, 20, 0);
+                    child.scale.set(10, 10, 10);
+
+                    let group = new THREE.Group();
+                    let outShape = child.clone();
+                    child.material = this.gemBackMaterial;
+                    outShape.material = this.gemFrontMaterial;
+                    group.add(outShape);
+                    group.add(child);
+                    group.scale.set(1.3, 1.3, 1.3);
+                    this.scene.add(group);
+                    this.objects.push(group);
+
+                    //let mesh = new THREE.Mesh(geometry, material2);
+                    //this.scene.add(mesh);
+
+                    /* this.scene.add(second);
+                    this.scene.add(third);
+                    this.scene.add(fourth);
+                    this.scene.add(fiveth); */
+
+                    //second.material = this.gemFrontMaterial;
+
+                    /* let parent = new THREE.Group();
+                    parent.add(second);
+                    parent.add(child);
+                    this.scene.add(parent); */
+                    //this.objects.push(parent);
+
+                    /* console.log(newArr)
+                    child.geometry.attributes.position.array = newArr;
+                    console.log(child.geometry.attributes.position.array) */
+
+                    /* //顶点个数
+                    let particles = child.geometry.attributes.position.count;
+                    // 临时颜色类型
+                    let color = new THREE.Color();
+                    let colors = [];
+
+                    let n = 1000, n2 = n / 2;
+
+                    for (let i = 0; i < particles; i++) {
+                        let x = Math.random() * n - n2;
+                        let y = Math.random() * n - n2;
+                        let z = Math.random() * n - n2;
+
+                        // colors, 设置颜色, 同理, 从0到1
+                        let vx = (x / n) + 0.6;
+                        let vy = (y / n) + 0.6;
+                        let vz = (z / n) + 0.6;
+
+                        color.setRGB(vx, vy, vz);
+
+                        colors.push(color.r, color.g, color.b);
+                    }
+
+                    child.geometry.addAttribute('color', new THREE.Float32BufferAttribute(colors, 3));
+                    console.log(child.geometry) */
+                }
+            });
+        });
+
+        let box = [box1, box2, box3, box4, box5, box6];
+        new HDRCubeTextureLoader() //.setType(THREE.UnsignedByteType)
+            .load(box, hdrCubeMap => {
+
+                let pmremGenerator = new PMREMGenerator(hdrCubeMap);
+                pmremGenerator.update(window['scene3d'].renderer);
+
+                let pmremCubeUVPacker = new PMREMCubeUVPacker(pmremGenerator.cubeLods);
+                pmremCubeUVPacker.update(window['scene3d'].renderer);
+
+                let hdrCubeRenderTarget = pmremCubeUVPacker.CubeUVRenderTarget;
+
+                this.gemFrontMaterial.envMap = this.gemBackMaterial.envMap = hdrCubeRenderTarget.texture;
+                this.gemFrontMaterial.needsUpdate = this.gemBackMaterial.needsUpdate = true;
+
+                hdrCubeMap.dispose();
+                pmremGenerator.dispose();
+                pmremCubeUVPacker.dispose();
+            });
+
+        this.flagLoad = true;
+    }
+
+    //初始化场景
+    initScene() {
+        super.initScene();
+
+        this.scene = new THREE.Scene();
+
+        //天空盒
+        let skybox = [skybox1, skybox2, skybox3, skybox4, skybox5, skybox6];
+        let picPath = new THREE.CubeTextureLoader();
+        this.scene.background = picPath.load(skybox);
+
+        //全景图
+        /* const geometry = new THREE.SphereBufferGeometry(1000, 120, 80);
+        geometry.scale(-1, 1, 1);
+        const texture = new THREE.TextureLoader().load(panorama);
+        const material = new THREE.MeshBasicMaterial({ map: texture });
+        const mesh = new THREE.Mesh(geometry, material);
+        this.scene.add(mesh); */
+    }
+
+    initGround() {
+
+    }
+    //初始化摄像机
+    initCamera() {
+        super.initCamera();
+        this.camera.position.set(125, 45, 284);
+    }
+    //初始化光线
+    initLight() {
+        super.initLight();
+
+        let n = 20;
+        for (let i = 0; i < n; i++) {
+            let point = new THREE.PointLight(0xFFFFFF * Math.random());
+            point.position.set(150 * Math.random(), 150 * Math.random(), 150 * Math.random());
+            point.decay = 20 * Math.random();
+            point.power = 20 * Math.random() * Math.PI;
+            this.scene.add(point);
+        }
+    }
+
+    //渲染
+    render() {
+        super.render();
+        //颜色及其他参数
+        if (this.gemBackMaterial !== undefined && this.gemFrontMaterial !== undefined) {
+
+            this.gemFrontMaterial.reflectivity = this.gemBackMaterial.reflectivity = 1.0;
+
+            let newColor = this.gemBackMaterial.color;
+            //newColor = new THREE.Color(0x880000);
+            //newColor = new THREE.Color(0x888888);
+            //newColor = new THREE.Color(0x000088);
+            //newColor = new THREE.Color(0x008800);
+
+            this.gemBackMaterial.color = this.gemFrontMaterial.color = newColor;
+        }
+
+        this.renderer.toneMappingExposure = 1.5;
+    }
+
+}