I just changing OrbitControls to FlyControls.
However, it seems FlyControls is not working with PerspectiveCamera.
Am I missing some props for FlyControls?
function Product() {
return (
<Suspense fallback={null}>
<Canvas >
<PerspectiveCamera makeDefault fov={90} position={[0, 0, 10]} />
<FlyControls
autoForward={false}
dragToLook={false}
movementSpeed={10}
rollSpeed={0.005}
makeDefault
/>
<color args={[0, 0, 0]} attach="background" />
<Model />
<ambientLight intensity={0.1} />
</Canvas>
</Suspense>
)
}
<OrbitControls
maxPolarAngle={1.5}
target={[0, 0, 0]}
enableZoom={true}
enablePan={true}
enableRotate={true}
makeDefault />
Related
Hi my problem is the following:
I successfully added shadows to my viewport but those seemed to be cropped inside a certain region. Thank you for your help :-)
with crop
region
<Canvas colorManagement shadows>
<ambientLight intensity={0.1} />
<directionalLight intensity={0.5} position={[80, 80, 30]} castShadow />
<OrbitControls />
<Box castShadow receiveShadow args={[1, 3, 30]} position={[0, 0.2, 0]}>
<meshStandardMaterial attach="material" color="gray" />
</Box>
<Box
castShadow
rotation={[0, -Math.PI / 2, 0]}
receiveShadow
args={[1, 3, 30]}
position={[0, 0.2, 0]}
>
<meshStandardMaterial attach="material" color="gray" />
</Box>
<Plane
receiveShadow
rotation={[-Math.PI / 2, 0, 0]}
position={[0, -1, 0]}
args={[100, 100]}
>
<meshStandardMaterial attach="material" color="white" />
</Plane>
</Canvas>
By default, a DirectionalLight shadow uses an orthographic camera to calculate the region where it casts shadows. This camera has left, right, top, bottom attributes set to [-5, 5] units by default. Your Box objects are larger than this, so they only cast shadows in the region within the light's shadow-camera. You need to modify your light shadow's camera dimensions to be big enough to fit your objects. For example:
light.shadow.camera.left = -20;
In react-three-fiber, you would achieve the same, by accessing the required property via a kebab-case prop.
<directionalLight castShadow shadow-camera-left={-20} />
You can read more about the light's camera dimensions in the docs
Additionally, you could add a DirectionalLightHelper to your DirectionalLight to better visualize the region of this shadow-camera.
https://jsfiddle.net/9d5gc80z/
<ComposedChart width={600} height={400} data={data}
margin={{top: 20, right: 20, bottom: 20, left: 20}}>
<CartesianGrid stroke='#f5f5f5'/>
<XAxis dataKey="name"/>
<YAxis />
<Tooltip />
<Legend />
<Area type='monotone' dataKey='amt' fill='#8884d8' stroke='#8884d8'/>
<Bar dataKey='pv' barSize={20} fill='#413ea0' />
<Line type='monotone' dataKey='uv' stroke='#ff7300' />
</ComposedChart>
in this example first bar is over YAxis.
how to save gap between bar and YAxis?
Correct example with BarChart
https://jsfiddle.net/3z98Lqyh/
<BarChart width={600} height={300} data={data}
margin={{top: 20, right: 30, left: 20, bottom: 5}}>
<CartesianGrid strokeDasharray="3 3"/>
<XAxis dataKey="name"/>
<YAxis/>
<Tooltip/>
<Legend />
<Bar dataKey="pv" stackId="a" fill="#8884d8" />
<Bar dataKey="uv" stackId="a" fill="#82ca9d" />
</BarChart>
Use the XAxis padding prop like this:
<XAxis dataKey="name" padding={{ left: 20, right: 20 }} />
More info here:
https://recharts.org/en-US/api/XAxis
I have following List component where customerid and technicianid are
ReferenceField. Sometimes I have technicianid as null. So the UI keeps showing the loading bar (as shown in the image below).
Question:
How can I tell the ReferenceField to handle null and just show the empty string.
export const AppointmentList = (props) => (
<List title="All Appointments" {...props}>
<Datagrid>
<ReferenceField source="customerid" reference="customers" label="Customer" >
<TextField source="name" />
</ReferenceField>
<TextField source="name" label="Name" />
<DateField source="scheduleddt" label="Schedule Date" />
<ReferenceField source="technicianid" reference="technicians" label="Technician" >
<TextField source="name" />
</ReferenceField>
<DateField source="createddatetime" label="Created" />
</Datagrid>
</List>
);
You'll need the 'allowEmpty' attribute.
export const AppointmentList = (props) => (
<List title="All Appointments" {...props}>
<Datagrid>
<ReferenceField source="customerid" reference="customers" label="Customer" >
<TextField source="name" />
</ReferenceField>
<TextField source="name" label="Name" />
<DateField source="scheduleddt" label="Schedule Date" />
<ReferenceField source="technicianid" reference="technicians" label="Technician" allowEmpty>
<TextField source="name" />
</ReferenceField>
<DateField source="createddatetime" label="Created" />
</Datagrid>
</List>
);
https://marmelab.com/admin-on-rest/Inputs.html#referenceinput
We are currently working on it :)
I'm having a really hard time animating the transition from one page to another with react-router-dom. The exmaple is fine but I can't get it to work within a Switch component provided by react-router-dom.
I've tried doing this around the Switch component or inside it but it doesn't do anything (also no warnings or errors in the console).
Example
class Layout extends PureComponent {
render() {
const { account } = this.props;
return (
<div className="MAIN">
<Header image={account.resources.logo} backgroundColor={account.theme} />
<ProgressionBar />
<div className="MAIN__content">
<CSSTransition classNames="fade" timeout={{ enter: 1500, exit: 500 }}>
<Switch key={this.props.location.key} location={this.props.location}>
<Route exact path={`${basePath}start`} component={Start} />
<Route exact path={`${basePath}questions`} component={Questions} />
<Route exact path={`${basePath}comments`} component={Comments} />
<Route exact path={`${basePath}capture`} component={Capture} />
<Route exact path={`${basePath}disclaimer`} component={Disclaimer} />
<Route exact path={`${basePath}finish`} component={null} />
</Switch>
</CSSTransition>
<Footer />
</div>
</div>
);
}
}
CSS
.fade-enter {
opacity: 0.01;
}
.fade-enter.fade-enter-active {
opacity: 1;
transition: opacity 500ms ease-in;
}
.fade-exit {
opacity: 1;
}
.fade-exit.fade-exit-active {
opacity: 0.01;
transition: opacity 300ms ease-in;
}
Try this:
<CSSTransition classNames="test" transitionLeaveTimeout={300}>
<Switch key={this.props.location.pathname} location={this.props.location}>
...
</Switch>
</CSSTransition>
try to rename classNames to transitionName.
and the css .fade-exit also should be .fade-leave if you are using these libraries: https://facebook.github.io/react/docs/animation.html or not?
Thanks #Melounek for the help, the issue resided in that I needed to wrap the CSSTransition in a TransitionGroup as shown in the migration docs of react-transition-group.
Example
class Layout extends PureComponent {
render() {
const { account, location } = this.props;
return (
<div className="MAIN">
<Header image={account.resources.logo} backgroundColor={account.theme} />
<ProgressionBar />
<div className="MAIN__content">
<TransitionGroup>
<CSSTransition
key={location.key}
classNames="fade"
timeout={{ enter: 1000, exit: 1000 }}
transitionEnterTimeout={1000}
transitionLeaveTimeout={1000}
>
<Switch key={location.key} location={location}>
<Route exact path={`${basePath}start`} component={Start} />
<Route exact path={`${basePath}questions`} component={Questions} />
<Route exact path={`${basePath}comments`} component={Comments} />
<Route exact path={`${basePath}capture`} component={Capture} />
<Route exact path={`${basePath}disclaimer`} component={Disclaimer} />
<Route exact path={`${basePath}finish`} component={null} />
</Switch>
</CSSTransition>
</TransitionGroup>
<Footer />
</div>
</div>
);
}
}
Try this:
<CSSTransition key={this.props.location.pathname.split('/')[1]} timeout={500} classNames="fadeTranslate" mountOnEnter={true} unmountOnExit={true}>
<div className="WRAPPER">
<Switch location={this.props.location}>
<Route path="/" exact component={Home} />
<Route path="/blog" component={Blog} />
<Route path="/albumn" component={Albumn} />
</Switch>
</div>
</CSSTransition>
Reference: https://github.com/ReactTraining/react-router/issues/5279#issuecomment-315652492
I've got the beginning of an air app, and I'm trying to transition between the states using Fade (a Sequence that should, in theory, fade out, then fade the next state in.) Is there a way to target it to fade out ALL the elements, or will I need to use targets="..." and list every element?
I've tried nesting all the elements in a Group, but that isn't seeming to work.
Shortened version of my current code:
<s:states>
<s:State name="HomeScreen"/>
<s:State name="EnemyBuilder"/>
<s:State name="EncyclopediaBuilder"/>
</s:states>
<fx:Declarations>
<s:Transition toState="*" fromState="*" >
<s:Sequence >
<s:Fade alphaFrom="1" alphaTo="0" duration="250" target="{wrapper}" />
<s:Fade alphaFrom="0" alphaTo="1" duration="250" target="{wrapper}" />
</s:Sequence>
</s:Transition>
</fx:Declarations>
<s:Group id="wrapper" includeIn="HomeScreen, EnemyBuilder, EncyclopediaBuilder" >
<s:BorderContainer id="encounter" includeIn="HomeScreen"
x="49" y="99" width="200" height="44"
styleName="falseButton"
rollOut="alphaOver(event)" rollOver="alphaOver(event)" click="currentState='EncyclopediaBuilder'" >
<s:Label x="48" y="8" color="#000000" fontFamily="Arial" text="Create a new encounter" />
<s:Label x="48" y="24" color="#000000" fontStyle="italic" text="Single encounter" />
<s:Image x="10" y="10" source="assets/001_01.png" />
<s:BorderContainer id="back" includeIn="EncyclopediaBuilder"
right="20" bottom="20" width="200" height="44"
styleName="falseButton"
rollOut="alphaOver(event)" rollOver="alphaOver(event)"
click="currentState='HomeScreen'" >
<s:Label x="48" y="16" color="#000000" fontFamily="Arial" text="Save and Return"/>
<s:Image x="10" y="10" source="assets/001_01.png"/>
</s:BorderContainer>
</s:BorderContainer></s:Group>
Try to use something like the following:
<s:states>
<s:State name="HomeScreen"/>
<s:State name="EnemyBuilder"/>
<s:State name="EncyclopediaBuilder"/>
</s:states>
<s:transitions>
<s:Transition toState="*" fromState="*" >
<s:Sequence target="{wrapper}">
<s:Fade alphaFrom="1" alphaTo="0" duration="250" />
<s:Fade alphaFrom="0" alphaTo="1" duration="250" />
</s:Sequence>
</s:Transition>
</s:transitions>
<s:Group id="wrapper">
<s:BorderContainer id="encounter" includeIn="HomeScreen"
x="49" y="99" width="200" height="44"
styleName="falseButton"
rollOut="alphaOver(event)" rollOver="alphaOver(event)" click="currentState='EncyclopediaBuilder'" >
<s:Label x="48" y="8" color="#000000" fontFamily="Arial" text="Create a new encounter" />
<s:Label x="48" y="24" color="#000000" fontStyle="italic" text="Single encounter" />
<s:Image x="10" y="10" source="assets/001_01.png" />
<s:BorderContainer id="back" includeIn="EncyclopediaBuilder"
right="20" bottom="20" width="200" height="44"
styleName="falseButton"
rollOut="alphaOver(event)" rollOver="alphaOver(event)"
click="currentState='HomeScreen'" >
<s:Label x="48" y="16" color="#000000" fontFamily="Arial" text="Save and Return"/>
<s:Image x="10" y="10" source="assets/001_01.png"/>
</s:BorderContainer>
</s:BorderContainer></s:Group>