Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

adding model-viewer to site


creedon

Question

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

1376517701_ScreenShot2021-04-28at6_34_10PM.png.72f968362057823fbbe7430d3b0ad1b9.png

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • Answers 13
  • Created
  • Last Reply

Top Posters For This Question

13 answers to this question

Recommended Posts

  • 0

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 best , and see my profile. Thanks for your support!

Link to comment
  • 0
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
  • 0

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 best , and see my profile. Thanks for your support!

Link to comment
  • 0
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
  • 0

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 

Screenshot_20210501-182043_Messenger.thumb.jpg.d5795b96bd76887684f7f498d5fb2144.jpg

Survey page but also entire site. 

Link to comment
  • 0

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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...