В настоящее время я пытаюсь импортировать движок webGL, известный как PlayCanvas, в React.
PlayCanvas Github
Поскольку PlayCanvas работает на JS, а код останется в моем index.html; У меня проблемы с пониманием того, как он будет взаимодействовать с моими компонентами React.
Скажем, у меня есть компонент кнопки. Эта кнопка изменит цвет моей 3d модели в PlayCanvas. Я бы назвал eventHandler function.
Я также загружу свои активы в инфраструктуру PlayCanvas, которая будет выполнена в файле index.html. Например ...
Var vehicle = pc.loadAsset(“assets/123456/vehicle.json”)
Я не понимаю логику после этого.
Как бы я связал инфраструктуру PlayCanvas с моими компонентами React?
<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>