Skip to content

Instantly share code, notes, and snippets.

@martinwairegi
Created Mar 9, 2022
Embed
What would you like to do?
import React from 'react';
import { usePlane } from 'use-cannon';
import { TextureLoader, RepeatWrapping, NearestFilter, LinearMipMapLinearFilter } from 'three';
import grass from '../images/grass.jpg';
import { useStore } from '../hooks/useStore';
export const Ground = (props) => {
const [ref] = usePlane(() => ({ rotation: [-Math.PI / 2, 0, 0], ...props }));
const texture = new TextureLoader().load(grass);
const [addCube, activeTexture] = useStore((state) => [
state.addCube,
state.texture,
]);
texture.magFilter = NearestFilter;
texture.minFilter = LinearMipMapLinearFilter;
texture.wrapS = RepeatWrapping;
texture.wrapT = RepeatWrapping;
texture.repeat.set(100, 100);
return (
<mesh
ref={ref}
receiveShadow
onClick={(e) => {
e.stopPropagation();
const [x, y, z] = Object.values(e.point).map((coord) =>
Math.ceil(coord),
);
addCube(x, y, z, activeTexture);
}}
>
<planeBufferGeometry attach="geometry" args={[100, 100]} />
<meshStandardMaterial map={texture} attach="material" />
</mesh>
);
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment