andrewimm
commented
7 years ago This isn't exactly a React VR issue. {this.props.MyPos} isn't valid JS. Anything in braces has to be the body of a valid object.
When the interpreter reaches this expression, it sees a single entity in the object, and assumes you are trying to use the shorthand notation, where {x} is the equivalent of {x: x}. The interpreter reads the next token, this, and determines that it can't do anything legal at this point because that is an invalid literal object key, which is why you get the particular error message that you do.
Assuming this.props.myPos is a 3-element array, things will work if you set translate: this.props.myPos with no wrapping. There are no vector types in JS.
There is a pretty full description of transforms here: https://facebook.github.io/react-vr/docs/3dcoordinates-and-transforms.html#transforms, but if you feel that the docs could be improved, you can always submit a PR.
Description
This is a question, and a recommendation to add to the doc page at:
https://facebook.github.io/react-vr/docs/components-props-and-state.html
Expected behavior
I try to create an object, following the example(s) in the docs (the Text at https://facebook.github.io/react-vr/docs/components-props-and-state.html), like this:
class Platform extends Component { render() { return ( <Box dimWidth={5} dimDepth={5} dimHeight={.1}
texture={asset('DeckPlate.jpg')} style={{ transform: [ { translate: {this.props.MyPos}! }
] }} />
} } ....
Actual behavior
I get an error: "message": "SyntaxError F:/ReactVR/SpaceGallery/index.vr.js: this is a reserved word (42:24)", "snippet": [ " 40 | transform: [", " 41 | {", "> 42 | translate: {this.props.MyPos}!", " | ^", " 43 | } ", " 44 | ]", " 45 | }}" ],
If I replace {this.props.MyPos}! with this.props.MyPos, then I get an error:
Transform with key of translate must have an array as the value: {"translate":"[0,0,-5]"}
I thought
Reproduction
See code above - I copied pretty much the example and extended to a style. I don't know React that well so it's quite possible I'm doing something stupid.
If this is the case, I hope that a simple documentation clarification or example can prevent others from bashing their heads :)
As a side note, the page: https://facebook.github.io/react-vr/docs/components-props-and-state.html or https://facebook.github.io/react/docs/components-and-props.html don't mention why you use ! except through inspection of the examples.
Solution
I can change the translate line in the class to be:
Then I instantiate by doing:
This works. I would think there'd be a way to include vectors, but for some reason I don't get it (right now) so a doc addition might be useful (either to confirm or deny :) )
This almost looks like old school VB6's named properties on method calls.
Additional Information
'react-vr' package version: `-- react-vr@1.4.0
'react-vr-web' package version: -- react-vr-web@1.4.0
Operating System: Windows (embarrassingly, Win7, 64 bit)
Graphics Card: NVidea GTX 1070,
Browser: FireFox Nightly
VR Device: Out of headset, world doesn't load.