3d

src/main/nine-space/src/components/product/ProductBanner.vue

@@ -4,34 +4,28 @@
 
         <div class="detail-info">
             <swiper v-if="banners.length > 0" pagination class="mySwiper" centeredSlides slidesPerView="auto">
-                <template v-if="false">
-                    <swiper-slide v-for="(item, index) in banners" :key="index">
-                        <three-mode></three-mode>
-                    </swiper-slide>
-                </template>
-                <template v-else>
-                    <swiper-slide class="swiper-pic" v-for="(item, index) in banners" :key="index">
-                        <div class="swiper-content">
-                            <video
-                                class="swiper-video"
-                                v-if="isVideo(item)"
-                                :src="item.url"
-                                :poster="getImg(changeImgs([item]), '', 1200)"
-                                controls="controls"
-                            >
-                                您的浏览器不支持 video 标签。
-                            </video>
-                            <van-image
-                                v-else
-                                @click="preview(index, changeImgs(banners))"
-                                :src="getImg(item.url, '', 1200)"
-                                width="calc(100vw - 134px)"
-                                height="calc(100vw - 134px)"
-                                fit="cover"
-                            />
-                        </div>
-                    </swiper-slide>
-                </template>
+                <swiper-slide :class="{ 'swiper-pic': !is3D(item) }" v-for="(item, index) in banners" :key="index">
+                    <three-mode v-if="is3D(item)" :info="item"></three-mode>
+                    <div class="swiper-content">
+                        <video
+                            class="swiper-video"
+                            v-if="isVideo(item)"
+                            :src="item.url"
+                            :poster="getImg(changeImgs([item]), '', 1200)"
+                            controls="controls"
+                        >
+                            您的浏览器不支持 video 标签。
+                        </video>
+                        <van-image
+                            v-else
+                            @click="preview(index, changeImgs(banners))"
+                            :src="getImg(item.url, '', 1200)"
+                            width="calc(100vw - 134px)"
+                            height="calc(100vw - 134px)"
+                            fit="cover"
+                        />
+                    </div>
+                </swiper-slide>
             </swiper>
 
             <div class="share-content">

src/main/nine-space/src/components/product/ThreeMode.vue

@@ -10,6 +10,14 @@ import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
 import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader.js';
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
 export default {
+    props: {
+        info: {
+            type: Object,
+            default: () => {
+                return {};
+            }
+        }
+    },
     data() {
         return {
             scene: null,
@@ -42,28 +50,30 @@ export default {
             var mesh = null;
             // const axesHelper = new THREE.AxesHelper(50);
             // scene.add(axesHelper);
-            fbxLoader.load('https://zhirongip.oss-cn-hangzhou.aliyuncs.com/matilda/source/sketchfab_v002.fbx', fbx => {
-                console.log(fbx);
-                mesh = fbx;
-                mesh.scale.multiplyScalar(0.45);
-                // mesh.position.y = -40;
-                console.log(mesh.size);
-                mesh.traverse(o => {
-                    //将图片作为纹理加载
-                    let explosionTexture = new THREE.TextureLoader().load(
-                        'https://zhirongip.oss-cn-hangzhou.aliyuncs.com/matilda/textures/color.2.1001.png'
-                    );
-                    //调整纹理图的方向
-                    explosionTexture.flipY = true;
-                    //将纹理图生成基础网格材质(MeshBasicMaterial)
-                    const material = new THREE.MeshBasicMaterial({
-                        map: explosionTexture
-                    });
-                    //给模型每部分上材质
-                    o.material = material;
-                });
-                scene.add(fbx);
-            });
+            fbxLoader.load(
+                this.info.url || 'https://zhirongip.oss-cn-hangzhou.aliyuncs.com/matilda/source/sketchfab_v002.fbx',
+                fbx => {
+                    console.log(fbx);
+                    mesh = fbx;
+                    mesh.scale.multiplyScalar(0.45);
+                    // mesh.position.y = -40;
+                    // mesh.traverse(o => {
+                    //     //将图片作为纹理加载
+                    //     let explosionTexture = new THREE.TextureLoader().load(
+                    //         'https://zhirongip.oss-cn-hangzhou.aliyuncs.com/matilda/textures/color.2.1001.png'
+                    //     );
+                    //     //调整纹理图的方向
+                    //     explosionTexture.flipY = true;
+                    //     //将纹理图生成基础网格材质(MeshBasicMaterial)
+                    //     const material = new THREE.MeshBasicMaterial({
+                    //         map: explosionTexture
+                    //     });
+                    //     //给模型每部分上材质
+                    //     o.material = material;
+                    // });
+                    scene.add(fbx);
+                }
+            );
             // const controls = new OrbitControls(camera, renderer.domElement);
             // controls.enableDamping = true;
             const clock = new THREE.Clock();

src/main/nine-space/src/mixins/product.js

@@ -71,7 +71,7 @@ export default {
         changeImgs(list = []) {
             // console.log(list);
             return list.map(item => {
-                if (item.type === 'video/mp4') {
+                if (item.type === 'video/mp4' || item.type === 'model3d') {
                     return item.thumb;
                 } else {
                     return item.url;
@@ -81,6 +81,9 @@ export default {
         isVideo(info = {}) {
             return info.type === 'video/mp4';
         },
+        is3D(info = {}) {
+            return info.type === 'model3d';
+        },
         getTime(startTime) {
             if (!startTime) {
                 return;