Properties and Methods
If you check the API documentation of the View360, you can see that there are various properties and methods defined in Properties and Methods section.
These properties and methods are defined in an instance of View360. That is, if you want to display the item yaw on the console, and then invoke the load() method, you can write the code as follows:
// I'll skip the option here.
const view360 = new View360(...);
// Print the current yaw value to the console window
console.log(view360.camera.yaw);
// Load new projection
view360.load(...);
The same can be used if you are using a framework such as React (e.g., @egjs/react-view360
).
Different frameworks have different approaches to getting a reference of the component, but the rest is the same.
Below is an example.
- React
- Angular
- Vue@2
- Vue@3
- Svelte
import React, { useRef, useEffect } from "react";
import View360 from "@egjs/view360";
// Suppose it's Typescript(.tsx) file
export default () => {
const viewerRef = useRef<View360>();
useEffect(() => {
// We got an instance of View360. This provides access to properties and methods.
const view360 = viewerRef.current;
console.log(view360.camera.yaw);
view360.load(...);
}, []);
return <View360 ref={viewerRef} />;
}