var viewer = WALK.getViewer();
viewer.setAllMaterialsEditable();
var Material = viewer.findMaterial("Painting03");
Material.addEventListener("click", function () {
alert(1);
viewer.requestFrame();
});
‘findmaterial’ script doesn’t work…
How can i use it…
Hi @heung_aile
In this case you can run onMaterialClicked(<MaterialName>, callback>
Then you won’t need to find material first
Your script could look like this:
var viewer = WALK.getViewer();
viewer.onMaterialClicked("Painting03", function() {
alert(1)
});
For reference, findMaterial function must be run after the scene is ready to display GitHub - shapespark/shapespark-viewer-api: JavaScript API for interacting with the Shapespark 3D scene.
Thank you for your answer.
But it’s not working You must not create and insert triggers in an editor or script or in ‘body-end.html’. I’m testing it with “example-room”, so please react to two frames. I would appreciate it if you could send me the ‘body-end.html’ file by e-mail.
email : aileheung@gmail.com
I’ve sent body-end.html file vie email.
The content of the file is as follows:
<script>
var viewer = WALK.getViewer();
viewer.onMaterialClicked("Painting 03", function() {
alert(1)
});
</script>
The material name must be exactly as it is within material tab (with spaces)
Best
Thank you so much!!!. Thanks to you, I solved it well.
<script>
var viewer = WALK.getViewer();
viewer.onMaterialClicked("Painting 03", function () {
viewer.switchToView("viewname");
var welcomeContent =
'<div style="font-size: 1.5em">' +
' <span style="font-size: 1.5em">Welcome</span>' +
" <hr/>" +
" Hello Visitor!" +
"</div>";
viewer.onViewSwitchDone(function () {
viewer.openPopup(welcomeContent, {
centerHorizontally: true,
centerVertically: true,
});
});
});
</script>
I’m sorry, I have a question.
I want to open a pop-up window after clicking on the picture to move to the ‘view’ position, but I’m not sure. Please correct the code.
Hi @heung_aile
There is one thing you must add at the end of the function → return true
Without it the viewer will try to move to the clicked point.
Also please double check name of the view (same as with materials, spaces must be included)
Your script would look like the following:
<script>
var viewer = WALK.getViewer();
viewer.onMaterialClicked("Painting 03", function () {
viewer.switchToView("viewname");
var welcomeContent =
'<div style="font-size: 1.5em">' +
' <span style="font-size: 1.5em">Welcome</span>' +
" <hr/>" +
" Hello Visitor!" +
"</div>";
viewer.onViewSwitchDone(function () {
viewer.openPopup(welcomeContent, {
centerHorizontally: true,
centerVertically: true,
});
});
return true
});
</script>
Thank you for your quick reply.!!
<script>
const viewer = WALK.getViewer();
function handleHoverChanged(material, hoverActive) {
if (hoverActive) {
document.body.style.cursor = "pointer";
material.emissive = true;
material.emissionStrength = 0.5;
viewer.requestFrame();
} else {
document.body.style.cursor = "";
material.emissive = false;
viewer.requestFrame();
}
}
viewer.onMaterialHoverChanged("Painting 02", handleHoverChanged);
viewer.onMaterialHoverChanged("Painting 03", handleHoverChanged);
viewer.onMaterialHoverChanged("Book cover_01", handleHoverChanged);
viewer.onMaterialClicked("Painting 02", function () {
viewer.switchToView("p1");
var welcomeContent1 =
'<iframe src="https://www.shapespark.com/pricing">' + "</iframe>";
viewer.onViewSwitchDone(function () {
viewer.openPopup(welcomeContent1, {
centerHorizontally: true,
centerVertically: true,
});
});
return true;
});
viewer.onMaterialClicked("Painting 03", function () {
viewer.switchToView("p2");
var welcomeContent2 =
'<iframe src="https://www.shapespark.com/">' + "</iframe>";
viewer.onViewSwitchDone(function () {
viewer.openPopup(welcomeContent2, {
centerHorizontally: true,
centerVertically: true,
});
});
return true;
});
viewer.onMaterialClicked("Book cover_01", function () {
viewer.switchToView("b_1");
viewer.onViewSwitchDone(function () {
viewer.switchToView("b_2");
});
return true;
});
</script>
https://stageaile.shapespark.com/demo_1019/
Please check the link.
Hi @heung_aile
You should add callback to onViewSwitchDone and register it only once. We could call this callback handleViewSwitchDone. This callback will have access to name of the view that has been reached, so we can match the name of the view to your custom functionality.
<script>
const viewer = WALK.getViewer();
function handleHoverChanged(material, hoverActive) {
if (hoverActive) {
document.body.style.cursor = "pointer";
material.emissive = true;
material.emissionStrength = 0.5;
viewer.requestFrame();
} else {
document.body.style.cursor = "";
material.emissive = false;
viewer.requestFrame();
}
}
viewer.onMaterialHoverChanged("Painting 02", handleHoverChanged);
viewer.onMaterialHoverChanged("Painting 03", handleHoverChanged);
viewer.onMaterialHoverChanged("Book cover_01", handleHoverChanged);
viewer.onMaterialClicked("Painting 02", function () {
viewer.switchToView("p1");
return true;
});
viewer.onMaterialClicked("Painting 03", function () {
viewer.switchToView("p2");
return true;
});
viewer.onMaterialClicked("Book cover_01", function () {
viewer.switchToView("b_1");
return true;
});
function welcomeContent1() {
var welcomeContent = '<iframe src="https://www.shapespark.com/pricing">' + '</iframe>';
viewer.openPopup(welcomeContent, {
centerHorizontally: true,
centerVertically: true
});
}
function welcomeContent2() {
var welcomeContent = '<iframe src="https://www.shapespark.com/">' + '</iframe>';
viewer.openPopup(welcomeContent, {
centerHorizontally: true,
centerVertically: true
});
}
function welcomeContent3() {
viewer.switchToView('b_2');
return true;
}
function handleViewSwitchDone(viewName){
switch (viewName) {
case 'p1':
welcomeContent1();
break;
case 'p2':
welcomeContent2();
break;
case 'b_1':
welcomeContent3();
break;
}
}
viewer.onViewSwitchDone(handleViewSwitchDone);
</script>
Thank you so much every time. I’ll study more while looking at the code you taught me.
Hello, I have an additional question while working on it. I attached the file by email. I’d appreciate it if you could check it.
check 1: Start full screen Onload
check 2: “Painting 03” Click the “>>” button created in the pop-up window to close the “Pop-up window” and go to “Next-View : laptop”.
And where should I input the cdn to use “JQuery”? And I want to connect (JavaScript file, css file) separately.