WordPress网站禁用Creators3D嵌入3D模型的鼠标缩放与旋转方法咨询

方法1：正确使用pointer-events:none屏蔽鼠标交互 #

你之前的思路是对的，大概率是样式加错了位置。把pointer-events:none加到包裹iframe的div上，或者直接加到iframe标签里，就能让鼠标事件完全穿透3D模型区域，不影响页面滚动，同时模型的自动旋转（你已经设置了autorotate=true）依然会正常运行。

修改后的代码示例（给外层div加样式）：

<div class="creators-embed-wrapper" style="pointer-events:none;">
  <iframe width="640" height="480" src="https://v.creators3d.com/index.html?load=%2Fviews%2Fproduction%2Fitem%2F20230821%2F3803837859589964%2F3803837859589964.glb&amp;autorotate=true&amp;json-data=1692612413875&amp;decrypt=1&amp;tv=147" frameborder="0" allow="autoplay; fullscreen; vr" mozallowfullscreen="true" webkitallowfullscreen="true" style="border: none"></iframe>
</div>

或者直接给iframe加样式：

<div class="creators-embed-wrapper">
  <iframe width="640" height="480" src="https://v.creators3d.com/index.html?load=%2Fviews%2Fproduction%2Fitem%2F20230821%2F3803837859589964%2F3803837859589964.glb&amp;autorotate=true&amp;json-data=1692612413875&amp;decrypt=1&amp;tv=147" frameborder="0" allow="autoplay; fullscreen; vr" mozallowfullscreen="true" webkitallowfullscreen="true" style="border: none; pointer-events:none;"></iframe>
</div>

方法2：尝试Creators3D官方嵌入参数（优先推荐） #

不少3D托管平台会提供禁用用户交互的URL参数，你可以试试在iframe的src链接末尾添加类似&controls=false或者&disableInteraction=true的参数，比如：

<div class="creators-embed-wrapper">
  <iframe width="640" height="480" src="https://v.creators3d.com/index.html?load=%2Fviews%2Fproduction%2Fitem%2F20230821%2F3803837859589964%2F3803837859589964.glb&amp;autorotate=true&amp;json-data=1692612413875&amp;decrypt=1&amp;tv=147&amp;controls=false" frameborder="0" allow="autoplay; fullscreen; vr" mozallowfullscreen="true" webkitallowfullscreen="true" style="border: none"></iframe>
</div>

如果官方支持这类参数，这是最理想的方式——既能保留模型的自动旋转，又精准禁用了用户的缩放、旋转操作，不会影响其他潜在功能。

方法3：添加遮罩层（备用方案） #

如果上面两种方法都不生效，可以给iframe加一个透明的遮罩层，让鼠标事件被遮罩层接收，不传递到iframe里：

<div class="creators-embed-wrapper" style="position:relative;">
  <iframe width="640" height="480" src="https://v.creators3d.com/index.html?load=%2Fviews%2Fproduction%2Fitem%2F20230821%2F3803837859589964%2F3803837859589964.glb&amp;autorotate=true&amp;json-data=1692612413875&amp;decrypt=1&amp;tv=147" frameborder="0" allow="autoplay; fullscreen; vr" mozallowfullscreen="true" webkitallowfullscreen="true" style="border: none;"></iframe>
  <!-- 透明遮罩层，拦截鼠标事件 -->
  <div style="position:absolute; top:0; left:0; width:100%; height:100%; z-index:1; background:transparent;"></div>
</div>

这个遮罩层完全透明，用户看不到，但会拦截所有鼠标事件，保证页面可以正常滚动。

内容的提问来源于stack exchange，提问作者loudninja