导入WebGL框架(PlayCanvas)到React中
导入WebGL框架(PlayCanvas)到React中
提问于 2018-06-28 05:23:53
我目前正在尝试导入一个名为webGL的PlayCanvas引擎到React中。
由于PlayCanvas在JS上运行，代码将保留在我的index.html中；我很难理解它将如何与我的反应组件交互。
假设我有按钮组件。这个按钮将改变我在PlayCanvas中的3d模型的颜色。我会叫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>
回答 2
Stack Overflow用户
发布于 2020-03-13 09:43:31
将整个playCanvas引擎安装为npm模块。然后，在您的组件中，您可以从那里构建应用程序引擎。使用类似于npm install playcanvas的东西。然后你就可以构造出这样的结构
import * as React from 'react'
import pc from 'playcanvas'
class App extends React.Component {
constructor(props){
super(props)
this.canvas = undefined
this.renderer = null;
}
componentDidMount(){
this.canvas = this.refs.reactCanvas
this.canvas.width = this.canvas.offsetWidth
this.canvas.height = this.canvas.offsetHeight
this.renderModel()
}
componentWillUnmount(){
window.removeEventListener('resize', () => {
this.renderer.resizeCanvas();
});
}
renderModel = () => {
var app = new pc.Application(this.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);
app.on('update', function (deltaTime) {
cube.rotate(10 * deltaTime, 20 * deltaTime, 30 * deltaTime);
});
this.renderer = app
}
clickHandler = event => {
const { id } = event.target
const handlers = {
yourButtonId : () => { /** Do some stuff with playCanvas */}
}
handlers[id]();
}
render(){
return (
<div>
<canvas ref="reactCanvas" id='3d-drawing-canvas'>This browser doesn't support canvas</canvas>
<button onClick={clickHandler} id='yourButtonId' style={{position:'fixed', top: 0, left: 0}}/>
</div>
)
}
}Stack Overflow用户
发布于 2021-01-20 20:03:13
如果你觉得使用钩子和最新的PlayCanvas，它就在这里
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;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51075225
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号