// pages/ThreeModel/ThreeModel.js
import getMTLLoader from '../../jsm/loaders/MTLLoader.js';
import getOBJLoader from '../../jsm/loaders/OBJLoader.js';
// import CameraControls from '../../jsm/controls/CameraControls'
import {
  OrbitControls
} from '../../jsm/controls/OrbitControls';
import * as THREE from '../../libs/three.weapp.js'
var {
  MTLLoader
} = getMTLLoader(THREE);
var OBJLoader = getOBJLoader(THREE);
var window = THREE.global;
var camera, scene, requestAnimationFrame, renderer, controls, jeepCar, cameracontrols, texture;
let t0 = new Date()
// var animateion = wx.createAnimation({
//   delay: 0,
//   duration: 800,
//   timingFunction: "ease"
// })
Page({

  /**
   * 页面的初始数据
   */
  data: {
    isOnAccelerometerChange: true,
    threeLeft: "0",
    vdisplay: "none",
    view: "1",
    change: false,
    back: true,
    thirdView: false

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.start()
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },
  onUnload: function () {

  },
  start: function () {
    let that = this;
    wx.createSelectorQuery()
      .select('#c')
      .node()
      .exec((res) => {
        console.log(res)
        const canvas = new THREE.global.registerCanvas(res[0].node)
        console.log(canvas, "canvas")
        if (canvas != undefined) {
          canvas.width = canvas._width;
          canvas.height = canvas._height;
          requestAnimationFrame = canvas.requestAnimationFrame;
          that.init(canvas);
        }

      })
  },
  onProgress: function (xhr) {
    if (xhr.lengthComputable) {

      let percentComplete = xhr.loaded / xhr.total * 100;
      // console.log('model ' + Math.round(percentComplete, 2) + '% downloaded');

    }
  },

  onError: function () {},
  // 模型加载
  init: function (canvas) {
    let that = this;
    // render
    renderer = new THREE.WebGLRenderer({
      canvas,
      antialias: true,
      alpha: true,
      preserveDrawingBuffer:true
    });
    
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerHeight, window.innerHeight);


    // camera

    console.log(that.data.view, "函数内")
    if (that.data.view == "1") {
      camera = new THREE.PerspectiveCamera(10, 2, 1, -1, 100, 1000);
      camera.position.z = 500;
      camera.position.y = 300;
      camera.lookAt({
        x: 0,
        y: 200,
        z: 0
      })
    } else if (that.data.view == "2") {
      // camera.position.set(400,400,500)
      camera = new THREE.PerspectiveCamera(60, 2, 1, -1, 1, 10);
      camera.position.y = 20;
      camera.position.x = -10;
      camera.position.z = -10;
      camera.lookAt({
        x: 0,
        y: 50,
        z: 0
      })
    } 
    // else if (that.data.view == "3") {
    //   camera = new THREE.PerspectiveCamera(45, 1, 1, 500);
    //   camera.position.set = (400,400,500);
    //   camera.lookAt({
    //     x:0,
    //     y:400,
    //     z:0
    //   })

    // }
    // controls
    controls = new OrbitControls(camera, canvas);
    controls.minZoom = 0.5;
    controls.target.set(1, 5, 1);


    // scan和light
    scene = new THREE.Scene();
    let ambientLight = new THREE.AmbientLight(0x444444, 0.4);
    scene.add(ambientLight);
    let AmbientLight = new THREE.AmbientLight(0xffffff, 1)
    // let pointLight = new THREE.PointLight(0xffffff, 3);
    camera.add(AmbientLight);
    scene.add(camera);

    // 加载obj模型
    let loader = new OBJLoader();
    loader.load('http://47.92.33.19:9001/version/OBJ/Diaobao.obj', function (obj) {
      console.log(obj)
    });
    // 加载mtl纹理
    let mtlLoader = new MTLLoader();
    mtlLoader.load(
      'http://47.92.33.19:9001/version/OBJ/Diaobao.mtl',
      function (materials) {
        materials.preload()
        // console.log(that, "this")
        loader.setMaterials(materials)
        // 加载obj
        loader.load('http://47.92.33.19:9001/version/OBJ/Diaobao.obj', function (obj) {
          // 模型文件太大，缩小一下比例，方便显示
          obj.scale.set(0.5, 0.5, 0.5)
          obj.position.y = -15
          // 设置可以投影
          obj.children.forEach(item => {
            item.castShadow = true
            item.receiveShadow = true
            // console.log(item,"item")
          })
          jeepCar = obj
          // 添加到场景
          scene.add(jeepCar)
        })
      }
    )
    that.animate()
  },

  animate: function () {
    let that = this;
    // controls.update();
    // let t1 = new Date(); //本次时间
    // let t = t1 - t0; // 时间差
    // camera.translateX(0.001 * t/3) //沿着Y轴旋转着从大到小
    // camera.translateZ(0.001 * t/3) //沿着Z轴由近到远
    // camera.rotateY(0.0001 * t/3); //物体的均匀从左到又平移可以用相机旋转Y轴来实现
    camera.lookAt(scene.position);
    requestAnimationFrame(that.animate);
    renderer.render(scene, camera);
  },

  // 模型拖动事件
  touchStart(e) {
    THREE.global.touchEventHandlerFactory('canvas', 'touchstart')(e)
  },
  touchMove(e) {
    THREE.global.touchEventHandlerFactory('canvas', 'touchmove')(e)
  },
  touchEnd(e) {
    THREE.global.touchEventHandlerFactory('canvas', 'touchend')(e)
  },

  // 页面内容事件
  // 切换碉堡内部和外部按键
  FirstView: function () {

    this.setData({
      change: !this.data.change
    })
    let that = this
    if (that.data.change) {
      this.setData({
        view: "2",
        thirdView: true
      })
    } else {
      this.setData({
        view: "1",
        thirdView: false
      })
    }
    that.start()
  },
  // 切换碉堡内部的视角
  // TView: function () {
  //   if (this.data.changeTop) {
  //     this.setData({
  //       view: "3",
  //       changeTop: !this.data.changeTop
  //     })
  //   } else {
  //     this.setData({
  //       view: "2",
  //       changeTop: !this.data.changeTop
  //     })
  //   }
  //   this.start()
  // },
  // 播放视频
  BindShow: function () {
    console.log("点击了")
    this.setData({
      threeLeft: "100%",
      vdisplay: "block",
      back: false
    })
  },
  // 回退上一页
  backIndex: function () {
    wx.navigateBack({
      delta: 0,
    })
  },
  // 视频后退按钮
  cloth: function () {
    console.log("点击了")
    this.setData({
      threeLeft: "0%",
      vdisplay: "none",
      back: true
    })
  },
})