我正在尝试使用 Google 的模型查看器来加载 3D 模型。它有一个按钮。但我希望该按钮在模型完全加载后可见。所以,我曾经使用这个 Vanilla JavaScript 代码
<script>
const modelViewer = document.querySelector("model-viewer");
const button = document.getElementById("my_ar_button");
modelViewer.addEventListener("load", function() {
button.style.display = "block";
});
</script>
现在我打算在 ReactJS 中使用它,这就是它的样子
const modelViewer = document.querySelector("model-viewer");
const button = document.getElementById("my_ar_button");
modelViewer.addEventListener("load", function() {
button.style.display = "block";
});
<model-viewer
src="https://modelviewer.dev/shared-assets/models/reflective-sphere.gltf"
alt="A 3D model of an astronaut"
ar ar-modes="webxr scene-viewer quick-look"
ar-scale="auto"
quick-look-browsers="safari chrome"
ios-src="https://modelviewer.dev/shared-assets/models/Astronaut.usdz"
loading="eager"
poster="https://modelviewer.dev/assets/poster-astronaut.png"
autoplay
camera-controls
>
<button id="my_ar_button" class="my_ar_button" slot="ar-button">Show AR</button>
</model-viewer>
我的 CSS
.my_ar_button {
display: none;
}
我使用脚本标签添加了模型查看器
<Helmet>
<script
type="module"
src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"
async
>
</script>
</Helmet>
但它给了我这个错误
TypeError: Cannot read property 'addEventListener' of null