3D图片碎片切换效果

[{"attributes":{"bold":true},"insert":"1，引入js库"},{"insert":"\n\n注意库之间的依赖关系\n\n分别是：\nhttps://pre.ih5.cn/pubjs/js/three-r79.min.js\nhttps://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js\nhttps://s3-us-west-2.amazonaws.com/s.cdpn.io/175711/OrbitControls-2.js\nhttps://s3-us-west-2.amazonaws.com/s.cdpn.io/175711/bas.js\n\n"},{"insert":{"image":"R10580997-bbf9a007e4262fb1dfbd34800c9294d9_168698_720_720.png"}},{"insert":"\n\n"},{"attributes":{"bold":true},"insert":"2，设置一个行组件额外元素“test”(具体自己定)"},{"insert":"\n这个行高宽都自动，用来装下一步的容器，不然的话，会和案例已有的app div “冲突”，导致页面排版异常，如下图\n\n"},{"insert":{"image":"R10580997-8d6e220492c6bee447bceee464811ce6_25430_426_251.png"}},{"insert":"\n\n"},{"attributes":{"bold":true},"insert":"3，创建切换容器（div）"},{"insert":"\nvar div = document.createElement(\"div\");\ndiv.id='three-container'\ndocument.querySelector(\".test\").appendChild(div)\n\n"},{"insert":{"image":"R10580997-f7e9b19edae3b58e836c0742699678eb_61907_784_367.png"}},{"insert":"\n\n"},{"attributes":{"bold":true},"insert":"4，引入动画函数"},{"insert":"\n\n"},{"insert":{"image":"R10580997-e4c293d97e9fee5d40858dc21dbf40ba_166334_760_807.png"}},{"insert":{"image":"R10512487-1d7b38aeb0bddb342006446aee6d60e8_44780_964_469.png"}},{"insert":"\n"}]