3d模型

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

@@ -3,28 +3,35 @@
         <img src="@assets/png-bg-shangping.png" class="bg-img" />
 
         <div class="detail-info">
-            <swiper pagination class="mySwiper" v-if="banners.length > 0">
-                <swiper-slide v-for="(item, index) in banners" :key="index">
-                    <!-- <img :src="item" /> -->
-
-                    <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"
-                    />
-                </swiper-slide>
+            <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>
 
             <div class="share-content">
@@ -37,7 +44,6 @@
                     <span>分享</span>
                 </div>
             </div>
-            <!-- <three-mode></three-mode> -->
         </div>
 
         <post ref="post" :info="info" noButton :pageUrl="pageUrl" />
@@ -53,6 +59,7 @@ import 'swiper/swiper-bundle.min.css';
 import product from '../../mixins/product';
 import Post from '../Post.vue';
 import { ImagePreview } from 'vant';
+import ThreeMode from './ThreeMode.vue';
 // import ThreeMode from './ThreeMode.vue';
 
 export default {
@@ -72,7 +79,8 @@ export default {
     components: {
         Swiper,
         SwiperSlide,
-        Post
+        Post,
+        ThreeMode
     },
     computed: {
         banners() {
@@ -129,24 +137,37 @@ export default {
     position: relative;
     .detail-info {
         position: absolute;
-        top: 50%;
+        // top: 50%;
         left: 50%;
-        transform: translate(-50%, -50%);
+        transform: translate(-50%, 0);
         display: flex;
         flex-direction: column;
         align-items: center;
-        padding-bottom: 50px;
+        width: 100vw;
+        height: calc(100vw+24px);
+        top: 0px;
+    }
+    .mySwiper {
+        width: 100vw;
+        height: 100vw;
     }
     .bg-img {
         display: block;
         width: 100vw;
     }
     .mySwiper {
+        overflow: visible;
+    }
+    .swiper-pic {
+        overflow: hidden;
         border-radius: @radius;
         border: 2px solid #ffffff;
         padding: 5px;
+        width: calc(100vw - 124px) !important;
+        height: calc(100vw - 128px);
+        margin-top: calc(25vw - 50px);
         .detail-animate();
-        .swiper-slide {
+        .swiper-content {
             display: flex;
             align-items: center;
             justify-content: center;
@@ -168,7 +189,9 @@ export default {
 
 .share-content {
     display: flex;
-    margin-top: 20px;
+    // margin-top: 20px;
+    transform: translateY(-50px);
+    z-index: 20;
 }
 .share-icon {
     img {

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

@@ -29,46 +29,46 @@ export default {
     methods: {
         init() {
             const scene = new THREE.Scene();
-            scene.background = new THREE.Color('#181818');
+            // scene.background = new THREE.Color('#fff');
             const canvas = this.$refs.three;
-            const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
-            const camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 1000);
-            camera.position.z = 90;
+            const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true });
+            const camera = new THREE.PerspectiveCamera(45, canvas.innerWidth / canvas.innerHeight, 0.1, 1000);
+            renderer.setSize(canvas.innerWidth, canvas.innerHeight);
+            camera.position.z = 150;
             this.scene = scene;
             this.camera = camera;
             this.renderer = renderer;
             const fbxLoader = new FBXLoader();
             var mesh = null;
-            fbxLoader.load('https://zhirongip.oss-cn-hangzhou.aliyuncs.com/cs_xong.FBX', fbx => {
+            // 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.3);
-                mesh.position.set(0, 0, 0);
-                // mesh.rotation.x = -45;
-                //添加这段代码
-                //遍历模型每部分
-                // 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;
-                // });
+                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);
             });
-
-            const controls = new OrbitControls(camera, renderer.domElement);
-            controls.enableDamping = true;
+            // const controls = new OrbitControls(camera, renderer.domElement);
+            // controls.enableDamping = true;
             const clock = new THREE.Clock();
             function animate() {
-                controls.update();
+                // controls.update();
                 renderer.render(scene, camera);
                 requestAnimationFrame(animate);