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.
-
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