creedon Posted April 29, 2021 Share Posted April 29, 2021 (edited) @christina_marie_333 I'm starting a new thread for the following post as we've drifted off topic from the other thread. I have some code working. Not a solution but a start. <style> model-viewer { height : 600px; width : 400px; } </style> <!-- Import the component --> <script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script> <!-- Use it like any other HTML element --> <model-viewer src="https://modelviewer.dev/shared-assets/models/Astronaut.glb" alt="A 3D model of an astronaut" auto-rotate camera-controls></model-viewer> I put this in a code block. If you change the following in the code to the URL of your glb you should see your model. https://modelviewer.dev/shared-assets/models/Astronaut.glb You may need to go into Full Preview to see the model. Edited April 29, 2021 by creedon Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
Cyperpunk-girl-333 Posted April 30, 2021 Share Posted April 30, 2021 Hi Creedon this is amazing progress! I just have to figure out how to turn my glb into a url? Any idea on how I can do this? Thank you so so so much Link to comment
creedon Posted April 30, 2021 Author Share Posted April 30, 2021 Upload your file to a service like Google Drive or Dropbox. If you go with GD and get a share link. It needs to be edited a bit to work as a URL that you can use in code. Please see the following. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
Cyperpunk-girl-333 Posted April 30, 2021 Share Posted April 30, 2021 Hey Creedon Fantasic news! I have been able to add the obj file on Google Poly https://adrian-alex-webpage-design.squarespace.com/test-code-page Any idea on how to center the 3D model within the code block? Or a container Any idea on how to add a media query so it works on mobile devices? Thank you for you help! Link to comment
Cyperpunk-girl-333 Posted April 30, 2021 Share Posted April 30, 2021 what do you think? so far? 🙂 Link to comment
creedon Posted April 30, 2021 Author Share Posted April 30, 2021 I got page not found for url you posted. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
Cyperpunk-girl-333 Posted May 1, 2021 Share Posted May 1, 2021 Sorry Creedon try this one https://adrian-alex-webpage-design.squarespace.com/survey-aus-rov 😊 Link to comment
creedon Posted May 1, 2021 Author Share Posted May 1, 2021 Looks pretty good! I suggest removing the spacers on either side and using the following CSS in the style tag. <style> model-viewer { height : 300px; margin-left : auto; margin-right : auto; width : 300px; } </style> Let us know how it goes. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
Cyperpunk-girl-333 Posted May 1, 2021 Share Posted May 1, 2021 That works great! But it still doesn't work well on mobile view, would I just have to change the screen 💻 setting for mobile view in the style design settings on sqaurespace Link to comment
Cyperpunk-girl-333 Posted May 2, 2021 Share Posted May 2, 2021 On 5/1/2021 at 12:48 PM, creedon said: Looks pretty good! I suggest removing the spacers on either side and using the following CSS in the style tag. <style> model-viewer { height : 300px; margin-left : auto; margin-right : auto; width : 300px; } </style> Let us know how it goes. Would I use a media quire with a collection id? Link to comment
creedon Posted May 2, 2021 Author Share Posted May 2, 2021 First you'll want to remove the following CSS which is a near duplicate of the the style tag above it. If you want the 350px change the numbers in the previous style tag. <style> model-viewer { height : 350px; width : 350px; } </style> The issue you are seeing is not caused by the model-viewer. It is being caused by the bee cursor effect. When you move the cursor to the right the bee code causes an ever expanding width as long as the cursor is moved right and you scroll. If you want help with that issue I suggest asking a new question. Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
Cyperpunk-girl-333 Posted May 8, 2021 Share Posted May 8, 2021 On 5/3/2021 at 4:12 AM, creedon said: First you'll want to remove the following CSS which is a near duplicate of the the style tag above it. If you want the 350px change the numbers in the previous style tag. <style> model-viewer { height : 350px; width : 350px; } </style> The issue you are seeing is not caused by the model-viewer. It is being caused by the bee cursor effect. When you move the cursor to the right the bee code causes an ever expanding width as long as the cursor is moved right and you scroll. If you want help with that issue I suggest asking a new question. Thank you for your help thus fas Link to comment
Cyperpunk-girl-333 Posted May 8, 2021 Share Posted May 8, 2021 Site URL: https://adrian-alex-webpage-design.squarespace.com/ <div id="bee"> <img src="//content.invisioncic.com/p289038/monthly_2021_04/2042369419_mouserov.png.780f6ae1eb5d64a63dcbd0a02dc08f49.png" /> </div> <style>.left { -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH"; } .right { -moz-transform: scaleX(1); -o-transform: scaleX(1); -webkit-transform: scaleX(1); transform: scaleX(1); filter: FlipH; -ms-filter: "FlipH"; } #bee {transition: transform .1s}</style> <script> var bee = document.getElementById("bee"); document.addEventListener("mousemove", getMouse); bee.style.position = "absolute"; //css var beepos = {x:0, y:0}; setInterval(followMouse, 50); var mouse = {x:0, y:0}; //mouse.x, mouse.y var dir = "right"; function getMouse(e){ mouse.x = e.pageX; mouse.y = e.pageY; //Checking directional change if(mouse.x > beepos.x){ dir = "right"; } else { dir = "left"; } } function followMouse(){ //1. find distance X , distance Y var distX = mouse.x - beepos.x; var distY = mouse.y - beepos.y; //Easing motion //Progressive reduction of distance beepos.x += distX/5; beepos.y += distY/2; bee.style.left = beepos.x + "px"; bee.style.top = beepos.y + "px"; //Apply css class if (dir == "right"){ bee.setAttribute("class", "right"); } else { bee.setAttribute("class", "left"); } } </script> When the mouse tracks to far to the right it drags the page out making things off center on my page. the 3D model especially. Any help would be great I haven't got that much experience understanding how to fix this problem as i fould this code on codepen Survey page but also entire site. Link to comment
creedon Posted May 8, 2021 Author Share Posted May 8, 2021 Try this version of the code. Keep your other version in case you want to revert. <div id="bee" style="position: absolute; z-index: 99; top: 513px; left: 579px;" class="left"> <img src="https://static1.squarespace.com/static/60572f0b1a7825203cff5924/t/6078ded4f4afb97277e39038/1618534100579/aus+rov+cursor.png"> </div> <style>.left { -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH"; } .right { -moz-transform: scaleX(1); -o-transform: scaleX(1); -webkit-transform: scaleX(1); transform: scaleX(1); filter: FlipH; -ms-filter: "FlipH"; } #bee {transition: transform .1s}</style> <script> var bee = document.getElementById("bee"); var beeWidth = bee.getBoundingClientRect ( ).width; document.addEventListener("mousemove", getMouse); bee.style.position = "absolute"; //css var beepos = {x:0, y:0}; setInterval(followMouse, 50); var mouse = {x:0, y:0}; //mouse.x, mouse.y var dir = "right"; function getMouse(e){ mouse.x = e.pageX; mouse.y = e.pageY; //Checking directional change if(mouse.x > beepos.x){ dir = "right"; } else { dir = "left"; } } function followMouse(){ //1. find distance X , distance Y var distX = mouse.x - beepos.x; var distY = mouse.y - beepos.y; //Easing motion //Progressive reduction of distance beepos.x += distX/5 - beeWidth; beepos.y += distY/2; bee.style.left = beepos.x + "px"; bee.style.top = beepos.y + "px"; //Apply css class if (dir == "right"){ bee.setAttribute("class", "right"); } else { bee.setAttribute("class", "left"); } } </script> The change is that I took the width of the following eye (bee) into account when setting the left edge of the eye element. Let us know how it goes. tuanphan 1 Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects. Link to comment
slambam002 Posted November 8, 2022 Share Posted November 8, 2022 Hiya, anyone know how to use https://modelviewer.dev/ for 3d models on a squarespace site. i've got a dropbox link to the .glb file but squarespace won't let it load. It looks like it doesn't like the dropbox link even with dl=1 which would force the download. It seems as though there isn't any way to get model viewer to work on a squarespace site.. Link to comment
candy Posted November 17, 2022 Share Posted November 17, 2022 (edited) Hey there, I'm trying to embed my model-viewer glb file but can't manage it. Here's what iv'e done: Created the scene in model-viewer, clicked on download scene and then uploaded all the files to squarespace (index.html, glb file, script.js, snippet.tct, style.css). I inserted a code box into squarespace with this code: <!doctype html> <html lang="en"> <head> <title><model-viewer> template</title> <meta charset="utf-8"> <meta name="description" content="<model-viewer> template"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link type="text/css" href="./styles.css" rel="stylesheet"/> <!-- OPTIONAL: The :focus-visible polyfill removes the focus ring for some input types --> <script src="https://unpkg.com/focus-visible@5.0.2/dist/focus-visible.js" defer></script> </head> <body> <!-- <model-viewer> HTML element --> <model-viewer src="makeup.glb" ar ar-modes="webxr scene-viewer quick-look" camera-controls poster="poster.webp" shadow-intensity="1.72" environment-image="music_hall_01_1k.hdr" exposure="1.17" shadow-softness="0.95"> <div class="progress-bar hide" slot="progress-bar"> <div class="update-bar"></div> </div> <button slot="ar-button" id="ar-button"> View in your space </button> <div id="ar-prompt"> <img src="ar_hand_prompt.png"> </div> </model-viewer> <script src="script.js"></script> <!-- Loads <model-viewer> for browsers: --> <script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script> </body> </html> which i copied from the index.html file which model-viewer provided with the scene download. Here is a link to the page: https://mycandylayers.squarespace.com/new-page-1 if anyone could help, id really appreciate it. Thanks Edited November 17, 2022 by candy Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment