babylon first test

For comparison of the web end 3D technology and WebGL development status and prospects WebGPU, I feel the need to look babylon.js covered up.

Can refer to the following articles:

1⃣️ next generation web end graphics Situation and Prospects Interface: https://zhuanlan.zhihu.com/p/59691803

Today on the first test react inside at the official demo:

demo the core code is as follows:

import {MiddleComponent,React} from '../../../utils/MiddleComponent'
import * as BABYLON from 'babylonjs';


export class babylon1 extends MiddleComponent {
    constructor(props){

　　　　super(props);

    }
    
  render() {
    return (
      <canvas id="renderCanvas" style={{width:'100%',height:'100%',position:'relative'}}></canvas>
    );
  }

  componentDidMount() {
    this.init();
  }
  
  init = ()=> {
    // Get the canvas DOM element
    var canvas = document.getElementById('renderCanvas');
    // Load the 3D engine
    var engine = new BABYLON.Engine(canvas, true, {preserveDrawingBuffer: true, stencil: true});
    // Create a basic BJS Scene object
    var scene = new BABYLON.Scene(engine);
    // Create a FreeCamera, and set its position to {x: 0, y: 5, z: -10}
    var camera = new BABYLON.ArcRotateCamera("Camera", 1,1,12, BABYLON.Vector3.Zero(), scene);
    // Target the camera to scene origin
    camera.setTarget(BABYLON.Vector3.Zero());
    // Attach the camera to the canvas
    camera.attachControl(canvas, false);
    // Create a basic light, aiming 0, 1, 0 - meaning, to the sky
    var light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0, 1, 0), scene);
    // Create a built-in "sphere" shape; its constructor takes 6 params: name, segment, diameter, scene, updatable, sideOrientation
    var sphere = BABYLON.Mesh.CreateSphere('sphere1', 16, 2, scene, false, BABYLON.Mesh.FRONTSIDE);
    // Move the sphere upward 1/2 of its height
    sphere.position.y = 1;
    // Create a built-in "ground" shape; its constructor takes 6 params : name, width, height, subdivision, scene, updatable
    var ground = BABYLON.Mesh.CreateGround('ground1', 6, 6, 2, scene, false);
    // run the render loop
    engine.runRenderLoop(function(){
        scene.render();
    });
    // the canvas/window resize event handler
    window.addEventListener('resize', function(){
        engine.resize();
    });
  }
}

  

If you come into contact with three.js if, in fact, the above code has little to explain the place, and you will find babylon.js and three.js there are some differences.

If there is no contact three.js or other webgl library or engine, it would first learn about webgl knowledge of it.

note:

MiddleComponent my own package of components, you can choose to inherit from Component react in your program.