2

我目前正在尝试将称为 PlayCanvas 的 webGL 引擎导入 React。

PlayCanvas Github

由于 PlayCanvas 在 JS 上运行，代码将保留在我的 index.html 中；我无法理解它将如何与我的 React 组件交互。

假设我有一个按钮组件。这个按钮将改变我在 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>

4

2 回答 2

2

如果你觉得使用钩子和最新的 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;
于 2021-01-20T20:03:13.903 回答
2

将整个 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>
        )
    }
}
于 2020-03-13T09:43:31.867 回答