Comments (11)
this is already implemented if i'm not mistaken, although we must modify:
initialize this.camera = options.camera || null;
in the VRInstance
constructor
then pass the camera to Player in
this.player = new Player({ elementOrId: parent, width: options.width, height: options.height, camera: this.camera, });
in OVRUI/lib/Player/Player.js add
this._camera = (options.hasOwnProperty('camera'))? options.camera : null;
And finally pass the camera while creating VRInstance in client.js. The only drawback of this "patch" is that we have to calculate manually width & height (I just copied this from Player.js' camera implementation):
// If container not specified, default to full window.
if (!this._el) {
this._el = document.body;
}
// If height and width are not provided, detect them from the container.
var fixedSize = true;
if (!width) {
if (this._el === document.body) {
fixedSize = false;
width = window.innerWidth;
} else {
width = this._el.clientWidth;
}
}
if (!height) {
if (this._el === document.body) {
fixedSize = false;
height = window.innerHeight;
} else {
height = this._el.clientHeight;
}
}
const camera = new THREE.PerspectiveCamera(60, width / height, 0.01, 10000.0);
I'm just starting out, so if this explanation wasn't clear i'll explain it further, although I think this patch might not be the ideal solution.
from react-360.
I initially did it as you suggested, almost word for word but had some issues with passing my own camera, things didn't look right.
In the end I added a function that returns a reference to the Player instance camera
from react-360.
i'll reproduce it on a clean installation, I guess I forgot a step. Any meaningful error ?
from react-360.
@morsdyce forgot to add the line about adding the camera to the instance initialization in client.js:
const vr = new VRInstance(bundle, 'CentroArteVR', parent, { enableHotReload: true, scene: scene, // Custom scene camera: camera, // Custom camera ...options, });
from react-360.
from react-360.
the only time I had a black screen was because it need to get the width and height, so I just copied and pasted the width/height calculations done in Player.js when creating the camera. Btw do you have any idea how to use the sound module? looks like it's still broken (probably will open another thread but just in case..)
from react-360.
from react-360.
@morsdyce well I ran the code in my local repo at home and just by passing the camera
in the VRInstance
options
(just as scene
is passing) works just fine, without any patch. Would you test it please ?
from react-360.
yes you can pass a camera to the Player instance or use Player.camera to get the default one that is created, and I agree it would be convenient to have these options on the VRInstance as well.
from react-360.
Both 1 & 2 above are implemented. Added VRInstance.camera() to get current camera. Can also pass camera in the options to VRInstance constructor
from react-360.
when I try to use VrInstance.camera() to get a camera it says that cannot read property camera from undefined, any help?
from react-360.
Related Issues (20)
- How to read cursor position
- react 360 is not working in windows whlie using node.12.14.1 and react16.3.1 HOT 4
- How to add a simple static button over react-360?
- how can I exactly create 360 video with react 360? HOT 1
- I can use the device camera as background with React-360?
- Creating a gitter or discord server for the open source contributors.
- how to run the dev server on windows ?
- Is it possible to make an effect as if a viewer is moving around the space? HOT 1
- Maintained? HOT 9
- Environment.setBackground gives an error
- It's possible to pass `-h` as a folder name
- starting issue HOT 4
- React-360 Camera Movement on Mobile Devices HOT 1
- render pano image by layers
- If you're going to revoke patents, at least remove it from the README HOT 1
- Can we add popup window to screenspace instead of world space? HOT 1
- Using document object or jquery inside react 360 component HOT 1
- Model animations load and play
- unable to run react vr http://localhost:8081/vr/ HOT 3
- React360 is incompatible with Oculus Quest HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-360.