Menu
I am currently trying to import a webGL engine known as PlayCanvas into React.
PlayCanvas Github
Since PlayCanvas runs on JS and the code will stay in my index.html; I am having trouble understanding how it will interact with my React components.
Say I have a button component. This button will change the color of my 3d model in PlayCanvas. I would call a eventHandler function.
I will also load my assets into the PlayCanvas framework, which will be executed in the index.html file. For example...
Var vehicle = pc.loadAsset(“assets/123456/vehicle.json”)
I don't get the logic after that.
How would I link the PlayCanvas framework with my React components?
<html>
<head>
<meta charset="utf-8">
<title>PlayCanvas Hello Cube</title>
<meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no' />
<style>
body {
margin: 0;
overflow: hidden;
}
</style>
<script src='https://code.playcanvas.com/playcanvas-stable.min.js'></script>
</head>
<body>
<canvas id='application'></canvas>
<script>
// create a PlayCanvas application
var canvas = document.getElementById('application');
var app = new pc.Application(canvas, { });
app.start();
// fill the available space at full resolution
app.setCanvasFillMode(pc.FILLMODE_FILL_WINDOW);
app.setCanvasResolution(pc.RESOLUTION_AUTO);
// ensure canvas is resized when window changes size
window.addEventListener('resize', function() {
app.resizeCanvas();
});
// create box entity
var cube = new pc.Entity('cube');
cube.addComponent('model', {
type: 'box'
});
// create camera entity
var camera = new pc.Entity('camera');
camera.addComponent('camera', {
clearColor: new pc.Color(0.1, 0.1, 0.1)
});
// create directional light entity
var light = new pc.Entity('light');
light.addComponent('light');
// add to hierarchy
app.root.addChild(cube);
app.root.addChild(camera);
app.root.addChild(light);
// set up initial positions and orientations
camera.setPosition(0, 0, 3);
light.setEulerAngles(45, 0, 0);
// register a global update event
app.on('update', function (deltaTime) {
cube.rotate(10 * deltaTime, 20 * deltaTime, 30 * deltaTime);
});
</script>
</body>
519
asked Aug 06 '26 21:08
If you feel using hooks and latest PlayCanvas, there it is
import React, {useLayoutEffect, useRef} from 'react';
import * as pc from 'playcanvas';
const Playcanvas = () => {
const canvasRef = useRef(null);
const appRef = useRef(null);
useLayoutEffect(() => {
const app = new pc.Application(canvasRef.current, {});
app.start();
app.setCanvasFillMode(pc.FILLMODE_FILL_WINDOW);
app.setCanvasResolution(pc.RESOLUTION_AUTO);
window.addEventListener('resize', function () {
app.resizeCanvas();
});
const cube = new pc.Entity('cube');
cube.addComponent('model', {
type: 'box',
});
const camera = new pc.Entity('camera');
camera.addComponent('camera', {
clearColor: new pc.Color(0.1, 0.1, 0.1),
});
const light = new pc.Entity('light');
light.addComponent('light');
app.root.addChild(cube);
app.root.addChild(camera);
app.root.addChild(light);
camera.setPosition(0, 0, 3);
light.setEulerAngles(45, 0, 0);
app.on('update', (deltaTime) => {
cube.rotate(10 * deltaTime, 20 * deltaTime, 30 * deltaTime);
});
appRef.current = app;
}, []);
return (
<div>
<canvas ref={canvasRef} />
</div>
);
};
export default Playcanvas;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With