This demo shows use of scene.attachModel
:
- Each of the for corners has an anchor point null with different alignment.
- The model has two attach points: 'Left', and 'Right'.
- Select the anchor and attach point in the dropdowns, and the Model will be moved so that the anchor and attach points align.
- If 'With Rotation' is selected, the two Nulls will also be aligned in rotation.
Clara.io demo resources:
Visit Base Scenevar anchorNodesSelect = document.getElementById('anchor-nodes');
var attachNodesSelect = document.getElementById('model-attach-nodes');
var withRotationInput = document.getElementById('with-rotation');
var sceneId = '1528fec0-e40e-443a-b17b-a707f06597fd';
var api = claraplayer('player');
api.sceneIO.fetchAndUse(sceneId).then(function() {
var modelId = api.scene.find('Model');
var anchors = api.scene.getAll({
type: 'Null',
name: 'Anchor*',
property: 'name',
});
anchorNodesSelect.options[0] = new Option('Select Anchor', '');
Object.keys(anchors).forEach(function(anchorId, i) {
anchorNodesSelect.options[i + 1] = new Option(anchors[anchorId], anchorId);
});
attachNodesSelect.options[0] = new Option(
'Left',
api.scene.find({ from: modelId, name: 'Left' })
);
attachNodesSelect.options[1] = new Option(
'Right',
api.scene.find({ from: modelId, name: 'Right' })
);
anchorNodesSelect.onchange = onChange;
attachNodesSelect.onchange = onChange;
withRotationInput.onchange = onChange;
document
.getElementById('baseScene')
.setAttribute('href', 'https://clara.io/view/' + sceneId);
function onChange() {
var anchorId = anchorNodesSelect.value;
var attachNodeId = attachNodesSelect.value;
var withRotation = withRotationInput.checked;
if (!anchorId) {
api.scene.set(
{ id: modelId, plug: 'Transform', property: 'translation' },
{ x: 0, y: 0, z: 0 }
);
} else {
api.scene.attachModel(anchorId, modelId, attachNodeId, withRotation);
}
}
});