Create your own viewer of RICHO THETA with Knockout.js, Three.js and jQuery.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
example
.gitignore
LICENSE
README.md
knockout.theta.js

README.md

knockout.theta

Create your own viewer of RICHO THETA with Knockout.js, Three.js and jQuery.

Live Example

RECHO THETA で撮影した equirectangular 形式の全天球写真を簡単に球体表示させることができる Knockout.js のバインディングハンドラです。 Three.js を使った全天球処理は richo-theta-with-threejs を参考にしました。

Usage

Bind your equirectangular image URL.

<div data-bind="theta: 'path/to/image.jpg'"></div>

Of course, you can bind an observable.

<div data-bind="theta: imageUrl"></div>
function ThetaViewModel() {
	var self = this;
	self.imageUrl = ko.observable('path/to/image.jpg');
	
	// ... later
	self.imageUrl('path/to/other_image.jpg'); // Image change.
}
ko.applyBindings(new ThetaViewModel());

You can also pass optional parameters - thetaWheelZoom and thetaLoading.

thetaWheelZoom

Enable or disable zoom on corresponding element.

<div data-bind="theta: imageUrl, thetaWheelZoom: zoomEnabled"></div>
function ThetaViewModel() {
	var self = this;
	self.imageUrl = ko.observable('path/to/image.jpg');
	self.zoomEnabled = ko.observable(true);
	
	// ... later
	self.zoomEnabled(false); // disable wheel zoom.
}
ko.applyBindings(new ThetaViewModel());

thetaLoading

Know the loading is started, or completed.

<div data-bind="theta: imageUrl, thetaLoading: isLoading"></div>

<p data-bind="visible: isLoading">Now loading...</p>
<p data-bind="visible: !isLoading()">Loading completed!</p>
function ThetaViewModel() {
	var self = this;
	self.imageUrl = ko.observable('path/to/image.jpg');
	
	// automatically change to false when completed to load the image.
	self.isLoading = ko.observable(true);
}
ko.applyBindings(new ThetaViewModel());

Please look the code at Live Example for more information.