Presence for AutoDesk APS Viewer
The Autodesk plugin is designed to seamlessly integrate Presence controls, Mouse Pointers, avatars, and lasers into your BIM software.
Before we start
Before utilizing the Autodesk component, it is essential to initialize a room with a defined name and ID for the participant.
If you want to use 3D avatars, see initialization for further info. if no avatar has been provided, then a default avatar from SuperViz will be used.
Embedded viewer vs External viewer
There are two different approaches on how to implement SuperViz into an Autodesk APS viewer.
- Choose Embedded Viewer if you want SuperViz to create the Autodesk viewer code. You only need to pass your tokens and attributes and the component takes care of the rest.
- Choose External viewer if you've already built your application and want to have complete control of the viewer. Then you just need to pass your viewer as an object and the component takes care of the rest.
When using Video Conference together with Presence for AutoDesk APS Viewer, you can enable users to select from our list of avatars, by setting the flag defaultAvatars
as true
on the Video Conference constructor.
How to use
- Embedded viewer
- External viewer
import { AutodeskViewer } from "@superviz/react-sdk";
import { useState } from "react";
function Room() {
const [viewerInstance, setViewerInstance] = useState(null);
return (
<AutodeskViewer
onViewerInitialized={({ viewer }) => {
setViewerInstance(viewer);
viewer.setTheme("dark-theme");
}}
isAvatarsEnabled={false}
isLaserEnabled={false}
modelUrn="<modelURN>"
clientId="<clientID>"
clientSecret="<clientSecret>"
/>
);
}
export default Room;
import { AutodeskPresence } from "@superviz/react-sdk";
import { useState } from "react";
function Room() {
const [viewerInstance, setViewerInstance] = useState(null);
useEffect(() => {
window.Autodesk.Viewing.Initializer(options, async () => {
const viewerDiv = document.getElementById('forge-viewer');
const viewer = new Autodesk.Viewing.GuiViewer3D(viewerDiv);
await viewer.start();
setViewerInstance(viewer);
})
}, []);
return (
<AutodeskPresence
viewer={viewer}
isAvatarsEnabled={false}
isLaserEnabled={false}
>
<div id="forge-viewer"></div>
</AutodeskPresence>
);
}
export default Room;
Properties
- Embedded viewer
- External viewer
Name | Type | Description |
---|---|---|
modelUrn | string | Required. Your translated design file is identified with the URN of the seed and will look something like urn:adsk.objects:os.object:031adb62-49cc-481a-8fde-b878e43fd956/1683202300280-031adb62-49cc-481a-8fde-b8282e43fd956.ifc |
clientId | string | Required. Autodesk APS client ID |
clientSecret | string | Required. Autodesk APS client Secret |
initializeOptions | object | Optional. The options for initializing the viewer, excluding accessToken |
isAvatarsEnabled | boolean | Optional. Defines whether avatars should be enabled or not. Default value: true |
isLaserEnabled | boolean | Optional. Defines whether laser pointers should be enabled or not. If isAvatarsEnabled is set to false , then isLaserEnabled will also be false .Default value: true |
isNameEnabled | boolean | Optional. Defines whether the name above the avatars should be enabled or not. Default value: true |
isMouseEnabled | boolean | Optional. Defines whether Mouse pointers should be enabled or not. Default value: true |
avatarConfig | AvatarConfig | Optional. The configuration object for the avatar. See the AvatarConfig section for more details. |
Name | Type | Description |
---|---|---|
Viewer | Autodesk.Viewing.GuiViewer3D | Required. The Autodesk Viewer instance |
isAvatarsEnabled | boolean | Optional. Defines whether avatars should be enabled or not. Default value: true |
isLaserEnabled | boolean | Optional. Defines whether laser pointers should be enabled or not. If isAvatarsEnabled is set to false , then isLaserEnabled will also be false .Default value: true |
isNameEnabled | boolean | Optional. Defines whether the name above the avatars should be enabled or not. |
isMouseEnabled | boolean | Optional. Defines whether Mouse pointers should be enabled or not. Default value: true |
avatarConfig | AvatarConfig | Optional. The configuration object for the avatar. See the AvatarConfig section for more details. |
The minimum Autodesk Platform Services Viewer version required is version 7.
Events
- Embedded viewer
- External viewer
onViewerInitialized
Type: (ViewerInitializedParams) => void
A callback function is called when the viewer is initialized. Receives a ViewerInitializedParams parameter.
onDocumentLoadSuccess
Type: (Document) => void
A callback function that is called when a document is successfully loaded. Receives a Document
parameter
onDocumentLoadError
Type: (error) => void
A callback function that is called when a document fails to load. Receives an errorCode
, errorMsg
, and messages
parameters
No events available
useAutodesk
Hook
follow
Type: (participantId?: string) => void
When called with a participant ID as an argument, this function enables other participants to follow the specified participant in the Autodesk viewer. If no ID is provided, the follow feature is disabled.
Example:
function Room() {
const { follow } = useAutodesk();
function followUser() {
follow('participant-id');
};
function unFollow() {
follow();
};
return (
<>
<button onClick={followUser}>Follow user</button>
<button onClick={unFollow}>Unfollow</button>
</>
)
}
goto
Type: (participantId: string) => void
When invoked with a participant ID as an argument, this function allows other participants to instantly navigate to the specified participant's position in the 3D space, enabling easy and quick location of participants.
Example:
function Room() {
const { goTo } = useAutodesk();
function goToUser() {
goTo('participant-id');
};
return (
<>
<button onClick={goToUser}>Go to user</button>
</>
)
}
Types Definition
AvatarConfig
Type: object
An object describing the configuration for avatar, like scale, position, and laser configuration.
Name | Type | Description |
---|---|---|
height | number | Required. >The height you want your avatar to be positioned from the ground, in pixels. |
scale | number | Required. The scale you want your avatar to be rendered, in percent 0 to 1. |
laserOrigin | number | Required. The origin position of your laser beam in relation to your avatar model. |
Example:
avatarConfig: {
height: 1.6,
scale: 1,
laserOrigin: {
x: 0,
y: 0,
z: 0
}
}
Position
Type: object
Represents the origin position of your laser beam in relation to your avatar model.
Name | Type | Description |
---|---|---|
x | number | Required. Represents the x-axis (horizontal) position. |
y | number | Required. Represents the y-axis (vertical) position. |
z | number | Required. Represents the z-axis (depth) position. |
Example:
laserOrigin: {
x: 0,
y: 0,
z: 0
}