I would like to create a React component where I can pass the parent through parameter, as an example.
import {
Color4,
Matrix,
Mesh,
MultiMaterial,
StandardMaterial,
SubMesh,
Vector3
} from "@babylonjs/core";
import { useRef, useEffect } from "react";
import imagem from "./core/assets/images/Toronto_490x360.jpg";
const COMPRIEMTO = 2.75;
const LARGURA = 1.83;
const ESPESSURA = 0.015;
/* var widthAux = 0;
var heightAux = 0;
var depthAux = 0; */
type Props = {
largura: number;
comprimento: number;
espessura: number;
posX?: number;
posY?: number;
posZ?: number;
rotX?: number;
rotY?: number;
rotZ?: number;
pai?: Mesh;
};
// adapted from https://playground.babylonjs.com/#T40FK
const Chapa = ({ largura, comprimento, espessura, posX, posY, posZ, rotX=1, rotY=1, rotZ=1, pai }: Props) => {
const material0 = useRef<StandardMaterial | null>(null);
//const material1 = useRef<StandardMaterial | null>(null);
const material2 = useRef<StandardMaterial | null>(null);
const material3 = useRef<StandardMaterial | null>(null);
const material4 = useRef<StandardMaterial | null>(null);
const material5 = useRef<StandardMaterial | null>(null);
const box = useRef<Mesh | null>(null);
const multi = useRef<MultiMaterial | null>(null);
const alterararCriacao = (box: Mesh) => {
//Movendo o pivot para o canto
const vectorsBox = box.getBoundingInfo().boundingBox.vectorsWorld;
box.setPivotMatrix(Matrix.Translation(Number(vectorsBox[1].x - (vectorsBox[0].x)) / 2,
Number(vectorsBox[1].y - (vectorsBox[0].y)) / 2,
-Number(vectorsBox[1].z - (vectorsBox[0].z)) / 2), false);
//Rederiza arestas
box.enableEdgesRendering();
}
useEffect(() => {
if (multi.current === null || box.current === null) {
return;
}
multi.current!.subMaterials.push(material0.current);
multi.current!.subMaterials.push(material0.current);
multi.current!.subMaterials.push(material2.current);
multi.current!.subMaterials.push(material3.current);
multi.current!.subMaterials.push(material4.current);
multi.current!.subMaterials.push(material5.current);
//apply material
box.current!.subMeshes = [];
var verticesCount = box.current!.getTotalVertices();
box.current!.subMeshes.push(
new SubMesh(0, 0, verticesCount, 0, 6, box.current!)
);
box.current!.subMeshes.push(
new SubMesh(1, 1, verticesCount, 6, 6, box.current!)
);
box.current!.subMeshes.push(
new SubMesh(2, 2, verticesCount, 12, 6, box.current!)
);
box.current!.subMeshes.push(
new SubMesh(3, 3, verticesCount, 18, 6, box.current!)
);
box.current!.subMeshes.push(
new SubMesh(4, 4, verticesCount, 24, 6, box.current!)
);
box.current!.subMeshes.push(
new SubMesh(5, 5, verticesCount, 30, 6, box.current!)
);
// already one box.material=multi;
}, [box, multi]);
return (
<>
<standardMaterial name="material0" ref={material0}>
<texture url={imagem} assignTo="diffuseTexture" hasAlpha={true} uScale={largura / LARGURA} vScale={comprimento / COMPRIEMTO} />
</standardMaterial>
{/* <standardMaterial
name="material1"
ref={material0}
diffuseColor={new Color3(0, 0, 0.75)}
/> */}
<standardMaterial name="material2" ref={material2}>
<texture url={imagem} assignTo="diffuseTexture" hasAlpha={true} uScale={espessura / LARGURA} vScale={comprimento / COMPRIEMTO} />
</standardMaterial>
<standardMaterial name="material3" ref={material3}>
<texture url={imagem} assignTo="diffuseTexture" hasAlpha={true} uScale={espessura / LARGURA} vScale={comprimento / COMPRIEMTO} />
</standardMaterial>
<standardMaterial name="material4" ref={material4}>
<texture url={imagem} assignTo="diffuseTexture" hasAlpha={true} uScale={espessura / LARGURA} vScale={largura / COMPRIEMTO} />
</standardMaterial>
<standardMaterial name="material5" ref={material5}>
<texture url={imagem} assignTo="diffuseTexture" hasAlpha={true} uScale={espessura / LARGURA} vScale={largura / COMPRIEMTO} />
</standardMaterial>
<box
name="caixa" ref={box} width={LARGURA} height={COMPRIEMTO} depth={ESPESSURA}
scaling={new Vector3(largura / LARGURA, comprimento / COMPRIEMTO, espessura / ESPESSURA)}
position={new Vector3(posX, posY, posZ)}
rotation={new Vector3(Math.PI / rotX, Math.PI / rotY, Math.PI / rotZ)}
wrap={true} topBaseAt={2} bottomBaseAt={3} edgesWidth={0.3} edgesColor={new Color4(0, 0, 0, 1)}
onCreated={box => alterararCriacao(box)} parent={pai}
>
<multiMaterial name="multiMat" ref={multi} />
</box>
</>
);
};
export default Chapa;
This is the component that I want to pass the father on the parameter.
import { Mesh, Matrix, Vector3, Color4 } from "@babylonjs/core";
import { useEffect, useRef } from "react";
import Chapa from "./Chapa";
const LARGURA = 0.8;
const ALTURA = 1.5;
const PROFUNDIDADE = 0.30;
type Props = {
largura: number;
altura: number;
profundidade: number;
posX?: number;
posY?: number;
posZ?: number;
}
const Corpo = ({ largura, altura, profundidade, posX = 0, posY = 0, posZ = 0 }: Props) => {
const box = useRef<Mesh>();
const alterararCriacao = (box: Mesh) => {
//Movendo o pivot para o canto
const vectorsBox = box.getBoundingInfo().boundingBox.vectorsWorld;
box.setPivotMatrix(Matrix.Translation(Number(vectorsBox[1].x - (vectorsBox[0].x)) / 2,
Number(vectorsBox[1].y - (vectorsBox[0].y)) / 2,
-Number(vectorsBox[1].z - (vectorsBox[0].z)) / 2), false);
//Rederiza arestas
box.enableEdgesRendering();
}
useEffect(() => {
if (box.current === null) {
return;
}
}, [box]);
return (
<>
<box
name="caixa" ref={box} width={LARGURA} height={ALTURA} depth={PROFUNDIDADE}
scaling={new Vector3(largura / LARGURA, altura / ALTURA, profundidade / PROFUNDIDADE)}
position={new Vector3(posX, posY, posZ)} edgesWidth={0.3} edgesColor={new Color4(0, 0, 0, 1)}
rotation={new Vector3(0, 0, 0)}
onCreated={box => alterararCriacao(box)} visibility={0.1} isVisible={true}
>
</box>
<Chapa largura={profundidade} comprimento={altura} espessura={0.015} posX={0} posY={0} posZ={0} rotY={-2} pai={box.current} />{/* Lateral esq */}
</>
);
};
export default Corpo;
This is the component that receives the child, he has a box that will be passed as a father in the parameter of the son “Chapa”.
@brianzinn realized that you are the owner of this piece, so I am marking you.
Thanks again.
