adding model-viewer to site

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

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

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.

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! 

what do you think? so far? 🙂

I got page not found for url you posted.

Sorry Creedon try this one

https://adrian-alex-webpage-design.squarespace.com/survey-aus-rov 😊

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.

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 

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?

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.

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 

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. 

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.

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

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>&lt;model-viewer&gt; template</title>
    <meta charset="utf-8">
    <meta name="description" content="&lt;model-viewer&gt; 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