@superviz/threejs-plugin NPM

SuperViz threejs SDK plugin

Description

@superviz/threejs-plugin is a plug and play package that you can use together with the superviz sdk to easily inject custom avatars and functionality to your threejs 3d world.

current threejs version supported: TODO

Getting started

import SuperViz, {
	MeetingEvent
} from '@superviz/sdk';

import { threejsPlugin } from '@superviz/threejs-plugin';

const supervizSdk = await SuperViz.init(DEVELOPER_KEY, { // for more info on the superviz sdk check docs.superviz.com
	userGroup: {
			id: "<GROUP-ID>",
			name: "<GROUP-NAME>"
	},
	user: {
			id: "<MY-USER-ID>",
			name: "<MY-USER-NAME>",
			isHostCandidate: true,
			avatar: {
				model: "YOUR_AVATAR_URL.gltf"
			}
	},
	roomId: "<ROOM-ID>",
	debug: true
});

const plugin = new threejsPlugin(scene, camera, player);
//player.userData.avatar // TODO EXPLICAR

supervizSdk.subscribe(MeetingEvent.MY_USER_JOINED, () => {
	this.threejsPluginInstance = supervizSdk.connectPlugin(plugin, {

		avatarConfig: {
			height: 0,
			scale: 1,
		},
		isAvatarsEnabled: true,
		isPointersEnabled: true,
		isNameEnabled: true,
		renderLocalAvatar: true,
	});
});

SDK user initialization parameters

avatar.model: the URL of the .gltf or .glb model you want to be the avatar of the current user instance. The plugin will use this URL to create the avatar.

Plugin initialization options

avatarConfig.scale: the scale you want your avatar to be rendered
avatarConfig.height: the height you want your avatar to be positioned
isAvatarsEnabled: enable or disable avatar creation
isPointersEnabled: enable or disable pointer creation (if avatars are disabled, isPointersEnabled is forced to false)

SDK Methods

getUsersOn3D()
To access users current 3D properties like position, rotation use: this.threejsPluginInstance.getUsersOn3D();

e.g

[{
	id: 123,
	name: "John Doe",
	avatar: {
		model: "model.gltf"
	},
	avatarConfig: {
		scale: 1,
		height: 0
	},
	position: { x: 0, y: 0, z: 0 },
	rotation: { x: 0, y: 0 }
}]

getAvatars()
To access users avatar class instances: this.threejsPluginInstance.getAvatars();
e.g const avatars = this.threejsPluginInstance.getAvatars() avatarsuserId.model // Object3D Instance avatarsuserId.animations // Animations List

Considerations

Before changing your threejs model you have to call this.supervizSdk.disconnectPlugin() and then after the new threejs model is loaded you have to connect the plugin again.

Further functionality, like follow mode, is expected to be released soon.