@brianzinn hope you enjoyed Vancouver!
@Drigax
I just made some changes in my code and wanted to share! I would love some feedbacks on it.
Thanks!!
App.js
import React from "react";
import { FreeCamera, Vector3, HemisphericLight, MeshBuilder } from "@babylonjs/core";
import SceneComponent from "./SceneComponent"; // uses above component in same directory
function App() {
return (
<div className="App">
<SceneComponent id="my-canvas" />
<img height={100} width={100} src="https://www.hackingwithswift.com/uploads/matrix.jpg" />
<img height={100} width={100} src="http://www.gregorybufithis.com/wp-content/uploads/2016/05/random-numbers.jpg" />
<img height={100} width={100} src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/36/Two_red_dice_01.svg/1200px-Two_red_dice_01.svg.png" />
</div>
);
}
export default App;
SceneComponent.jsx
import {
Engine,
FreeCamera,
HemisphericLight, MeshBuilder,
Scene,
Vector3,
Color3,
StandardMaterial, Texture
} from '@babylonjs/core'
import React, { useEffect, useRef, useState } from 'react'
let box;
let myTexture;
let imageTexture;
const onSceneReady = (scene) => {
// This creates and positions a free camera (non-mesh)
var camera = new FreeCamera("camera1", new Vector3(0, 5, -10), scene);
// This targets the camera to scene origin
camera.setTarget(Vector3.Zero());
const canvas = scene.getEngine().getRenderingCanvas();
// This attaches the camera to the canvas
camera.attachControl(canvas, true);
// This creates a light, aiming 0,1,0 - to the sky (non-mesh)
var light = new HemisphericLight("light", new Vector3(0, 1, 0), scene);
// Default intensity is 1. Let's dim the light a small amount
light.intensity = 0.7;
// Our built-in 'box' shape.
box = MeshBuilder.CreateBox("box", { size: 2 }, scene);
myTexture = new StandardMaterial("texture", scene);
myTexture.diffuseColor = new Color3(0,0,0);
imageTexture = new StandardMaterial("imageTexture", scene);
box.material = myTexture;
// Move the box upward 1/2 its height
box.position.y = 1;
// Our built-in 'ground' shape.
MeshBuilder.CreateGround("ground", { width: 6, height: 6 }, scene);
};
/**
* Will run on every frame render. We are spinning the box on y-axis.
*/
const onRender = (scene) => {
if (box !== undefined) {
var deltaTimeInMillis = scene.getEngine().getDeltaTime();
const rpm = 10;
box.rotation.y += (rpm / 60) * Math.PI * 2 * (deltaTimeInMillis / 1000);
}
};
const SceneComponent = () => {
const reactCanvas = useRef(null);
const [scene, setScene] = useState(null);
const [imgSrc, setImgsrc] = useState("");
const changeColor = (targetMaterial, targetTexture, keyNum) => {
if (keyNum == "37") {
targetTexture.diffuseColor = new Color3(1,1,1);
targetMaterial.material = targetTexture;
}
else {
targetTexture.diffuseColor = new Color3(0,0,0);
targetMaterial.material = targetTexture;
}
}
const changeImage = (targetMaterial, targetTexture, src, scene) => {
targetTexture.diffuseTexture = new Texture(src, scene);
targetMaterial.material = targetTexture;
}
useEffect(() => {
if (reactCanvas.current) {
const engine = new Engine(reactCanvas.current);
const scene = new Scene(engine);
if (scene.isReady()) {
onSceneReady(scene);
} else {
scene.onReadyObservable.addOnce((scene) => onSceneReady(scene));
}
engine.runRenderLoop(() => {
if (typeof onRender === "function") {
onRender(scene);
}
scene.render();
});
const resize = () => {
scene.getEngine().resize();
};
setScene(scene);
if (window) {
window.addEventListener("resize", resize);
}
window.addEventListener("keydown", (e) => {
if (e.keyCode == "37") {
changeColor(box, myTexture, e.keyCode);
}
else if (e.keyCode == "39") {
changeColor(box, myTexture, e.keyCode);
}
})
window.addEventListener("pointerdown", (e) => {
console.log(e.target.src);
setImgsrc(e.target.src);
})
return () => {
scene.getEngine().dispose();
if (window) {
window.removeEventListener("resize", resize);
}
};
}
}, [reactCanvas]);
useEffect(() => {
changeImage(box, imageTexture, imgSrc, scene)
console.log(imgSrc)
}, [imgSrc])
return <canvas width={600} height={600} ref={reactCanvas} />;
};
export default SceneComponent;
Have a wonderful day, guys!
Thanks always!
) got any clarification?
. More info here: