someone knows how to assign a gradient to a MeshBasicMaterials that in my case is a Sphere?
At the moment I have an orange #ff8300 sphere that I would like to have a gradient from #ffff00 to #ff0000.
🙏
<mesh>
<sphereBufferGeometry args={[0.8, 30, 30]} attach="geometry" />
<meshBasicMaterial color={0xff8300} attach="material" />
</mesh>
I found that the easiest way to accomplish a gradient material with #react-three/fiber is using the GradientTexture helper component included with #react-three/drei.
Here's a simple example that's mostly straight from the docs:
<mesh ref={sphereRef}>
<sphereGeometry args={[2.5, 30, 30]} attach="geometry" />
<meshBasicMaterial>
<GradientTexture
stops={[0, 1]} // As many stops as you want
colors={['aquamarine', 'hotpink']} // Colors need to match the number of stops
size={1024} // Size is optional, default = 1024
/>
</meshBasicMaterial>
</mesh>
Related
I'm trying to add a 3D effect on a plane in a React site. But I haven't been able to create a plane that fills the camera, like in all the Three.js shader or post-processing examples.
I have tried using an Orthographic Camera + plane, based on this answer, like so:
<Canvas>
<OrthographicCamera left={-1} right={1} top={1} bottom={-1} near={0} far={1} />
<planeGeometry args={[2, 2]} />
</OrthographicCamera>
</Canvas>
But this results in a small square in the middle of the canvas.
I also tried using a ScreenQuad, like so:
<Canvas style={{width: '100vw', height: '100vh'}}>
<ScreenQuad />
</Canvas>
But this results in a triangle in the middle of the canvas.
Here is a repo reproducing both examples: https://github.com/Cecile-Lebleu/gatsby-r3f-bug
I can only cover the Canvas by blowing up the size of the plane, but it's not a good solution: the effect looks giant on small screens and still cropped on larger screens.
What's going on? How can I make a simple plane that covers the camera regardless of Canvas size?
In case anyone ever runs into this, the solution thanks to #0xca0a:
Set the camera to default: <OrthographicCamera makeDefault>
And scale the mesh to fit the viewport.
const viewport = useThree(state => state.viewport)
return (
<mesh scale={[viewport.width, viewport.height, 1]}>
<planeGeometry />
</mesh>
Add in useAspect for responsive images:
function Scene() {
const size = useAspect(1800, 1000)
return (
<mesh scale={size}>
)}
The first two args are the width and height of the image, it then calculates a viewport big enough to cover, and it's responsive.
Or just use drei/image.
I want to create a (semi) transparent box
<mesh position={position} transparent opacity={0.1}>
<boxGeometry args={scale}>
<meshPhingMaterial color={(0.5, 0.5, 0.5)} opacity={0.1} transparent />
</boxGeometry>
</mesh>
I tried several values for opacity, but the box stays non transparent.
What's wrong?
<mesh position={position} scale={scale}>
<boxGeometry />
<meshPhongMaterial color="#ff0000" opacity={0.1} transparent />
</mesh>
you can consult threejs docs for all of these objects: https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene all the props and constructor args are listed in there.
and at least once skip through this section real quick https://docs.pmnd.rs/react-three-fiber/API/objects to learn about react semantics.
ps. (0.5, 0.5, 0.5) in javascript just means that it will return the last number. const a = (1, 2, 3) yields 3.
pps. it is better to scale the mesh instead of constructor args. if you change args the object must get re-created because you literally do new BoxGeometry(scale). on the mesh on the other hand it won't have to do it and it's faster.
The Recharts docs describe how to format the style of a data point during hover, as well as the tooltip.
However during a hover, the solid vertical line that appears does not seem to be described in the docs (unless I'm missing it).
Is there a prop that allows for formatting that line?
(If you don't know what I'm talking about, it's the solid vertical line above "Nov-14" in my example image)
This is my line chart and the result:
<ResponsiveContainer>
<LineChart data={this.props.data} margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="date" tickFormatter={xFormatter}/>
<YAxis dataKey="value" tickFormatter={yFormatter}/>
<Tooltip />
<Line type="monotone" dataKey="value" stroke="#4F80E4" strokeWidth={2}/>
</LineChart>
</ResponsiveContainer>
You will need to edit the cursor :)
<Tooltip cursor={false}/>
// Out of topic: since you using recharts, can you take a look at my question too Is there a way to set Background Color of XAxis
I want to copy a chart to the clipboard. I'm doing it by converting the chart to a canvas using html2canvas npm package.
Is there any event I can listen to that will indicate that the lines in the chart are already drawn and i can safely copy to clipboard?
Right now if i'm not waiting long enough I get an empty chart.
You can make us of the onAnimationEnd props of any chart component like <Line>, <Bar>, <Pie> or whatever you are using. Just to make it clear; it is not defined for LineChart but Line component itself.
I think it is not documented, but works like a charm.
<LineChart width={730} height={250} data={data}
margin={{ top: 5, right: 30, left: 20, bottom: 5 }}>
<XAxis dataKey="name" />
<Line type="monotone" dataKey="pv" stroke="#8884d8" onAnimationEnd={this.copyToCanvas} />
</LineChart>
Is it possible to animate the second value of the stdDeviation attribute?
Actually Gsap allows to animate numerical attribute like stdDeviation :
.to(blurNode, 0.5, {attr:{stdDeviation:20}, "blur")
But in the case of the stdDeviation we can have 2 values like so :
<feGaussianBlur in="SourceGraphic" stdDeviation="0 0" />
Is it possible to animate only the second value?
Sure, it should be as simple as:
TweenMax.to("#test", 5, {attr:{stdDeviation:"0 20"}});
Here's a demo:
http://codepen.io/anon/pen/KgrZKK?editors=1010#
(Just make sure you've got a relatively recent version of GSAP)