lanxin
/
gmlx


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109
							<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>artsandculture</title>
  <style>
    #player,
    body,
    canvas {
      width: 100%;
      height: 100%;
      position: absolute;
      overflow: hidden;
      margin: 0;
      padding: 0;
    }

    /*canvas{
          background-image: url(background.jpg); 
          background-repeat: no-repeat;
          background-position: center;
          background-size: cover;
      }*/
    #consoleLog {
      width: 120px;
      height: 153px;
      position: absolute;
      left: 0px;
      bottom: 160px;
      z-index: 999999;
      color: black;
      opacity: 0.9;
      font-size: 12px;
    }
  </style>
</head>

<body>
  <div id="player">
    <canvas></canvas>
  </div>

  <script type="text/javascript" src="jquery-2.1.1.min.js"></script>
  <script type="text/javascript" src="three.min.js"></script>
  <script>

    const cardNames = [
      {
        id: 1, name: '文物的名称1', img: './assets/1.png', obj: { 构件: '构件1', 位置: '位置1', 装饰: '装饰1', 材质: '材质1' },
      },
      {
        id: 2, name: '文物的名称2', img: './assets/2.png', obj: { 构件: '构件2', 位置: '位置2', 装饰: '装饰2', 材质: '材质2' }
      },
      {
        id: 3, name: '文物的名称3', img: './assets/3.png', obj: { 构件: '构件3', 位置: '位置3', 装饰: '装饰3', 材质: '材质3' }
      },
      {
        id: 4, name: '文物的名称4', img: './assets/4.png', obj: { 构件: '构件4', 位置: '位置4', 装饰: '装饰4', 材质: '材质4' }
      },
      {
        id: 5, name: '文物的名称5', img: './assets/5.png', obj: { 构件: '构件5', 位置: '位置5', 装饰: '装饰5', 材质: '材质5' }
      },
      {
        id: 6, name: '文物的名称6', img: './assets/6.png', obj: { 构件: '构件6', 位置: '位置6', 装饰: '装饰6', 材质: '材质6' }
      },
      {
        id: 7, name: '文物的名称7', img: './assets/7.png', obj: { 构件: '构件7', 位置: '位置7', 装饰: '装饰7', 材质: '材质7' }
      },
      {
        id: 8, name: '文物的名称8', img: './assets/8.png', obj: { 构件: '构件8', 位置: '位置8', 装饰: '装饰8', 材质: '材质8' }
      },
      {
        id: 9, name: '文物的名称9', img: './assets/9.png', obj: { 构件: '构件9', 位置: '位置9', 装饰: '装饰9', 材质: '材质9' }
      }

    ]

    let vfov = 60 //垂直视角范围度数
    window.setting = {
      vfov,
      cards: {
        far: 15,
        beginFadeNear: 7,
        near: 1,
        fadeInDur: 2000,
        highest: Math.tan(THREE.Math.degToRad(vfov / 2)), //当card在1米处时最高可以多少才能在视线内

      }


    };

  </script>


  <script type="text/javascript" src="utils.js"></script>
  <script type="text/javascript" src="PanoramaControls.js"></script>
  <script type="text/javascript" src="index.js"></script>
  <script src="./click.js"></script>
</body>

</html>