Question

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

由于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>

Answer 1

将整个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>
        )
    }
}

Answer 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;

将WebGL框架（PlayCanvas）导入React

2 个答案: