|
|
@@ -0,0 +1,221 @@
|
|
|
+<!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>
|
PUGE