dwweb-h5/2018专题/18073D模型展示专题-H5/js/iphonex.js

import '../scss/style.scss'
import '../scss/iphonex.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 touch from './lib/touch';
// var attachFastClick = require('fastclick');


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

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

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

document.body.addEventListener('touchmove', function(e) {
    e.preventDefault()
}, {passive: false})

var href=document.getElementsByTagName('a');
for(var i=0;i<href.length;i++) {
        href[i].ontouchend=function(){
            let val = this.getAttribute("href")
            if(val) {
                window.location.href=this.getAttribute("href");
            }
        }
    };

/**
 * 添加鼠标点击事件，捕获点击时当前选中的物体
 */
window.addEventListener( 'touchstart', function(e){

    $('.modal').fadeOut()
    controls ? controls.autoRotate = true : ''

    let eventObj = e.changedTouches[0]
    event.preventDefault();
    mouse.x = (eventObj.clientX / window.innerWidth) * 2 - 1;
    mouse.y = -(eventObj.clientY / window.innerHeight) * 2 + 1;
    renderRaycasterObj(raycaster,scene,camera,mouse);//渲染光投射器投射到的对象

    if(projectiveObj){
        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

    if(window.location.search) {
        controls = new THREE.OrbitControls( camera );
        controls.autoRotate = true
        controls.autoRotateSpeed = 1
        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 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(-10,55,-12)
    scene.add( point5 );

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


    // 加载3D模型
    var loader = new THREE.GLTFLoader();
    loader.load( 'iphonex/scene.gltf', 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(-10,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;
    }
}

init();

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


// 入口页滚动进入
if(!window.location.search && !controls) {
    
    var iphonex = document.getElementById('iphonex-wrapper')

    touch.direction(iphonex, function() {
        clearInterval(timer)
        $('.iphonex-wrapper').addClass('fadeOutDown')
        if(!controls) {
            controls = new THREE.OrbitControls( camera );
            controls.autoRotate = true
            controls.autoRotateSpeed = 1
            controls.enablePan = false
            // controls.enableZoom = false
            controls.maxDistance = 300
            controls.minDistance = 200
        }
        scrollFlag = true
        animate()
    })
}

var View = {
    init() {
        this.setVideoSrc()
        this.handleModal()

        // 场景二回到场景一，不显示介绍
        var search = window.location.search
        if(search) {
            $('.iphonex-wrapper').hide()
            animate()
        } else {
            this.phoneChange()
        }

    },
    setVideoSrc() {
        var vids = [8904623, 8908143, 8908435,8909221,
                    8925251,8925097]
        var videoEls = {
            '8904623': 'face-video1',
            '8908143': 'back-camera-video',
            '8908435': 'front-camera-video',
            '8925251': 'screen-video1',
            '8925097': 'suggest-video',
            '8909221': 'plane-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')

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

        touch.tap('.full-video-wrap', function(e){
            $(this).hide()
            $videoCon.find('video').hide()
            var videoList = document.getElementsByTagName('video')
            for(var i = 0; i < videoList.length; i++) {
                videoList[i].pause()
            }
        })

        document.getElementById('tips-masker').addEventListener('touchstart', function() {
            $('.tips-masker').hide()
        })

        // 屏幕
        document.getElementById('screen-poster').addEventListener('touchstart', function(){
            $('#screen-video1').show()
            $videoCon.show()
            document.getElementById('screen-video1').play()
        })

        document.getElementById('screen-know-more').addEventListener('touchstart', function(){
            $('.screen-swiper').removeClass('fadeOutDown').addClass('fadeInUp').show()
            if(!screenSwiper) {
                View.swiperScreenCamera()
            }
        })

        document.getElementById('close-screen-swiper').addEventListener('touchstart', function(){
            $('.screen-swiper').removeClass('fadeInUp').addClass('fadeOutDown')
            screenSwiper.slideTo(0, 0, false)
        })

        // faceid
        document.getElementById('faceid-poster').addEventListener('touchstart', function(){
            $('#face-video1').show()
            $videoCon.show()
            document.getElementById('face-video1').play()
        })
        
        document.getElementById('face-know-more').addEventListener('touchstart', function(){
            $('.face-swiper').removeClass('fadeOutDown').addClass('fadeInUp').show()
            if(!faceSwiper) {
                View.swiperFace()
            }
        })

        document.getElementById('close-face-swiper').addEventListener('touchstart', function(){
            $('.face-swiper').removeClass('fadeInUp').addClass('fadeOutDown')
            faceSwiper.slideTo(0, 0, false)
        })

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

        document.getElementById('camera-know-more').addEventListener('touchstart', function(){
            $('.camera-swiper').removeClass('fadeOutDown').addClass('fadeInUp').show()
            if(!frontCameraSwiper) {
                View.swiperFrontCamera()
            }
        })

        document.getElementById('close-camera-siwper').addEventListener('touchstart', function(){
            $('.camera-swiper').removeClass('fadeInUp').addClass('fadeOutDown')
            frontCameraSwiper.slideTo(0, 0, false)
        })

        // 后置摄像头
        document.getElementById('back-poster').addEventListener('touchstart', function(){
            $('#back-camera-video').show()
            $videoCon.show()
            document.getElementById('back-camera-video').play()
        })

        document.getElementById('backcamera-know-more').addEventListener('touchstart', function(){
            $('.back-camera-swiper').removeClass('fadeOutDown').addClass('fadeInUp').show()
            if(!backCameraSwiper) {
                View.swiperBackCamera()
            }
        })

        document.getElementById('close-backcamera-swiper').addEventListener('touchstart', function(){
            $('.back-camera-swiper').removeClass('fadeInUp').addClass('fadeOutDown')
            backCameraSwiper.slideTo(0, 0, false)
        })

        // 玻璃后盖
        document.getElementById('plane-poster').addEventListener('touchstart', function(){
            $('#plane-video').show()
            $videoCon.show()
            document.getElementById('plane-video').play()
        })

        document.getElementById('plane-know-more').addEventListener('touchstart', function(){
            $('.plane-swiper').removeClass('fadeOutDown').addClass('fadeInUp').show()
            if(!planeSwiper) {
                View.swiperPlane()
            }
        })

        document.getElementById('close-plane-swiper').addEventListener('touchstart', 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()
            })
        }

        // 评测视频
        document.getElementById('suggest-watch').addEventListener('touchstart', function(e) {
            // e.preventDefault()
            $('#suggest-video').show()
            $videoCon.show()
            document.getElementById('suggest-video').play()
        })


        // 进入扩展页，停止转动和缩放
        touch.tap('.bottom-more-btn', function(e){
            controls.enableZoom = false
            // console.log(e)
            e.cancelBubble = true
        })
        touch.tap('.close-swiper-btn', function(e){
            controls.enableZoom = true
            e.cancelBubble = true
        })
    },
    swiperFrontCamera() {
        // 前置
        frontCameraSwiper = new Swiper('.swiper-front-camera',{
            direction : 'vertical',
            speed:800,
            mousewheel: true,
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
            on:{
                slideChangeTransitionStart: function(){

                }
            }
        });

    },
    swiperScreenCamera() {

        screenSwiper = new Swiper('#screen-swiper',{
            direction : 'vertical',
            speed:400,
            mousewheel: true,
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
            on:{

            }
        });
    },
    swiperPlane() {
        planeSwiper = new Swiper('.swiper-plane',{
            direction : 'vertical',
            speed:400,
            mousewheel: true,
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
            on:{
            }
        });
    },
    swiperFace() {
        faceSwiper = new Swiper('.swiper-face',{
            direction : 'vertical',
            speed:400,
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
            on:{
            }
        });
    },
    swiperBackCamera() {
        backCameraSwiper = new Swiper('.swiper-back-camera',{
            direction : 'vertical',
            speed:400,
            mousewheel: true,
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
            on:{
            }
        });
    }
}

View.init()

// $(function() {
//     attachFastClick(document.body);
// });