Extracting 3D models from HTML Elements
Web developers can set any HTML element like buttons, images, anchor tags, divider, etc. as extractable by simple setting a few attributes on the HTML element. With this feature users can extract 3D models from any HTML element and place it in their physical environment by pressing and holding the trigger button on the control while the cursor is on the HTML element that was set to be extractable.
HTML Element Attributes
extractable
This attribute must be set to be able to extract 3D models from any HTML element in a web page and place it in their physical environment.
extractable="(true|false)"
extracted-src
This is the path to the 3D model to be extracted from any HTML element.
extracted-src="(path to model)"
<!-- Extract balloon 3D model from img HTML element.-->
<!-- By default the size of the model will be 15% of the dimensions of the browser. -->
<img id="balloonImg" src="/images/balloon.jpg"
extractable="true"
extracted-src="/models/balloon.glb"/>
...
//Extract balloon 3D model from img HTML element
//By default the size of the model will be 15% of the dimensions of the browser.
balloonImg.setAttribute('extractable', true);
balloonImg.setAttribute('extracted-src', '/models/balloon.glb');
extracted-size
This attribute is used to specify the dimensions of the model in meters once the model is placed in the physical space. When the extracted size is not specified, by default the size of the 3D model will be 15% of the dimensions of the browser.
extracted-size="width, height, breadth"
<!-- Extract model with width of 0.7 meters, height of 0.8 meters, and breadth of 0.7 meters.-->
<img id="balloonImg" src="/images/balloon.jpg"
extractable="true"
extracted-src="/models/balloon.glb"
extracted-size="0.7, 0.8, 0.7"/>
...
//Extract 3D model with width of 0.7 meters, height of 0.8 meters, and breadth of 0.7 meters.
balloonImg.setAttribute('extractable', true);
balloonImg.setAttribute('extracted-src', '/models/balloon.glb');
balloonImg.setAttribute('extracted-size', '0.7, 0.8, 0.7');
extracted-scale
As an alternative to using extracted-size, you can use the extracted-scale attribute to specify a multiplier which will scale the model once the model is placed in the physical space.
Extracted 3D models are scaled from the default size, which is 15% of the dimensions of the browser.
extracted-scale="(number)"
<!-- Model will be sized once extracted to be 5 time bigger than the default size. -->
<img id="balloonImg" src="/images/balloon.jpg"
extracted-src="/models/balloon.glb"
extractable="true"
extracted-scale="5" />
...
//Model will be sized once extracted to be 5 time bigger than the default size.
balloonImg.setAttribute('extractable', true);
balloonImg.setAttribute('extracted-src', '/models/balloon.glb');
balloonImg.setAttribute('extracted-scale', 5);
All of the
<ml-model>Attributes, Transform Animations and Model Animations could be applied to the 3D model to be extracted from the HTML element.
<!-- Extract shoe model from <a> element with specified dimensions. -->
<!-- Apply shoelace animation, rotation and color to the shoe model once extracted. -->
<a id="redShoe" extractable extracted-src="models/redShoe.glb"
model-animation="shoelace, false, 1"
extracted-size="0.25, 0.25, 0.7"
rotation="0.6, 2.3, 4"
color="red">Press and hold trigger here to extract red shoe</a>