Reset camera of a model-viewer element when src is changed. #4572
Replies: 2 comments 5 replies
-
|
I'm not familiar with React, but I assume there's a way to access our JS API in addition to our HTML API? Only the HTML attributes have the behavior you describe. If you instead select the MV element and |
Beta Was this translation helpful? Give feedback.
-
|
The following code somewhat works: const [url, setUrl] = useState("../models/forks.glb");
const defaultCameraOrbit = "45deg 55deg 5m";
var mv = document.querySelector("model-viewer");
function changeModel(modelName: string) {
setUrl(`../models/${modelName}.glb`);
setCameraOrbit(defaultCameraOrbit)
}
function setCameraOrbit(orbit: string) {
mv!.cameraOrbit = orbit;
}However weirdly it only works if I run In the actual app this behavior manifests as the camera orbit only resetting if I click the button for the model that is already displaying. If I click a button that will change the model that is being displayed (changing the So |
Beta Was this translation helpful? Give feedback.
-
|
Because I was having some incredibly weird interactions between react and MV, I tested MV on its own, outside react, and the above solution did not work at all. Here is the code: <!DOCTYPE html>
<html>
<head>
<script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.3.0/model-viewer.min.js"></script>
<title>My Electron App</title>
</head>
<body>
<model-viewer src=forks.glb camera-orbit="45deg 55deg 4m" camera-controls touch-action="none" interaction-prompt="none" />
<button onclick="changeModel('table.glb')">Arm</button>
<button onclick="changeModel('forks.glb')">Forks</button>
<script>
function changeModel(model) {
var mv = document.querySelector("model-viewer")
mv.setAttribute("src", model)
mv.cameraOrbit = "45deg 55deg 5m"
}
</script>
</body>
</html>Setting the |
Beta Was this translation helpful? Give feedback.
-
|
I believe you're running into async difficulties. After you set |
Beta Was this translation helpful? Give feedback.
-
|
I'm not actually using |
Beta Was this translation helpful? Give feedback.
-
|
Yes, but it's an option, so that's how our API is designed. Plus we're a Lit element, which means basically everything is very async, for performance. |
Beta Was this translation helpful? Give feedback.
-
|
Oh sorry, I thought you were saying that it only awaited if it was set to auto. That makes sense. |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
I'm using
model-viewerin my electron/react app, and I am using react'suseState()to change thesrcvalue of themodel-viewerelement, thereby changing the model it is displaying.I want to be able to reset the camera view to a certain position whenever the
srcattribute is updated. The issue is, thecamera-orbitattribute doesn't actually change when you rotate the model. So the following code doesn't work to update the camera:changeModel()is run when certain buttons are clicked, andsetUrl()works as intended.ModelVieweris defined here:What would be a good way to do this?
Beta Was this translation helpful? Give feedback.
All reactions