如何在Reactjs应用程序中使用JS？

我试过在react中导入JS，但它不起作用。有人知道如何在reactjs应用程序中导入和使用babylonjs吗

---

谢谢。

我不确定你是否自己找到了答案，但是随着巴比伦的成熟，现在有几种方法。实际上，这里有一个节点包，可用于将babylon.js与react一起使用：

文档中还有一个关于Babylon.js中React的安装指南：

---

希望有帮助

Babylon JS以npm包装提供。您可以围绕

canvas

和Babylon JS轻松构建一个简单的

React

组件

我用React+Babylon创建了一个最小的示例：

/* Babylon JS is available as **npm** package.  
You can easily build a simple `React` Component around a `canvas` and Babylon JS
I have created a minimal example with React+ Babylon:
 */
import React, { Component } from "react";
import * as BABYLON from "babylonjs";

var scene;
var boxMesh;
/**
 * Example temnplate of using Babylon JS with React
 */
class BabylonScene extends Component {
  constructor(props) {
    super(props);
    this.state = { useWireFrame: false, shouldAnimate: false };
  }

  componentDidMount = () => {
    // start ENGINE
    this.engine = new BABYLON.Engine(this.canvas, true);

    //Create Scene
    scene = new BABYLON.Scene(this.engine);

    //--Light---
    this.addLight();

    //--Camera---
    this.addCamera();

    //--Meshes---
    this.addModels();

    //--Ground---
    this.addGround();

    // Add Events
    window.addEventListener("resize", this.onWindowResize, false);

    // Render Loop
    this.engine.runRenderLoop(() => {
      scene.render();
    });

    //Animation
    scene.registerBeforeRender(() => {
      boxMesh.rotation.y += 0.01;
      boxMesh.rotation.x += 0.01;
    });
  };

  componentWillUnmount() {
    window.removeEventListener("resize", this.onWindowResize, false);
  }

  onWindowResize = event => {
    this.engine.resize();
  };

  /**
   * Add Lights
   */
  addLight = () => {
    //---------- LIGHT---------------------
    // Create a basic light, aiming 0,1,0 - meaning, to the sky.
    var light = new BABYLON.HemisphericLight(
      "light1",
      new BABYLON.Vector3(0, 10, 0),
      scene
    );
  };

  /**
   * Add Camera
   */
  addCamera = () => {
    // ---------------ArcRotateCamera or Orbit Control----------
    var camera = new BABYLON.ArcRotateCamera(
      "Camera",
      Math.PI / 2,
      Math.PI / 4,
      4,
      BABYLON.Vector3.Zero(),
      scene
    );
    camera.inertia = 0;
    camera.angularSensibilityX = 250;
    camera.angularSensibilityY = 250;

    // This attaches the camera to the canvas
    camera.attachControl(this.canvas, true);
    camera.setPosition(new BABYLON.Vector3(5, 5, 5));
  };

  /**
   * Create Stage and Skybox
   */
  addGround = () => {
    // Create a built-in "ground" shape.
    var ground = BABYLON.MeshBuilder.CreateGround(
      "ground1",
      { height: 6, width: 6, subdivisions: 2 },
      scene
    );
    var groundMaterial = new BABYLON.StandardMaterial("grass0", scene);
    groundMaterial.diffuseTexture = new BABYLON.Texture(
      "./assets/ground.jpeg",
      scene
    );
    ground.material = groundMaterial;

    //Add SkyBox
    var photoSphere = BABYLON.Mesh.CreateSphere("skyBox", 16.0, 50.0, scene);
    var skyboxMaterial = new BABYLON.StandardMaterial("smat", scene);
    skyboxMaterial.emissiveTexture = new BABYLON.Texture(
      "assets/skybox.jpeg",
      scene,
      1,
      0
    );
    skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
    skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
    skyboxMaterial.emissiveTexture.uOffset = -Math.PI / 2; // left-right
    skyboxMaterial.emissiveTexture.uOffset = 0.1; // up-down
    skyboxMaterial.backFaceCulling = false;
    photoSphere.material = skyboxMaterial;
  };

  /**
   * Add Models
   */
  addModels = () => {
    // Add BOX
    boxMesh = BABYLON.MeshBuilder.CreateBox(
      "box",
      { height: 1, width: 1, depth: 1 },
      scene
    );
    boxMesh.position.y = 1;

    var woodMaterial = new BABYLON.StandardMaterial("wood", scene);
    woodMaterial.diffuseTexture = new BABYLON.Texture(
      "./assets/portal_cube.png",
      scene
    );
    boxMesh.material = woodMaterial;
  };

  render() {
    return (
      <canvas
        style={{ width: window.innerWidth, height: window.innerHeight }}
        ref={canvas => {
          this.canvas = canvas;
        }}
      />
    );
  }
}
export default BabylonScene;

/*巴比伦JS以**npm**软件包的形式提供。
您可以围绕“canvas”和Babylon JS轻松构建一个简单的“React”组件
我用React+Babylon创建了一个最小的示例：
*/
从“React”导入React，{Component}；
从“巴比伦JS”导入*作为巴比伦；
var场景；
var-boxMesh；
/**
*使用Babylon JS和React的示例模板
*/
类扩展组件{
建造师（道具）{
超级（道具）；
this.state={useWireFrame:false，shouldAnimate:false}；
}
componentDidMount=（）=>{
//起动发动机
this.engine=new巴比伦.engine（this.canvas，true）；
//创建场景
场景=新巴比伦。场景（这个。引擎）；
//--轻的---
这是addLight（）；
//--摄像机---
这个.addCamera（）；
//--网格---
这个.addModels（）；
//--地面---
这是addGround（）；
//添加事件
addEventListener（“resize”，this.onWindowResize，false）；
//渲染循环
this.engine.runRenderLoop（（）=>{
scene.render（）；
});
//动画
scene.registerBeforeRender（（）=>{
boxMesh.rotation.y+=0.01；
boxMesh.rotation.x+=0.01；
});
};
组件将卸载（）{
removeEventListener（“resize”，this.onWindowResize，false）；
}
onWindowResize=事件=>{
this.engine.resize（）；
};
/**
*加灯
*/
addLight=（）=>{
//----------轻的---------------------
//创建一个基本灯光，瞄准天空，0,1,0-意思是。
var light=新巴比伦。半球光(
“light1”，
新巴比伦。矢量3（0，10，0），
场景
);
};
/**
*添加摄像头
*/
addCamera=（）=>{
//------ARCROTEATECAMERA或轨道控制----------
var摄像机=新巴比伦(
“摄像机”，
Math.PI/2，
Math.PI/4，
4.
巴比伦。向量3。零（），
场景
);
相机惯性=0；
camera.angularSensibilityX=250；
camera.Angularsensibility Y=250；
//这会将相机附加到画布上
camera.attachControl（this.canvas，true）；
摄像机。设置位置（新巴比伦。矢量3（5，5，5））；
};
/**
*创建舞台和天空盒
*/
addGround=（）=>{
//创建一个内置的“地面”形状。
var ground=BABYLON.MeshBuilder.CreateGround(
“第1场”，
{高度：6，宽度：6，细分：2}，
场景
);
var groundMaterial=新巴比伦。标准材质（“grass0”，场景）；
groundMaterial.diffuseTexture=新巴比伦纹理(
“/assets/ground.jpeg”，
场景
);
地面材料=地面材料；
//添加SkyBox
var photoSphere=BABYLON.Mesh.CreateSphere（“天空盒”，16.0,50.0，场景）；
var skyboxMaterial=新巴比伦。标准材质（“smat”，场景）；
skyboxMaterial.emissiveTexture=新巴比伦纹理(
“assets/skybox.jpeg”，
场景
1.
0
);
skyboxMaterial.diffuseColor=new BABYLON.Color3（0,0,0）；
skyboxMaterial.specularColor=新巴比伦。颜色3（0,0,0）；
skyboxMaterial.emissiveTexture.uOffset=-Math.PI/2；//左-右
skyboxMaterial.emissiveTexture.uOffset=0.1；//上下
skyboxMaterial.backFaceCulling=false；
photoSphere.material=skyboxMaterial；
};
/**
*添加模型
*/
addModels=（）=>{
//添加框
boxMesh=BABYLON.MeshBuilder.CreateBox(
“盒子”，
{高度：1，宽度：1，深度：1}，
场景
);
boxMesh.position.y=1；
var woodMaterial=新巴比伦。标准材质（“木材”，场景）；
woodMaterial.diffuseTexture=新巴比伦.纹理(
“/assets/portal_cube.png”，
场景
);
boxMesh.material=木质材料；
};
render（）{
返回(
{
this.canvas=画布；
}}
/>
);
}
}
导出默认场景；

现场演示：

---

我认为巴比伦与真正的多姆一起工作。与react不同，react是虚拟的DOMHi，我安装了npm，使其能够工作。非常感谢。