shiban-model-viewer/main.js

const modelViewerParameters = document.querySelector("model-viewer#sphere")
const ecButton = document.querySelector("#ec-button")
const strengthButton = document.querySelector("#strength-button")
const splitBox = document.querySelector(".splitBox")
const container = document.querySelector("#container")
const buttonBox = document.querySelector(".buttonBox")
const txtBox = document.querySelector('.txt')
let isMobile = false

// 需要切换的贴图
let bmTexture = null
let bmTexture2 = null
// 金属度粗糙度贴图
let mRTexture = null

// 当前贴图
let material = null


// 进入页面，加载好贴图
modelViewerParameters.addEventListener("load", () => {
  isMobile = /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)
  strengthButton.style.display = "block"
  ecButton.style.display = "block"
  material = modelViewerParameters.model.materials[0]
  // 设置金属度粗糙度
  // material.pbrMetallicRoughness.setMetallicFactor(0);
  // material.pbrMetallicRoughness.setRoughnessFactor(0.66)
  // 设置baseColor贴图

  bmTexture = material.pbrMetallicRoughness.baseColorTexture.texture
  // 设置金属度粗糙度贴图
  modelViewerParameters.createTexture("./static/gltf-13/2_r-4k.jpg").then((texture) => {
    material.pbrMetallicRoughness.metallicRoughnessTexture.setTexture(texture)
    mRTexture = texture
  })
  modelViewerParameters.createTexture("./static/gltf-13/bm-color.jpg").then((texture) => {
    bmTexture2 = texture
  })
  modelViewerParameters.createTexture("./static/gltf-13/color_normal.jpg").then((texture) => {
    material.normalTexture.setTexture(texture)
  })

})

// 创建第二个模型
const modelViewerParameters2 = modelViewerParameters.cloneNode(true)
modelViewerParameters2.id = "sphere2"
modelViewerParameters2.style.display = "none"
modelViewerParameters2.querySelector('.txt').innerHTML = '微痕增强'
const txtBox2 = modelViewerParameters2.querySelector('.txt')
document.querySelector("#container").appendChild(modelViewerParameters2)
startSync()
// 加载第二个模型
modelViewerParameters2.addEventListener("load", () => {
  const material2 = modelViewerParameters2.model.materials[0]
  modelViewerParameters2.createTexture("./static/gltf-13/2_r-4k.jpg").then((texture) => {
    material2.pbrMetallicRoughness.metallicRoughnessTexture.setTexture(texture)
  })
  modelViewerParameters2.createTexture("./static/gltf-13/bm-color.jpg").then((texture) => {
    material2.pbrMetallicRoughness.baseColorTexture.setTexture(texture)
  })
  material2.pbrMetallicRoughness.setBaseColorFactor([0.3137, 0.3137, 0.3137])
  console.log(material2)
})

const closeCompare = () => {
  modelViewerParameters2.style.display = "none"
  modelViewerParameters.style.width = "100%"
  modelViewerParameters.style.height = "100%"
  modelViewerParameters.style.maxWidth = "100%"
  splitBox.style.display = "none"
  ecButton.style.backgroundColor = "#f0f0f0"
  container.style.flexDirection = "row"
  txtBox.style.display = 'none'
  txtBox2.style.display = 'none'
  isEcClick = true
}

const openComparePC = () => {
  modelViewerParameters2.style.display = "block"
  txtBox.style.display = 'block'
  txtBox2.style.display = 'block'
  modelViewerParameters.style.width = "49.5%"
  modelViewerParameters.style.maxWidth = "80%"
  splitBox.style.display = "flex"
  ecButton.style.backgroundColor = "#ccc"
  isEcClick = false
}

const openCompareM = () => {
  modelViewerParameters2.style.display = "block"
  txtBox.style.display = 'block'
  txtBox2.style.display = 'block'
  modelViewerParameters2.style.width = "100%"
  modelViewerParameters2.style.height = "0%"
  modelViewerParameters.style.height = "50%"
  container.style.flexDirection = "column"
  ecButton.style.backgroundColor = "#ccc"
  txtBoxRotate(modelViewerParameters2.querySelector('.txt'))
  isEcClick = false
}

// 点击切换展示第二个模型
let isEcClick = true
ecButton.addEventListener("click", () => {
  if (isEcClick) {
    if (isMobile) {
      openCompareM()
    } else {
      openComparePC()
    }
  } else {
    closeCompare()
  }
})

// 点击增强按钮切换贴图
let isStrengthClick = true
strengthButton.addEventListener("click", () => {
  console.log("点击了")
  if (isStrengthClick) {
    material.pbrMetallicRoughness.baseColorTexture.setTexture(bmTexture2)
    material.pbrMetallicRoughness.setBaseColorFactor([0.3137, 0.3137, 0.3137])
    strengthButton.style.backgroundColor = "#ccc"
    isStrengthClick = false
    closeCompare()
  } else {
    material.pbrMetallicRoughness.baseColorTexture.setTexture(bmTexture)
    material.pbrMetallicRoughness.setBaseColorFactor([1, 1, 1])
    strengthButton.style.backgroundColor = "#f0f0f0"
    isStrengthClick = true
  }

})


// 拖动分割线
splitBox.addEventListener("mousedown", (e) => {
  e.preventDefault() // 阻止默认行为

  const containerWidth = container.offsetWidth
  const startX = e.clientX
  const startWidth = modelViewerParameters.offsetWidth

  // 保存事件处理函数的引用以便后续移除
  const onMouseMove = (e) => {
    const moveX = e.clientX
    const moveWidth = moveX - startX
    const newWidth = startWidth + moveWidth

    // 更新左右面板的宽度
    modelViewerParameters.style.width = newWidth + "px"
    modelViewerParameters2.style.width = (containerWidth - newWidth) + "px"
  }

  const onMouseUp = () => {
    document.removeEventListener("mousemove", onMouseMove)
    document.removeEventListener("mouseup", onMouseUp)
  }

  document.addEventListener("mousemove", onMouseMove)
  document.addEventListener("mouseup", onMouseUp)
})

// 实时同步
function startSync() {
  modelViewerParameters.addEventListener('mousemove', () => {
    modelViewerParameters.addEventListener('camera-change', handleCameraChange)
    modelViewerParameters2.removeEventListener('camera-change', handleCameraChange2)
  })
  modelViewerParameters2.addEventListener('mousemove', () => {
    modelViewerParameters2.addEventListener('camera-change', handleCameraChange2)
    modelViewerParameters.removeEventListener('camera-change', handleCameraChange)
  })
  // 兼容移动端
  modelViewerParameters.addEventListener('touchmove', () => {
    modelViewerParameters.addEventListener('camera-change', handleCameraChange)
    modelViewerParameters2.removeEventListener('camera-change', handleCameraChange2)
  })
  modelViewerParameters2.addEventListener('touchmove', () => {
    modelViewerParameters2.addEventListener('camera-change', handleCameraChange2)
    modelViewerParameters.removeEventListener('camera-change', handleCameraChange)
  })
  // 兼容鼠标滚轮
  modelViewerParameters.addEventListener('wheel', () => {
    modelViewerParameters.addEventListener('camera-change', handleCameraChange)
    modelViewerParameters2.removeEventListener('camera-change', handleCameraChange2)
  })
  modelViewerParameters2.addEventListener('wheel', () => {
    modelViewerParameters2.addEventListener('camera-change', handleCameraChange2)
    modelViewerParameters.removeEventListener('camera-change', handleCameraChange)
  })
}

// 相机变化处理
function handleCameraChange() {
  // 如果正在同步中，则不处理此次事件，避免循环触发
  modelViewerParameters2.removeEventListener('camera-change', handleCameraChange2)
  // 获取相机参数
  const orbit = modelViewerParameters.getCameraOrbit()
  const targetPoint = modelViewerParameters.getCameraTarget()
  const fov = modelViewerParameters.getFieldOfView()
  // 添加文字显示控制
  modelViewerParameters.querySelector('.txt').style.opacity = fov < 28 ? 0 : 1
  modelViewerParameters2.querySelector('.txt').style.opacity = fov < 28 ? 0 : 1

  // 设置到目标viewer
  modelViewerParameters2.cameraOrbit = orbit.toString()
  modelViewerParameters2.cameraTarget = targetPoint.toString()
  modelViewerParameters2.fieldOfView = `${fov}deg`
  modelViewerParameters2.jumpCameraToGoal()
}

function handleCameraChange2() {
  modelViewerParameters.removeEventListener('camera-change', handleCameraChange)
  // 获取相机参数
  const orbit = modelViewerParameters2.getCameraOrbit()
  const targetPoint = modelViewerParameters2.getCameraTarget()
  const fov = modelViewerParameters2.getFieldOfView()
  // 添加文字显示控制
  modelViewerParameters.querySelector('.txt').style.opacity = fov < 28 ? 0 : 1
  modelViewerParameters2.querySelector('.txt').style.opacity = fov < 28 ? 0 : 1

  // 设置到目标viewer
  modelViewerParameters.cameraOrbit = orbit.toString()
  modelViewerParameters.cameraTarget = targetPoint.toString()
  modelViewerParameters.fieldOfView = `${fov}deg`
  modelViewerParameters.jumpCameraToGoal()
}



// 页面旋转和缩放处理函数
function handleOrientationChange() {
  const screenWidth = document.documentElement.clientWidth
  const screenHeight = document.documentElement.clientHeight

  console.log(screenWidth, screenHeight)

  if (screenWidth <= screenHeight) {
    // 竖屏模式
    console.log('竖屏模式')
    isMobile = true
    modelViewerParameters.orientation = '-90deg 0deg 0deg'
    modelViewerParameters2.orientation = '-90deg 0deg 0deg'
    splitBox.style.display = 'none'
    buttonBox.style.transform = "rotate(90deg) translate(-10px, -10px)"
    buttonBox.style.transformOrigin = "center"
    buttonBox.style.bottom = "10px"
    buttonBox.style.top = "auto"
    buttonBox.style.zIndex = "1"
    txtBoxRotate(txtBox)
  } else {
    isMobile = false
    modelViewerParameters.orientation = '0deg 0deg 0deg'
    modelViewerParameters2.orientation = '0deg 0deg 0deg'
  }
}

const txtBoxRotate = (dom) => {
  dom.style.transform = "rotate(90deg) translate(50%,-100%)"
  dom.style.transformOrigin = "top right"
  dom.style.left = "60%"
  dom.style.top = "50%"
}


// 页面加载完成后初始化
window.addEventListener('load', () => {
  handleOrientationChange()
})

// 监听窗口大小变化
window.addEventListener('resize', handleOrientationChange)