dwweb-pc/2018专题/18073D模型展示专题/js/main.js

import '../scss/main.scss'
import '../scss/iphonex1.scss'
import '../scss/swiper-4.1.6.min.css'

import * as THREE from 'three';
import 'three/examples/js/loaders/GLTFLoader';

import Swiper from './lib/swiper-4.1.6.min';

import UTIL from './util';
import Video from './video';
import 'three/examples/js/controls/OrbitControls';

// import textureBox from '../texture/box-location.png'

// 全景图
import negx from '../texture/wzrybg/negx.jpg'
import negy from '../texture/wzrybg/negy.jpg'
import negz from '../texture/wzrybg/negz.jpg'
import posx from '../texture/wzrybg/posx.jpg'
import posy from '../texture/wzrybg/posy.jpg'
import posz from '../texture/wzrybg/posz.jpg'

var container, controls;
var camera, scene, renderer;

var projectiveObj;//定义上次投射到的对象
var raycaster = new THREE.Raycaster();//光线投射器
var mouse = new THREE.Vector2();//二维向量 

document.addEventListener('mousemove', function(){
    event.preventDefault();
    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
}, false);

$(document).on('click', function(){
    $('.modal').fadeOut()
    controls ? controls.autoRotate = true : ''
})


/**
 * 添加鼠标点击事件，捕获点击时当前选中的物体
 */
window.addEventListener( 'click', function(){
    if(projectiveObj){
        $('.entry-tips').hide()
        controls.autoRotate = false
        var Util = new UTIL(camera)
        var dataInfo = projectiveObj.dataInfo

        $('.modal-left-img').fadeOut()
        $('.modal-right').fadeOut()
        $('.modal-hide').fadeOut()

        if(dataInfo == 'screen') {
            Util.CameraTo(0, 0, 150, function() {
                $('#modal1').fadeIn()
                $('.modal-group1').addClass('fadeInLeft').show()
            })
        }
        if(dataInfo == 'faceId') {
            Util.CameraTo(-20, 40, 100, function() {
                $('#modal2').fadeIn()
                // $('.modal-group2').fadeIn()
                $('.modal-group2').addClass('fadeInLeft').show()
            })
        }
        if(dataInfo == 'camera') {
            Util.CameraTo(20, 20, 180, function() {
                $('#modal3').fadeIn()
                $('.modal-group3').addClass('fadeInRight').show()
            })
        }
        if(dataInfo == 'back-camera') {
            Util.CameraTo(40, 50, -160, function() {
                $('#modal4').fadeIn()
                $('.modal-group4').addClass('fadeInRight').show()
            })
        }
        if(dataInfo == 'A11') {
            Util.CameraTo(0, 0, -150, function() {
                $('#modal5').fadeIn()
                $('.modal-group5').addClass('fadeInRight').show()
            })
        }
    }
}, false );

function init() {
    container = document.createElement( 'div' );
    document.body.appendChild( container );

    // 视角：90度
    // 镜头宽高比： window.innerWidth / window.innerHeight
    // 近平面距离： 0.1
    // 远平面距离：1000

    camera = new THREE.PerspectiveCamera( 90, window.innerWidth / window.innerHeight, 0.1, 1000 );
    camera.position.z = 200
    camera.position.y = 0
    camera.position.x = 0

    controls = new THREE.OrbitControls( camera );
    controls.autoRotate = true
    controls.autoRotateSpeed = 0.5
    controls.enablePan = false
    // controls.enableZoom = false
    controls.maxDistance = 300
    controls.minDistance = 200

    scene = new THREE.Scene();

    scene.add( new THREE.HemisphereLight(0xffffff, 0xffffff, 1) );

    // envmap
    var path = 'iphoneX/bg/';
    var format = '.jpg';
    var envMap = new THREE.CubeTextureLoader().load( [
        posx, negx,
        posy, negy,
        posz, negz
    ] );
    scene.background = envMap
    // 添加辅助线
	// var helper = new THREE.GridHelper( 500, 100 );
    // helper.position.y = -50;
    // helper.material.opacity = 0.25;
    // helper.material.transparent = true;
    // scene.add( helper );
    //参数设置了三条轴线的长度
    // var axes = new THREE.AxisHelper(800);
    // scene.add(axes);

    // 创建互动点
    var geometry = new THREE.SphereGeometry(2,32,32);//盒子模型
    var tranGeometry = new THREE.SphereGeometry(6,96,96);//盒子模型

    var material = new THREE.MeshLambertMaterial({color: 0xffc000, transparent: true, opacity: 0.8})
    var tranMaterial = new THREE.MeshLambertMaterial({color: 0x0000ff, transparent: true, opacity: 0});

    var point1 = new THREE.Mesh( geometry, material );
    point1.position.set(0,0,8)
    scene.add( point1 );

    var tranPoint1 = new THREE.Mesh( tranGeometry, tranMaterial );
    tranPoint1.position.set(0,0,8)           
    tranPoint1.dataInfo = 'screen'
    scene.add(tranPoint1)

    var point2 = new THREE.Mesh( geometry, material );
    point2.position.set(-12,119,10)
    scene.add( point2 );

    var tranPoint2 = new THREE.Mesh( tranGeometry, tranMaterial );
    tranPoint2.position.set(-12,119,10)           
    tranPoint2.dataInfo = 'faceId'
    scene.add(tranPoint2)

    var point3 = new THREE.Mesh( geometry, material );
    point3.position.set(17,119,10)        
    scene.add( point3 );

    var tranPoint3 = new THREE.Mesh( tranGeometry, tranMaterial );
    tranPoint3.position.set(17,119,10)           
    tranPoint3.dataInfo = 'camera'
    scene.add(tranPoint3)
    

    var point4 = new THREE.Mesh( geometry, material );
    point4.position.set(45,98,-10)
    scene.add( point4 );

    var tranPoint4 = new THREE.Mesh( tranGeometry, tranMaterial );
    tranPoint4.position.set(45,98,-10)           
    tranPoint4.dataInfo = 'back-camera'
    scene.add(tranPoint4)

    var point5 = new THREE.Mesh( geometry, material );
    point5.position.set(-26,55,-12)
    scene.add( point5 );

    var tranPoint5 = new THREE.Mesh( tranGeometry, tranMaterial );
    tranPoint5.position.set(-26,55,-12)           
    tranPoint5.dataInfo = 'A11'
    scene.add(tranPoint5)

    // 加载3D模型
    var loader = new THREE.GLTFLoader();
    // var modelPath = 's/3dmodel/iphoneX/scene.gltf'
    var localPath = 'iphonex1/scene.gltf'
    loader.load( localPath, function ( object ) {
        object.scene.traverse( function ( child ) {
            if ( child.isMesh ) {
                child.material.envMap = envMap;
                console.log(child)
            }
        } );

        scene.add( object.scene );
    });

    renderer = new THREE.WebGLRenderer({
        antialias: true,
        alpha: true
    });
    renderer.setClearColor(0x000000, 0);
    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setSize( window.innerWidth, window.innerHeight );
    container.appendChild( renderer.domElement );
    window.addEventListener( 'resize', resize, false );
}
function resize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
    if(controls) {
        controls.update();
    }
    renderRaycasterObj(raycaster,scene,camera,mouse);//渲染光投射器投射到的对象
    renderer.render( scene, camera );

    //重新渲染标签位置
    var Util = new UTIL(camera)
    Util.windowVector(0, 0, 8, 'modal1');
    Util.windowVector(-12,119,10, 'modal2');
    Util.windowVector(17,119,10, 'modal3');
    Util.windowVector(45,98,-10, 'modal4');
    Util.windowVector(-26,55,-12, 'modal5');

    requestAnimationFrame( animate );
}

/**
 * 根据光投射器判断鼠标所在向量方向是否穿过物体
 */
function renderRaycasterObj(raycaster,scene,camera,mouse) {
    raycaster.setFromCamera(mouse, camera);
    var intersects = raycaster.intersectObjects(scene.children);
    if (intersects.length > 0) {
        var currentProjectiveObjT = intersects[0].object;
        if (projectiveObj != currentProjectiveObjT) {
            if((currentProjectiveObjT instanceof THREE.AxisHelper) || (currentProjectiveObjT instanceof THREE.GridHelper)){
                //穿过的是坐标轴线和网格线
                return;
            }
            projectiveObj = intersects[0].object;
        }
    } else {
        projectiveObj = null;
    }
}

// 弹窗根随球体
// function modalAnimate() { 
//     var Util = new UTIL(camera)
//     //重新渲染标签位置
//     Util.windowVector(0, 0, 8, 'modal1');
//     Util.windowVector(-12,119,10, 'modal2');
//     Util.windowVector(17,119,10, 'modal3');
//     Util.windowVector(45,98,-10, 'modal4');
//     Util.windowVector(-26,55,-12, 'modal5');
//     //每帧渲染
//     // renderer.render(scene, camera);
//     requestAnimationFrame(modalAnimate);
// }


init();
animate();

// modalAnimate()

// ---- 弹窗交互相关 ------
var frontCameraSwiper = null
var screenSwiper = null
var planeSwiper = null
var faceSwiper = null
var backCameraSwiper = null

var View = {
    init() {
        this.setVideoSrc()
        this.handleModal()
    },
    setVideoSrc() {
        var vids = [8904623, 8904999, 8908143, 8908435, 8908441,8908437,8908443,
                    8909221, 8909229,8925097]
        var videoEls = {
            '8904623': 'face-video1',
            '8904999': 'face-video2',
            '8908143': 'back-camera-video',
            '8908435': 'front-camera-video',
            '8908441': 'front-camera-video2',
            '8908437': 'front-camera-video3',
            '8908443': 'front-camera-video4',
            '8909221': 'screen-video1',
            '8909229': 'screen-video2',
            '8925097': 'suggest-video',
        }
        Video.getVideoSource(vids, videoEls)

    },
    phoneChange() {
        var flag = true
        var $phone = $('.iphone-pic')
        var $phoneDown = $('.down-iphone-pic')
        timer = setInterval(() => {
            if(flag) {
                flag = false
                $phone.fadeOut('slow')
                $phoneDown.fadeIn('slow')
            } else {
                flag = true
                $phone.fadeIn('slow')
                $phoneDown.fadeOut('slow')
            }
        }, 6000);
    },
    videoPause() {
        var videoList = document.getElementsByTagName('video')
        for(var i = 0; i < videoList.length; i++) {
            videoList[i].pause()
        }
    },
    handleModal() {

        var $videoCon = $('.full-video-wrap')

        $('.close-full-video').click(function() {
            $(this).parent().hide()
            $videoCon.find('video').hide()
            var videoList = document.getElementsByTagName('video')
            for(var i = 0; i < videoList.length; i++) {
                videoList[i].pause()
            }
        })

        // 屏幕
        $('#modal1-poster1').click(function() {
            $('#screen-video1').show()
            $videoCon.show()
            document.getElementById('screen-video1').play()
        })
        $('#screen-know-more').click(function() {
            $('.screen-swiper').removeClass('fadeOutDown').addClass('fadeInUp').show()
            if(!screenSwiper) {
                View.swiperScreenCamera()
            }
            document.getElementById('screen-video2').currentTime = 0
            document.getElementById('screen-video2').play()
        })
        $('#close-screen-swiper').click(function() {
            View.videoPause()
            $('.screen-swiper').removeClass('fadeInUp').addClass('fadeOutDown')
            screenSwiper.slideTo(0, 0, false)
        })
        $('#reset-screen-video2').click(function() {
            document.getElementById('screen-video2').currentTime = 0
            document.getElementById('screen-video2').play()
        })

        // faceid
        $('#modal2-poster1').click(function() {
            $('#face-video1').show()
            $videoCon.show()
            document.getElementById('face-video1').play()
        })
        $('#modal2-poster2').click(function() {
            $('#face-video2').show()
            $videoCon.show()
            document.getElementById('face-video2').play()
        })
        $('#face-know-more').click(function() {
            $('.face-swiper').removeClass('fadeOutDown').addClass('fadeInUp').show()
            if(!faceSwiper) {
                View.swiperFace()
            }
        })
        $('#close-face-swiper').click(function() {
            $('.face-swiper').removeClass('fadeInUp').addClass('fadeOutDown')
            faceSwiper.slideTo(0, 0, false)
        })

        // 前置摄像头
        $('#modal3-poster').click(function() {
            $('#front-camera-video').show()
            $videoCon.show()
            document.getElementById('front-camera-video').play()
        })

        $('#modal3-poster1').click(function() {
            $('#front-camera-video3').show()
            $videoCon.show()
            document.getElementById('front-camera-video3').play()
        })
        $('#camera-know-more').click(function() {
            $('.camera-swiper').removeClass('fadeOutDown').addClass('fadeInUp').show()
            if(!frontCameraSwiper) {
                View.swiperFrontCamera()
            }
        })
        $('#close-camera-siwper').click(function() {
            View.videoPause()
            $('.camera-swiper').removeClass('fadeInUp').addClass('fadeOutDown')
            frontCameraSwiper.slideTo(0, 0, false)
        })

        // 后置摄像头
        $('#modal4-poster').click(function() {
            $('#back-camera-video').show()
            $videoCon.show()
            document.getElementById('back-camera-video').play()
        })
        $('#backcamera-know-more').click(function() {
            $('.back-camera-swiper').removeClass('fadeOutDown').addClass('fadeInUp').show()
            if(!backCameraSwiper) {
                View.swiperBackCamera()
            }
        })
        $('#close-backcamera-swiper').click(function() {
            $('.back-camera-swiper').removeClass('fadeInUp').addClass('fadeOutDown')
            backCameraSwiper.slideTo(0, 0, false)
        })

        // 玻璃后盖
        $('#plane-know-more').click(function() {
            $('.plane-swiper').removeClass('fadeOutDown').addClass('fadeInUp').show()
            if(!planeSwiper) {
                View.swiperPlane()
            }
        })
        $('#close-plane-swiper').click(function() {
            $('.plane-swiper').removeClass('fadeInUp').addClass('fadeOutDown')
            planeSwiper.slideTo(0, 0, false)
        })

        // 全屏视频结束自动退出
        var videoBox = document.getElementsByClassName('full-video-wrap')[0]
        var videos = videoBox.getElementsByTagName('video')
        for(var i = 0; i < videos.length; i++) {
            videos[i].addEventListener('ended', function() {
                $videoCon.hide()
                $videoCon.find('video').hide()
            })
        }

        // 评测视频
        $('#suggest-watch').click(function() {
            $('#suggest-video').show()
            $videoCon.show()
            document.getElementById('suggest-video').play()
        })

        // 进入扩展页，停止转动和缩放
        $('.bottom-more-btn').find('button').click(function(e) {
            controls.enableZoom = false
            return false
        })
        $('.close-swiper-btn').click(function() {
            controls.enableZoom = true
            return false
        })
    },
    swiperFrontCamera() {

        var ipxVideo = document.getElementById('front-camera-video2')
        var ipxVideo4 = document.getElementById('front-camera-video4')
        // 前置
        frontCameraSwiper = new Swiper('.swiper-front-camera',{
            direction : 'vertical',
            speed:800,
            mousewheel: true,
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
            on:{
                slideChangeTransitionStart: function(){
                    // alert(this.activeIndex);
                    if(this.activeIndex == 1) {
                        ipxVideo.play()
                    } else {
                        ipxVideo.pause()
                    }

                    if(this.activeIndex == 2) {
                        ipxVideo4.play()
                    } else {
                        ipxVideo4.pause()
                    }
                }
            }
        });

        // 重播
        $('#reset-front-video2').click(function() {
            ipxVideo.currentTime = 0
            ipxVideo.play()
        })
        $('#reset-front-video4').click(function() {
            ipxVideo4.currentTime = 0
            ipxVideo4.play()
        })
    },
    swiperScreenCamera() {
        var ipxVideo = document.getElementById('screen-video2')

        screenSwiper = new Swiper('#screen-swiper',{
            direction : 'vertical',
            speed:800,
            mousewheel: true,
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
            on:{
                slideChangeTransitionStart: function(){
                    if(this.activeIndex == 0) {
                        setTimeout(() => {
                            ipxVideo.play()
                        }, 500);
                    } else {
                        ipxVideo.pause()
                    }
                }
            }
        });
    },
    swiperPlane() {
        planeSwiper = new Swiper('.swiper-plane',{
            direction : 'vertical',
            speed:800,
            mousewheel: true,
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
            on:{
            }
        });
    },
    swiperFace() {
        faceSwiper = new Swiper('.swiper-face',{
            direction : 'vertical',
            speed:800,
            mousewheel: true,
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
            on:{
            }
        });
    },
    swiperBackCamera() {
        backCameraSwiper = new Swiper('.swiper-back-camera',{
            direction : 'vertical',
            speed:800,
            mousewheel: true,
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
            on:{
            }
        });
    }
}

View.init()