puge
/
myApp


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221
							<!DOCTYPE html>
<html lang="en">

<head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  <meta http-equiv="Content-Language" content="utf-8" />
  <title></title>
  <meta content="all" name="robots" />
  <meta name="description" content="" />
  <meta name="keywords" content="" />
  <meta name="filetype" content="1" />
  <meta name="publishedtype" content="1" />
  <meta name="pagetype" content="2" />
  <meta name="catalogs" content="" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
  <!--优先使用 IE 最新版本和 Chrome-->
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  <!--360 使用Google Chrome Frame-->
  <meta name="renderer" content="webkit">
  <script src="static/libs/jquery-1.11.1.min.js" type="text/javascript"></script>
  <link href="static/libs/swiper.min.css" rel="stylesheet">
  <link href="static/css/default.css" rel="stylesheet">
  <script src="static/libs/swiper.min.js"></script>
  <link rel="stylesheet" href="./static/css/main.css" charset="utf-8">
  <style>

.slide2 .img3{top:50%;transform: translate(-50%,-50%);}
.img3-1{width: 58.33333vw;}
.sxdeg{position: absolute;
    color: #fff;
    right: 6.9vw;
    font-size: 22px;
    top: 48%;}
.zydeg{ position: absolute;   color: #fff;
    font-size: 22px;
    left: 50%;
    bottom: 5vw;
    transform: translateX(-50%);}
  .slide2 .img4{z-index: 1}
  </style>
</head>
<body>
  <div class="swiper-container swiper1">
    <div class="swiper-wrapper">
      <div class="swiper-slide slide1 swiper-no-swiping">
        <div class="d1">
          <img class="img1" src="static/images/text.png" alt="">
        </div>
        <div class="d2">
          <img class="yuan" src="static/images/tip1.png" alt="">
          <img class="yuan2" src="static/images/tip3.png" alt="">
          <img class="img2" src="static/images/tip2.png" alt="">
        </div>
        <div class="d3">
          <img class="yx" src="static/images/yx.png" alt="">
        </div>
      </div>
      <div class="swiper-slide slide2 swiper-no-swiping">
        <div class="img3">
          <img class="img3-1"  src="static/images/yuan.png" alt="">
          <p class="sxdeg">0</p>
          <p class="zydeg">0</p>
        </div>
        
        <img class="img4" src="static/images/text2.png" alt="">
        <img class="img5" src="static/images/text3.png" alt="">
        <!-- 3D区域 -->
        <div class="box ox" template="home" id="o-home"></div>
        <ul class="nav">
          <li class="active"><img src="static/images/1.png" alt=""></li>
          <li class="show"><img src="static/images/2.png" alt=""></li>
          <li><img src="static/images/3.png" alt=""></li>
        </ul>
      </div>
    </div>
  </div>
<script>
  $(document).ready(function () {
 
    $(".nav li").click(function(){
      var index = $(this).index()
      if(index==2){
        $(".slide2").fadeOut()
      }
    })
    $(".show").click(function(){
      if($(this).hasClass("active")){
        $(".img5").fadeOut()
        $(".show").removeClass("active")
      }else{
        $(".img5").fadeIn()
        $(".show").addClass("active")
      }
    })
    $(".d2").click(function(){
      $(".slide2").fadeIn()
    })
    window.owo.script.home.created()
  })
</script>
<script>
    "use strict";

    window.owo = {
      // 页面数据和方法
      script: {
        "home": {
          "data": {
            "controls": null,
            "camera": null,
            "scene": null,
            "renderer": null,
            "light": null,
            "clock": null,
            "type": "rotate",
            "model": null,
            "Material_58": null,
            "Material_59": null,
            "window_box_1": null,
            "window_box_2": null,
            "arrow_box": null,
            "waitTime": 0,
            "sxdeg": null,
            "zydeg": null
          },
          "init": function init() {
            var _this = this;
            THREE.Loader.Handlers.add( /\.tga$/i, new THREE.TGALoader() );
            // 创建摄像机
            this.data.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 200000);
            this.data.camera.position.set(0, 0, 700);
            this.data.controls = new THREE.OrbitControls(this.data.camera);
            // 禁止左右拖拽
            this.data.controls.enablePan = false
            this.data.controls.target.set(0, 0, 0);
            this.data.controls.maxDistance = 2500
            this.data.controls.minDistance = 300
            this.data.controls.screenSpacePanning = false
            this.data.controls.update();
            this.data.scene = new THREE.Scene();
            // this.data.scene.background = new THREE.Color(0xa0a0a0);
            this.data.light = new THREE.HemisphereLight(0xffffff, 0x444444);
            this.data.light.position.set(0, 200, 0);
            this.data.scene.add(this.data.light);
            this.data.light = new THREE.DirectionalLight(0xffffff);
            this.data.light.position.set(0, 200, 100);
            this.data.light.castShadow = true;
            this.data.light.shadow.camera.top = 180;
            this.data.light.shadow.camera.bottom = -100;
            this.data.light.shadow.camera.left = -120;
            this.data.light.shadow.camera.right = 120;
            this.data.scene.add(this.data.light); // this.data.scene.add( new THREE.CameraHelper( this.data.light.shadow.camera ) );
            // 网格线
            // var grid = new THREE.GridHelper( 2000, 20, 0x000000, 0x000000 );
            // grid.material.opacity = 0.2;
            // grid.material.transparent = true;
            // this.data.scene.add( grid );
            // model

            var loader = new THREE.FBXLoader();
            loader.load('./resource/yuyin.FBX', function(object) {
              object.traverse(function(child) {
                // console.log(child.name)
                if (child.isMesh) {
                  child.castShadow = true;
                  child.receiveShadow = true;
                }
              });
              object.position.y = -100
              object.scale.set(100,100,100)
              _this.data.scene.add(object);
            });
            this.data.renderer = new THREE.WebGLRenderer({
              antialias: true,
              alpha:true
            });
            this.data.renderer.setClearColor(0xEEEEEE, 0.0);
            this.data.renderer.setPixelRatio(window.devicePixelRatio);
            this.data.renderer.setSize(window.innerWidth, window.innerHeight);
            this.data.renderer.shadowMap.enabled = true;
            document.querySelector('#o-home').appendChild(this.data.renderer.domElement); // window.addEventListener( 'resize', this.onWindowResize, false );
            var gridHelper = new THREE.GridHelper( 1000, 30, 0x2C2C2C, 0x888888 );
            // _this.data.scene.add(gridHelper);
            this.data.sxdeg = document.querySelector('.sxdeg')
            this.data.zydeg = document.querySelector('.zydeg')
          },
          "animate": function animate() {
            var _this2 = this;

            var delta = this.data.clock.getDelta();

            this.data.renderer.render(this.data.scene, this.data.camera);
            this.data.sxdeg.innerText = parseInt(- owo.script.home.data.camera.rotation.x * 180) + '°'
            this.data.zydeg.innerText = parseInt(- owo.script.home.data.camera.rotation.z * 180) + '°'
            setTimeout(function() {
              _this2.animate();
            }, 25);
          },
          "onWindowResize": function onWindowResize() {
            this.data.camera.aspect = window.innerWidth / window.innerHeight;
            this.data.camera.updateProjectionMatrix();
            this.data.renderer.setSize(window.innerWidth, window.innerHeight);
          },
          "created": function created() {
            console.log(this);
            this.data.clock = new THREE.Clock();
            this.init();
            this.animate();
          }
        }
      }
    };
  </script>
  <script src="./static/js/three.js.js" type="text/javascript" charset="UTF-8"></script>
  <script src="https://ithanmang.gitee.io/threejs/home/libs/examples/js/loaders/TGALoader.js"></script>
  <script src="./static/js/FBXLoader.js" type="text/javascript" charset="UTF-8"></script>
  <script src="./static/js/OrbitControls.js" type="text/javascript" charset="UTF-8"></script>
  <script src="./static/js/inflate.min.js" type="text/javascript" charset="UTF-8"></script>
</body>

</html>