complete share page

static/js/createScheme.js

@@ -171,6 +171,7 @@ function delTexture(index) {
 
 //点击事件：切换贴图
 function changeTexture(index) {
+    if (componentIndex >= 0) {
         if (index < 0)
             return;
         var modelIndex = data.components[componentIndex].modelIndex;
@@ -178,8 +179,8 @@ function changeTexture(index) {
             return;
         data.components[componentIndex].textureIndex = index;
         replaceTexture(data.components[componentIndex].models[modelIndex].modelObj, data.components[componentIndex].textures[index].textureObj);
+    }
 }
-
 //---------------------------------------------------------------------------------------------------------------------
 //ui初始化结束后
 //初始化Threejs

static/js/share.js

@@ -1,4 +1,5 @@
 var data;
+var componentIndex;
 
 $().ready(function () {
     init();
@@ -78,9 +79,96 @@ function init() {
 
 //------------------------------------------------------------------------------
 //界面初始化
+
+
+var swiperComponent;
+var swiperModel;
+var swiperTexture;
+
 function initUi() {
+    $('#ui').show();
+    initComponentList();
+    initSwiper();
+}
+function initComponentList() {
+    for (var index in data.components) {
+        $('#componentList').prepend("<div class= 'swiper-slide' > <div style='text-align: center; line-height:  50px;height: 50px;font-size: 20px'>" + data.components[index].name + "</div></div > ");
+    }
+}
+
+function initSwiper() {
 
+    swiperModel = new Swiper('#swiperModel', {
+        grabCursor: true,
+        spaceBetween: 20,
+        slidesPerView: 3,
+    })
+
+    swiperTexture = new Swiper('#swiperTexture', {
+        grabCursor: true,
+        slidesPerView: 6,
+        spaceBetween: 20,
+    })
+
+    swiperComponent = new Swiper('#swiperComponent', {
+        grabCursor: true,
+        direction: 'vertical',
+        on: {
+            slideChange: function () {
+                componentIndex = this.activeIndex;
+                freshModelList(this.activeIndex);
+                freshTextureList(this.activeIndex);
+            },
+        },
+    })
+}
+
+function freshModelList(componentIndex) {
+    swiperModel.removeAllSlides();
+    for (var index in data.components[componentIndex].models) {
+        swiperModel.appendSlide('<div class="swiper-slide"><button class="btn btn-default" style="width:100%;" onclick="changeModel(' + index + ')">' + data.components[componentIndex].models[index].name + '</button></div>');
+    }
 }
+
+function freshTextureList(componentIndex) {
+    swiperTexture.removeAllSlides();
+    for (var index in data.components[componentIndex].textures) {
+        var fileName = data.components[componentIndex].textures[index].name;
+        var fileId = data.components[componentIndex].textures[index].fileId;
+        swiperTexture.appendSlide('<div class="swiper-slide"> <img src="/files/thumbnail/' + fileId + '" width="40px" height="40px" class="img-thumbnail" alt = "' + fileName + '" onclick="changeTexture(' + index + ')"> </div>');
+    }
+}
+//点击事件：切换模型
+function changeModel(index) {
+    //先换贴图
+    data.components[componentIndex].modelIndex = index;
+    var textureIndex = data.components[componentIndex].textureIndex;
+    changeTexture(textureIndex);
+    //显示模型
+    for (var i in data.components[componentIndex].models) {
+        if (i == index) {
+            data.components[componentIndex].models[i].modelObj.visible = true;
+        } else {
+            data.components[componentIndex].models[i].modelObj.visible = false;
+        }
+    }
+}
+
+
+//点击事件：切换贴图
+function changeTexture(index) {
+    if (componentIndex >= 0) {
+        if (index < 0)
+            return;
+        var modelIndex = data.components[componentIndex].modelIndex;
+        if (modelIndex < 0)
+            return;
+        data.components[componentIndex].textureIndex = index;
+        replaceTexture(data.components[componentIndex].models[modelIndex].modelObj, data.components[componentIndex].textures[index].textureObj);
+    }
+}
+
+
 //------------------------------------------------------------------------------
 //threejs配置
 function initThree() {

views/share.html

@@ -19,6 +19,9 @@
     <!-- ZUI -->
     <link rel="stylesheet" href="https://cdn.bootcss.com/zui/1.8.1/css/zui.min.css">
     <script src="https://cdn.bootcss.com/zui/1.8.1/js/zui.min.js"></script>
+    <!-- Swiper -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.0/css/swiper.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.0/js/swiper.js"></script>
     <style>
         * {
             margin: 0px;
@@ -33,13 +36,59 @@
         }
 
         #viewField {
+            z-index: 0;
+            position: absolute;
             width: 100%;
             height: 100%;
         }
+
+        #ui {
+            z-index: 1;
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            pointer-events:none;
+        }
     </style>
 </head>
 
 <body>
+    <!-- ui -->
+    <div id="ui" style="display:none;">
+
+        <div style="width: 100%;  position: absolute; top: 0px;" class="row">
+            <div class="col-xs-4 col-md-2" style="pointer-events:auto;">
+                <div class="card" style="background-color: beige; height:60px; margin:5px; padding:5px;">
+                    <div class="swiper-container" id="swiperComponent">
+                        <div class="swiper-wrapper" id="componentList">
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div style="width: 100%; height: 20%; position: absolute; bottom: 0px;pointer-events:auto;" class="row">
+            <div class="col-xs-12 col-md-6">
+                <div style="margin:5px; padding:5px;height: 100px;">
+                    <div class="swiper-container" id="swiperModel">
+                        <div class="swiper-wrapper">
+
+                        </div>
+                    </div>
+                    <hr />
+                    <div class="swiper-container" id="swiperTexture">
+                        <div class="swiper-wrapper">
+
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    </div>
+    </div>
+
     <!-- threejs容器 -->
     <div id="viewField">
 
@@ -65,6 +114,7 @@
         </div>
     </div>
     <script src="/js/share.js"></script>
+
 </body>
 
 </html>