3d

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

@@ -3,7 +3,8 @@
         <img src="@assets/png-bg-shangping.png" class="bg-img" />
 
         <div class="detail-info" style="overflow-x: hidden">
-            <swiper v-if="banners.length > 0" pagination class="mySwiper" centeredSlides slidesPerView="auto">
+            <three-mode :info="info.model3d" v-if="!!info.model3d"></three-mode>
+            <swiper v-else-if="banners.length > 0" pagination class="mySwiper" centeredSlides slidesPerView="auto">
                 <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">

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

@@ -1,10 +1,11 @@
 <template>
     <div class="mode">
-        <canvas ref="three"></canvas>
+        <canvas ref="canvas"></canvas>
     </div>
 </template>
 
 <script>
+import { ref, onMounted } from 'vue';
 import * as THREE from 'three';
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
 import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader.js';
@@ -31,131 +32,134 @@ export default {
             farmeCount: 0
         };
     },
-    mounted() {
-        this.init();
-    },
-    methods: {
-        init() {
-            const scene = new THREE.Scene();
-            // scene.background = new THREE.Color('#fff');
-            const canvas = this.$refs.three;
-            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;
-            // const axesHelper = new THREE.AxesHelper(50);
-            // scene.add(axesHelper);
-            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;
+    setup(props) {
+        const canvas = ref(null);
+        const self = this;
+        onMounted(() => {
+            console.log(canvas.value);
+            let camera, scene, renderer, stats;
+
             const clock = new THREE.Clock();
+
+            let mixer;
+
+            init();
+            animate();
+
+            function init() {
+                camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerWidth, 1, 20000);
+                camera.position.set(0, 0, 600);
+
+                scene = new THREE.Scene();
+                // scene.background = new THREE.Color(0xa0a0a0);
+
+                const hemiLight = new THREE.HemisphereLight(0xffffff, 0x444444);
+                hemiLight.position.set(0, 200, 0);
+                scene.add(hemiLight);
+
+                const dirLight = new THREE.DirectionalLight(0x00ffffff);
+                dirLight.position.set(0, 200, 100);
+                dirLight.castShadow = true;
+                dirLight.shadow.camera.top = 180;
+                dirLight.shadow.camera.bottom = -100;
+                dirLight.shadow.camera.left = -120;
+                dirLight.shadow.camera.right = 120;
+                scene.add(dirLight);
+
+                // scene.add( new THREE.CameraHelper( dirLight.shadow.camera ) );
+
+                // ground
+                // const mesh = new THREE.Mesh(
+                //     new THREE.PlaneGeometry(2000, 2000),
+                //     new THREE.MeshPhongMaterial({ color: 0x999999, depthWrite: false })
+                // );
+                // mesh.rotation.x = -Math.PI / 2;
+                // mesh.receiveShadow = true;
+                // scene.add(mesh);
+
+                // const grid = new THREE.GridHelper(2000, 20, 0x000000, 0x000000);
+                // grid.material.opacity = 0.2;
+                // grid.material.transparent = true;
+                // scene.add(grid);
+
+                // model
+                const loader = new FBXLoader();
+                loader.load(props.info.url, function (object) {
+                    const bounding = new THREE.Box3().setFromObject(object);
+
+                    let size_x = Math.abs(bounding.max.x - bounding.min.x);
+                    let size_y = Math.abs(bounding.max.y - bounding.min.y);
+                    let size_z = Math.abs(bounding.max.z - bounding.min.z);
+
+                    let center_x = (bounding.max.x + bounding.min.x) / 2;
+                    let center_y = (bounding.max.y + bounding.min.y) / 2;
+                    let center_z = (bounding.max.z + bounding.min.z) / 2;
+
+                    console.log('model size: x=' + size_x + ', y=' + size_y + ', z=' + size_z);
+
+                    camera.lookAt(new THREE.Vector3(center_x, center_y, center_z));
+                    camera.position.set(center_x, center_y, size_z * 5);
+
+                    hemiLight.position.set(0, center_y + size_y * 2, 0);
+
+                    controls.target.set(center_x, center_y, center_z);
+                    controls.update();
+
+                    mixer = new THREE.AnimationMixer(object);
+
+                    if (object.animations && object.animations[0]) {
+                        const action = mixer.clipAction(object.animations[0]);
+                        action.play();
+                    }
+
+                    object.traverse(function (child) {
+                        if (child.isMesh) {
+                            child.castShadow = true;
+                            child.receiveShadow = true;
+                        }
+                    });
+
+                    scene.add(object);
+                });
+
+                renderer = new THREE.WebGLRenderer({ canvas: canvas.value, antialias: true, alpha: true });
+                renderer.setPixelRatio(window.devicePixelRatio);
+                renderer.setSize(window.innerWidth, window.innerWidth);
+                renderer.shadowMap.enabled = true;
+
+                const controls = new OrbitControls(camera, renderer.domElement);
+                controls.target.set(0, 100, 0);
+                controls.update();
+
+                window.addEventListener('resize', onWindowResize);
+
+                // stats
+            }
+
+            function onWindowResize() {
+                camera.aspect = window.innerWidth / window.innerWidth;
+                camera.updateProjectionMatrix();
+
+                renderer.setSize(window.innerWidth, window.innerWidth);
+            }
+
+            //
+
             function animate() {
-                // controls.update();
-                renderer.render(scene, camera);
                 requestAnimationFrame(animate);
 
-                const time = Date.now() * 0.0005;
                 const delta = clock.getDelta();
 
-                if (mesh) mesh.rotation.y -= 0.5 * delta;
-
-                //添加下面代码
-                if (resizeRendererToDisplaySize(renderer)) {
-                    const canvas = renderer.domElement;
-                    camera.aspect = canvas.clientWidth / canvas.clientHeight;
-                    camera.updateProjectionMatrix();
-                }
-            }
-            animate();
+                if (mixer) mixer.update(delta);
 
-            function resizeRendererToDisplaySize(renderer) {
-                const canvas = renderer.domElement;
-                var width = window.innerWidth;
-                var height = window.innerHeight;
-                var canvasPixelWidth = canvas.width / window.devicePixelRatio;
-                var canvasPixelHeight = canvas.height / window.devicePixelRatio;
-
-                const needResize = canvasPixelWidth !== width || canvasPixelHeight !== height;
-                if (needResize) {
-                    renderer.setSize(width, height, false);
-                }
-                return needResize;
+                renderer.render(scene, camera);
             }
-        },
-        rorateAnimate() {}
-        // init() {
-        //     this.scene = new THREE.Scene();
-        //     this.scene.add(new THREE.AmbientLight(0x404040, 6)); //环境光
-        //     this.light = new THREE.DirectionalLight(0xdfebff, 0.45); //从正上方（不是位置）照射过来的平行光，0.45的强度
-        //     this.light.position.set(50, 200, 100);
-        //     this.light.position.multiplyScalar(0.3);
-        //     this.scene.add(this.light);
-        //     /**
-        //      * 相机设置
-        //      */
-        //     let container = this.$refs.three; //显示3D模型的容器
-        //     this.camera = new THREE.PerspectiveCamera(70, container.clientWidth / container.clientHeight, 0.01, 10);
-        //     this.camera.position.z = 1;
-        //     /**
-        //      * 创建渲染器对象
-        //      */
-        //     this.renderer = new THREE.WebGLRenderer({ alpha: true });
-        //     this.renderer.setSize(container.clientWidth, container.clientHeight);
-        //     container.appendChild(this.renderer.domElement);
-        //     //创建控件对象
-        //     this.controls = new OrbitControls(this.camera, this.renderer.domElement);
-        // },
-        // loadFbx() {
-        //     let self = this;
-        //     let fbxLoader = new FBXLoader();
-        //     //load一个测试模型路径：public/model/zhuozi2.gltf
-        //     fbxLoader.load('https://zhirongip.oss-cn-hangzhou.aliyuncs.com/cs_xong.FBX', function (fbx) {
-        //         self.isLoading = false; //关闭载入中效果
-        //         self.mesh = fbx;
-        //         // self.mesh.scale.set(0.4, 0.4, 0.4); //设置大小比例
-        //         // self.mesh.position.set(0, 0, 0); //设置位置
-        //         self.scene.add(self.mesh); // 将模型引入three、
-        //         self.animate();
-        //     });
-        // },
-        // animate() {
-        //     if (this.mesh) {
-        //         requestAnimationFrame(this.animate);
-
-        //         // this.mesh.rotation.x += 0.01;
-        //         this.mesh.rotation.y += 0.004;
-        //         this.renderer.render(this.scene, this.camera);
-        //     }
-        // }
-    }
+        });
+        return {
+            canvas
+        };
+    },
+    mounted() {}
 };
 </script>