Model viewer, which can be used to view and interact with 3D models on the web
Demo link I made (PC or mobile phone can see):xn.jaron.top/webXR3D/web3D.html
Refer to the document: modelviewer.dev/examples/augmentedreality/#ar
Both PC and mobile terminal can be adapted
Next, look directly at the code
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>model-viewer</title>
<style>
body { margin: 0; padding: 0;}
.modelViewer{
width: 100vw;
height: 80vh;
}
.footer{
height: 20vh;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
}
#btn{
width: 100%;
padding: 15px 0;
bottom: 0;
/* Overflow rendering scroll bar */
overflow-y: hidden;
overflow-x: scroll;
white-space: nowrap;
text-align: center;
}
#btn .btn_list{
display: inline-block;
padding: .8rem;
cursor: pointer;
background-color: rgb(82, 180, 245);
color: #fff;
font-size: 1rem;
}
#btn .btn_list:hover{
background-color: #007aff;
}
#btn .active{
background-color: #007aff;
}
.close{
width: 4rem;
padding: .5rem;
cursor: pointer;
background-color: rgb(82, 180, 245);
color: #fff;
}
.close:hover{
background-color: #007aff;
}
</style>
</head>
<body>
<!-- A web component implemented by Google, which can be used to view and interact with 3D models on the web -->
<script type="module" src="unpkg.com/@google/model-viewer/dist/model-…"></script>
<model-viewer
src=""
id="view"
skybox-image=""
ios-src="modelviewer.dev/shared-assets/models/Astro…"
alt="A 3D model of an astronaut"
ar
xr-environment
auto-rotate
camera-controls
class="modelViewer"
></model-viewer>
<div class="footer">
<div class="close" id="closeBj">Close background</div>
<div id="btn"></div>
</div>
<script>
//Model List
var model_list = [
{
id: 1,
name: 'boat',
src: './3dSourceMaterial/Canoe.glb',
},
{
id: 2,
name: 'astronaut',
src: './3dSourceMaterial/NeilArmstrong.glb',
},
{
id: 3,
name: 'Exquisite helmet',
src: './3dSourceMaterial/DamagedHelmet/glTF/DamagedHelmet.gltf',
},
{
id: 4,
name: 'Cartoon astronaut',
src: './3dSourceMaterial/Astronaut.glb',
},
{
id: 5,
name: 'Office chair',
src: './3dSourceMaterial/Chair.glb',
},
{
id: 6,
name: 'blender',
src: './3dSourceMaterial/Mixer.glb',
},
{
id: 7,
name: 'cactus',
src: './3dSourceMaterial/GeoPlanter.glb',
},
{
id: 8,
name: 'train',
src: './3dSourceMaterial/ToyTrain.glb',
},
{
id: 9,
name: 'sound',
src: './3dSourceMaterial/BoomBox.glb',
},
{
id: 10,
name: 'Collision world',
src: './3dSourceMaterial/collision-world.glb',
},
{
id: 11,
name: 'Bird',
src: './3dSourceMaterial/Flamingo.glb',
},
{
id: 12,
name: 'horse',
src: './3dSourceMaterial/Horse.glb',
},
{
id: 13,
name: 'food',
src: './3dSourceMaterial/IridescentDishWithOlives.glb',
},
{
id: 14,
name: 'Small world',
src: './3dSourceMaterial/LittlestTokyo.glb',
},
{
id: 15,
name: 'parrot',
src: './3dSourceMaterial/Parrot.glb',
},
{
id: 16,
name: 'Cool shape',
src: './3dSourceMaterial/PrimaryIonDrive.glb',
},
{
id: 17,
name: 'Hi circle',
src: './3dSourceMaterial/ShadowmappableMesh.glb',
},
{
id: 18,
name: 'Red chair',
src: './3dSourceMaterial/SheenChair.glb',
},
{
id: 19,
name: 'Armed personnel',
src: './3dSourceMaterial/Soldier.glb',
},
{
id: 20,
name: 'White bird',
src: './3dSourceMaterial/Stork.glb',
},
{
id: 21,
name: 'Display items',
src: './3dSourceMaterial/ClearcoatTest/ClearcoatTest.glb',
},
{
id: 22,
name: 'Flower',
src: './3dSourceMaterial/Flower/Flower.glb',
},
{
id: 23,
name: 'Body shaping',
src: './3dSourceMaterial/LeePerrySmith/LeePerrySmith.glb',
},
{
id: 24,
name: 'sneakers',
src: './3dSourceMaterial/MaterialsVariantsShoe/glTF/MaterialsVariantsShoe.gltf',
},
{
id: 25,
name: 'Nefertiti',
src: './3dSourceMaterial/Nefertiti/Nefertiti.glb',
},
{
id: 26,
name: 'robot',
src: './3dSourceMaterial/RobotExpressive/RobotExpressive.glb',
},
];
//Invert array
// model_list = model_list.reverse();
//Package rendering
class Render {
//List data
models = [];
//Switch status
flag = false;
//Get view control
toggleModel = document.getElementById('view');
//List button
btn = document.getElementById('btn');
//close button
closeBj = document.getElementById('closeBj');
//Get the element and render the first (method)
domRender(){
var that = this;
this.btnClick(0);
this.models.forEach((v,index)=>{
var btnElement = document.createElement('div');
btnElement.className = 'btn_list';
btnElement.innerHTML = v.name;
btnElement.setAttribute('id',v.id);
//Bind click event
btnElement.addEventListener('click',function(){
//Button exclusive thought
that.models.forEach((v,index)=>{
btn.children[index].classList.remove('active')
if(v.id == this.getAttribute('id')){
btn.children[index].classList.add('active')
that.btnClick(index);
that.closeBj.innerHTML = 'Close background'
}
})
})
btn.appendChild(btnElement);
})
//Add a new button to the first button
btn.children[0].classList.add('active');
//Turn off or on the background image
this.closeBj.addEventListener('click',function(){
that.flag = !that.flag;
if(that.flag){
that.toggleModel.setAttribute('skybox-image', '');
that.closeBj.innerHTML = 'Open background'
}else{
that.closeBj.innerHTML = 'Close background'
that.toggleModel.setAttribute('skybox-image', 'gimg2.baidu.com/image_search/src=http://ne…)
}
})
}
//viewChange Switch and change the content of the model
btnClick(index){
this.toggleModel.setAttribute('src', `${this.models[index].src}`)
this.toggleModel.setAttribute('skybox-image', `gimg2.baidu.com/image_search/src=http://ne…`)
}
constructor(models) {
this.models = models;
}
}
var render = new Render(model_list);
//Rendering and binding events
render.domRender();
</script>
</body>
</html>