featv2

controls.js

@@ -1,81 +0,0 @@
-
-import * as THREE from './three.module.js'
-import { OrbitControls } from './OrbitControls.js'
-document.addEventListener('DOMContentLoaded', () => {
-  const modelViewer = document.getElementById('sphere')
-  let controls, threeScene
-
-  // 等待model-viewer内部Three.js场景初始化完成
-  modelViewer.addEventListener('load', () => {
-    // 延迟执行以确保Three.js场景完全初始化
-    setTimeout(() => {
-      threeScene = modelViewer[Object.getOwnPropertySymbols(modelViewer).find(e => e.description === 'scene')]
-      controls = modelViewer[Object.getOwnPropertySymbols(modelViewer).find(e => e.description === 'controls')]
-
-      // controls.camera.up.copy(new THREE.Vector3(0, 0, 1))
-      console.log(controls.camera.up)
-
-      controls.camera.up.copy(new THREE.Vector3(1, 0, 0))
-      controls.options.minPolarAngle = Math.PI / 180 * 1
-      controls.options.maximumPolarAngle = Math.PI - Math.PI / 180 * 1
-      controls.options.minimumPolarAngle = Math.PI / 180 * 1
-      controls.options.maxPolarAngle = Math.PI - Math.PI / 180 * 1
-      // 限制水平旋转范围
-      controls.options.minAzimuthAngle = -Math.PI / 2 // 左侧90度
-      controls.options.maxAzimuthAngle = Math.PI / 2  // 右侧90度
-      controls.options.maximumAzimuthAngle = Math.PI
-      controls.options.maximumAzimuthalAngle = Math.PI   // 右侧90度
-      controls.options.minimumAzimuthAngle = -Math.PI  // 左侧90度
-      controls.options.minimumAzimuthalAngle = -Math.PI
-
-
-      const move = controls.onPointerMove
-      // 重写事件处理函数，变换坐标
-      controls.onPointerMove = (event) => {
-        const pointer =
-          this.pointers.find((pointer) => pointer.id === event.pointerId)
-        if (pointer == null) {
-          return
-        }
-
-        // In case no one gave us a pointerup or pointercancel event.
-        if (event.pointerType === 'mouse' && event.buttons === 0) {
-          this.onPointerUp(event)
-          return
-        }
-
-        const numTouches = this.pointers.length
-        let dx = (event.clientX - pointer.clientX) / numTouches
-        let dy = (event.clientY - pointer.clientY) / numTouches;
-
-
-        [dx, dy] = this.applyRotationMapping(dx, dy)
-
-
-      }
-
-      // 刷新控制器状态
-      controls.update()
-
-      console.log(threeScene)
-      console.log(controls)
-
-
-
-
-
-    }, 1000) // 延迟1秒确保场景完全初始化
-  })
-})
-
-function applyRotationMapping(dx, dy) {
-  const angle = this.rotationAngle * Math.PI / 180
-  const cos = Math.cos(angle)
-  const sin = Math.sin(angle)
-
-  // 应用旋转变换矩阵
-  const newDx = dx * cos - dy * sin
-  const newDy = dx * sin + dy * cos
-
-  return [newDx, newDy]
-}

index.css

@@ -0,0 +1,72 @@
+body {
+  margin: 0;
+  padding: 0;
+}
+#container {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+}
+#sphere {
+  width: 100%;
+  min-width: 20%;
+  height: 100%;
+  flex-shrink: 0;
+}
+#sphere2 {
+  width: 0;
+  height: 100%;
+  flex: 1;
+  flex-shrink: 0;
+}
+.splitBox {
+  width: 1%;
+  height: 100%;
+  cursor: col-resize;
+  align-items: center;
+  justify-content: center;
+  background-color: #ccc;
+  display: none;
+}
+.splitLine {
+  width: 6px;
+  height: 5%;
+  background-color: #428cee;
+}
+.buttonBox {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+#ec-button,
+#strength-button {
+  width: 120px;
+  height: 45px;
+  border-radius: 5px;
+  font-size: 18px;
+  font-weight: bold;
+  z-index: 1000;
+  cursor: pointer;
+  border: 1px solid #acacac;
+  display: none;
+}
+#ec-button:hover,
+#strength-button:hover {
+  border: 1px solid black;
+}
+.txt {
+  position: absolute;
+  top: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  color: #666;
+  font-size: 24px;
+  font-weight: bold;
+  transition: opacity 0.3s;
+  pointer-events: none;
+  display: none;
+}

index.html

@@ -7,68 +7,7 @@
       name="viewport"
       content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
     />
-    <style>
-      body {
-        margin: 0;
-        padding: 0;
-      }
-      #container {
-        width: 100vw;
-        height: 100vh;
-        display: flex;
-        align-items: center;
-      }
-      #sphere {
-        width: 100%;
-        min-width: 20%;
-        height: 100%;
-        flex-shrink: 0;
-      }
-      #sphere2 {
-        width: 0;
-        height: 100%;
-        flex: 1;
-        flex-shrink: 0;
-      }
-      .splitBox {
-        width: 1%;
-        height: 100%;
-        cursor: col-resize;
-        align-items: center;
-        justify-content: center;
-        background-color: #ccc;
-        display: none;
-      }
-      .splitLine {
-        width: 6px;
-        height: 5%;
-        background-color: #428cee;
-      }
-      .buttonBox {
-        position: absolute;
-        top: 10px;
-        right: 10px;
-        display: flex;
-        flex-direction: column;
-        gap: 10px;
-      }
-      #ec-button,
-      #strength-button {
-        width: 120px;
-        height: 45px;
-        border-radius: 5px;
-        font-size: 18px;
-        font-weight: bold;
-        z-index: 1000;
-        cursor: pointer;
-        border: 1px solid #acacac;
-        display: none;
-      }
-      #ec-button:hover,
-      #strength-button:hover {
-        border: 1px solid black;
-      }
-    </style>
+    <link rel="stylesheet" href="./index.css" />
   </head>
   <body>
     <div id="container">
@@ -81,27 +20,18 @@
         id="sphere"
         src="./static/gltf-13/low-13.gltf"
         camera-controls
-        
         tone-mapping="aces"
         shadow-intensity="0"
         interaction-prompt="none"
         zoom-sensitivity="2.5"
       >
+        <div class="txt">原始效果</div>
       </model-viewer>
       <div class="splitBox">
         <div class="splitLine"></div>
       </div>
     </div>
-    <!-- <script type="module" src="./mobile.js"></script> -->
-    <script type="importmap">
-      {
-        "imports": {
-          "three": "https://cdn.jsdelivr.net/npm/three@0.160.0/examples/js/controls/TrackballControls.js"
-        }
-      }
-    </script>
 
-    <script type='module' src="./controls.js"></script>
     <script type="module" src="./main.js"></script>
     <script type="module" src="./model-viewer.min.js"></script>
   </body>

main.js

@@ -4,6 +4,8 @@ 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
@@ -17,6 +19,7 @@ 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]
@@ -44,7 +47,10 @@ modelViewerParameters.addEventListener("load", () => {
 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]
@@ -66,29 +72,32 @@ const closeCompare = () => {
   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"
-  startSync()
   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"
-
-  startSync()
+  txtBoxRotate(modelViewerParameters2.querySelector('.txt'))
   isEcClick = false
 }
 
@@ -192,14 +201,15 @@ function handleCameraChange() {
   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()
-  console.log(modelViewerParameters.cameraOrbit, 'modelViewerParameters.cameraOrbit')
-  console.log(modelViewerParameters2.cameraOrbit, 'modelViewerParameters2.cameraOrbit')
 }
 
 function handleCameraChange2() {
@@ -208,23 +218,19 @@ function handleCameraChange2() {
   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()
-  // modelViewerParameters2.cameraOrbit = orbit.toString()
-  // modelViewerParameters2.cameraTarget = targetPoint.toString()
-  // modelViewerParameters2.fieldOfView = `${fov}deg`
-  // modelViewerParameters.jumpCameraToGoal()
-
-  console.log(modelViewerParameters.cameraOrbit, 'modelViewerParameters.cameraOrbit')
-  console.log(modelViewerParameters2.cameraOrbit, 'modelViewerParameters2.cameraOrbit')
 }
 
 
-let isMobile = false
+
 // 页面旋转和缩放处理函数
 function handleOrientationChange() {
   const screenWidth = document.documentElement.clientWidth
@@ -244,6 +250,7 @@ function handleOrientationChange() {
     buttonBox.style.bottom = "10px"
     buttonBox.style.top = "auto"
     buttonBox.style.zIndex = "1"
+    txtBoxRotate(txtBox)
   } else {
     isMobile = false
     modelViewerParameters.orientation = '0deg 0deg 0deg'
@@ -251,6 +258,13 @@ function handleOrientationChange() {
   }
 }
 
+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', () => {