So I can't seem to get html to rotate with react-three/drei without it being extremely blurry. It won't blur at smaller sizes, but whenever I add more text it reaches a point where it just blurs up like below.
If there's a more standard way to rotate an html container, please let me know and i'll just that because i'm losing my mind here.
Code:
<Html
as="div"
position={[0, 0, 0]}
rotation={[0, 0.4, 0]}
transform
style={{
backgroundColor: "green",
borderRadius: 4,
}}
>
<div>
{"Testingsss"}
</div>
...
</Html>
Without rotation:
With rotation:
Related
I am making a project using Next.js, Three.js, #react-three/fiber, and #react-three/postprocessing.
I wanted to create a Bloom effect, but it looks very weird and ugly. It doesn't inherit the mesh material emissive color - it is white, and it looks very blocky and pixelated.
The Noise effect is also weird. It looks OK, until I set the Blending Mode to Additive and then it looks glitchy when scrolling.
This is my code:
import { Canvas } from "#react-three/fiber";
import { Suspense } from "react";
import * as THREE from "three";
import gsap from "gsap";
import { Bloom, EffectComposer, Noise } from "#react-three/postprocessing";
const Three = () => {
return (
<Canvas>
<color attach="background" args={[0, 0, 0]} />
<Suspense fallback={null}>
<ambientLight />
<mesh position={[2, -3, 0]} scale={0.6}>
<sphereBufferGeometry attach="geometry" />
{/**#ts-ignore */}
<meshStandardMaterial
attach="material"
color="#571bff"
emissive="#571bff"
emissiveIntensity={200}
/>
</mesh>
</Suspense>
<EffectComposer>
<Bloom
luminanceThreshold={0}
luminanceSmoothing={0.9}
height={400}
opacity={3}
></Bloom>
<Noise opacity={0.01} blendFunction={THREE.AdditiveBlending} />
</EffectComposer>
</Canvas>
);
};
export default Three;
`
I would really appreciate any help because I really don't know how to fix this. Thank you very much.
I am trying to create an animation in react native where a character do some push ups.
Going up and down is done at the moment I want.
So I separated a gif animation in 2 gifs, without repetition. One to make him going up and the other one to make him going down..
These images are locally stored
The problem is that there is a flickering when the gif change.
I tried react-fast-image, but the gif animation is too slow and the gif is looped automatically.
I tried to put a transition image in the meatime images are switching but still a flicker behaviour.
The image onLoadEnd callback seems to be called too early, before the image actually ends up to load.
here how I switch the images
if (up.includes(this.props.timer))
this.setState({ currentGif: upGif, cacheImage: downPng })
if (down.includes(this.props.timer))
this.setState({ currentGif: downGif, cacheImage: upPng })
Here is the render:
render() {
return (
<View
style={{ position: 'absolute', bottom: 70 }}
>
<Image
source={this.state.cacheImage}
style={{ width: 400, height: 330, position: 'relative', bottom: 70 }}
fadeDuration={0}
/>
<Image
source={this.state.currentGif}
style={{ width: 400, height: 330, position: 'absolute', bottom: 70 }}
fadeDuration={0}
onLoadEnd={() => {this.setState({cacheImage: null})}} // the Image should be loaded so I can hide the cache Image, but it desapear before the gif is loaded
/>
</View>
)
}
You can use the Image.getSize API.
To get the size, RN downloads and caches the image. It's stated in the docs that this method can be used for preloading images. They also mention that a more explicit API will be provided in the future, so you can use this for now and switch to a better API when it's available.
I'm working on a mobile app with React-Native and I need to implement a new component.
The exemple :
So, my question is, how can i add this shadow / blur image on my component ?
I know how to make a blur on an image but how can i do this effect?
Thanks
so,basically you work with two images, opacity, blurRadius and position absolute.
try :
<View style={{elevation:12, position:'absolute', left:100, top:100, elevation:12, borderRadius:50, borderWidth: 1, borderColor:'rgba(255, 255, 2555, 0.4)', overflow: 'hidden', opacity:0.3}}>
<Image blurRadius={10} style={{width:300, height:150}} source={{uri:'https://image.shutterstock.com/image-photo/beautiful-garden-flowers-450w-257560639.jpg'}} />
</View>
<View style={{position:'absolute', left:95, top:90, borderRadius:50, borderWidth: 0, borderColor:'rgba(255, 255, 2555, 0.4)', overflow: 'hidden'}}>
<Image style={{width:300, height:150, }} source={{uri:'https://image.shutterstock.com/image-photo/beautiful-garden-flowers-450w-257560639.jpg'}} />
</View>
I am using AR.js and have a sphere positioned in the marker component.
<body style="margin : 0px; overflow: hidden;">
<a-scene vr-mode-ui="enabled: false" embedded="" arjs="sourceType: webcam; debugUIEnabled: false;">
<a-marker markerhandler id="marker" emitevents="true" cursor="rayOrigin: mouse" preset="hiro">
<a-sphere id="sphere" color="green" radius="0.3" position="0 1 0" ></a-sphere>
</a-marker>
<!-- use this <a-entity camera> to support multiple-markers, otherwise use <a-marker-camera> instead of </a-marker>-->
<a-entity camera="" id="camera">
<a-entity geometry="primitive: plane; height: 0.1; width: 0.1" position="0.4 -0.2 -1"
material="color: gray; opacity: 0.5"></a-entity>
<a-entity id="sphere-button" geometry="primitive: plane; height: 0.1; width: 0.1" position="-0.4 -0.2 -1"
material="color: green; opacity: 0.5"></a-entity>
</a-entity>
</a-scene>
</body>
When #sphere-button is clicked, the sphere should dettach from
and attach to the camera.
During the relocation in the DOM, the position should stay the
same, but it does not. I tried this:
let v = new THREE.Vector3();
v.copy(sphere.object3D.position);
sphere.object3D.localToWorld(v);
camera.object3D.worldToLocal(v);
sphere.parentNode.removeChild(entity);
camera.appendChild(sphere);
entity.setAttribute('position', v);
How do i correctly translate the position between the two parents a-camera and a-marker?
For reparenting, I'd do it at three.js level for now and not use the DOM. Detaching and attaching on DOM atm will re-init everything and would be a mess.
let v = new THREE.Vector3();
v.copy(sphere.object3D.position);
sphere.object3D.localToWorld(v);
camera.object3D.worldToLocal(v);
camera.object3D.add(sphere.object3D);
sphere.object3D.position.copy(v);
I've tried a different approach, using object3D.attach (as suggested by #prisoner849 in a comment) to get the position, rotation, etc. of the Three object related to the intended parent, and then cloning the entity using that position, rotation,... under the intended parent (finally, removing the original entity).
You can have a look at a component implementing this approach in this answer to "AFrame: reparenting an element keeping its world position, rotation".
I am trying to place a circular image into a button using the following styles and HTML:
.team-assign-pic {height: 32px; width: 32px}
<button class="team-assign" type="button">
<img alt="image" class="team-assign-pic" src="img/a1.jpg"> Treavor M.
</button>
What is happening is that the image is constrained to its 32x32 pixel shape, but it's actually getting "lifted" up by what looks like 1px above its own positioning so it's true size on the page would be something like:
{height: 33px; width: 32px}
Screenshot of the issue
This is a bit tricky for me to verbally explain so I've attached an image - its subtle, but it's driving me crazy!
How do I keep it from "lifting" above its own size and position?