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.