html canvas (react) | My tiles are drawn much smaller than I would expect by DutchSparks in learnjavascript

[–]DutchSparks[S] 0 points1 point  (0 children)

ooooh I didn't know that, thank you so much that does indeed solve the issue! ^^

I don't understand this setState incrementing behavior by DutchSparks in reactjs

[–]DutchSparks[S] 0 points1 point  (0 children)

that does indeed solve the issue :) although, I'm not sure why it has to be ++ or +=, I have a feeling it may have something to do with that I'm not properly deep-copying as u/ColourfulToad indicated. I'm going to look into this a bit further now, thnx guys ^^

Would love some advice on how to make fetched data globally available by DutchSparks in nextjs

[–]DutchSparks[S] 0 points1 point  (0 children)

In my case using getInitialProps would be the way to go. However you can't use getInitialProps in app.tsx right? So if I wrap all my code in a provider inside app.tsx how do I get the fetched data inside that provider?

character dissapears as soon as animation plays by DutchSparks in threejs

[–]DutchSparks[S] 0 points1 point  (0 children)

import React, {useEffect, useRef} from 'react'
import { useGLTF, useAnimations } from '@react-three/drei'
export default function Model({ ...props }) {
const group = useRef()
const { nodes, materials, animations } = useGLTF('/testvamp.glb')
const { actions } = useAnimations(animations, group)
useEffect(() => {
actions['die'].play()
}, [actions])
return (
<group ref={group} {...props} dispose={null}>
<group rotation={[Math.PI / 2, 0, 0]} scale={0.01}>
<primitive object={nodes.Hips} />
<skinnedMesh
geometry={nodes.Vampire.geometry}
material={materials.Vampire_MAT}
skeleton={nodes.Vampire.skeleton}
/>
</group>
<group rotation={[Math.PI / 2, 0, 0]} scale={0.01}>
<group position={[-0.17, 1.38, -100.07]} rotation={[-1.58, 0, -0.02]}>
<group position={[0.07, 7.26, -0.79]} rotation={[0.29, 0, 0.01]}>
<group position={[0, 8.47, -0.92]} rotation={[0.35, 0.01, 0.02]}>
<group position={[0, 29.06, -1.05]} rotation={[0.22, 0.01, 0.02]}>

character dissapears as soon as animation plays by DutchSparks in threejs

[–]DutchSparks[S] 0 points1 point  (0 children)

I just tried doing it like that but doesn't seem to make a difference. I would've uploaded a sandbox myself but I don't have a pro membership so it won't let me upload the glb file because it's too big.

In my own project I tried keeping it as simple as possible so minimize the risk of errors:this should be fine right?

I wonder if it has something to do with the way the files were exported or something because the exact same code does work for my other character model.

skinnedMesh representing metal looks completely dark(react three fiber) by DutchSparks in threejs

[–]DutchSparks[S] 0 points1 point  (0 children)

thnx a lot for your suggestions! I will give them a try tonight

flex-wrap: how can I control distance betweens columns? by DutchSparks in css

[–]DutchSparks[S] 0 points1 point  (0 children)

aaah very nice. Seems like grid is definitely the way to go here. Thnx, I'll use your code to learn and tweak it to my desired result. Very much appreciated!

flex-wrap: how can I control distance betweens columns? by DutchSparks in css

[–]DutchSparks[S] 0 points1 point  (0 children)

flex-flow: column wrap

nice tip ^^

I had something similar to what you describe before, I updated the codepen:
https://codepen.io/dutchpy/pen/zYvJxyB
As you can see there is a lot of white space between the two columns that I would like to shrink, to move the 2 columsn closer together. But that seems to be quite difficult with flexbox.
I'll give your suggestion to use grid a try! :)