This article has participated in the activity of “New person creation Ceremony”, and started the road of digging gold creation together.

preface

Recently, an online editor was developed using Babylon. Js, which required the use of the View assistant. Check online, there are many demos of Three.js, but there is no view helper using Babylon, so create one yourself. The effect is the same as the View assistant in threeJs online editor.

Implement Demo based on BabylonJs official Playground

Train of thought

For Babylon, THERE are two main ideas I’ve learned that can be implemented:

  • Multi-scene, create a separate Scene for storing assistant, render 2 scenes together when rendering
  • Multiple canvas, a layer of canvas on top of the main canvas, for rendering objects that don’t change much

So let’s choose the first one, which is a little bit easier to implement

Multi-scene rendering implementation

  1. Start by creating a new Playground and generating the initial code
var createScene = function () { // This creates a basic Babylon Scene object (non-mesh) var scene = new BABYLON.Scene(engine); // This creates and positions a free camera (non-mesh) var camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene); // This targets the camera to scene origin camera.setTarget(BABYLON.Vector3.Zero()); // This attaches the camera to the canvas camera.attachControl(canvas, true); Back to the sky (non-mesh) var light = New BABYLON. Grey-back light (" Light ", Grey-back light) new BABYLON.Vector3(0, 1, 0), scene); Let's dim the light a small amount light. Intensity = 0.7; // Our built-in 'sphere' shape. var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter: 2, segments: 32}, scene); // Move the sphere upward 1/2 its height sphere.position.y = 1; // Our built-in 'ground' shape. var ground = BABYLON.MeshBuilder.CreateGround("ground", {width: 6, height: 6}, scene); return scene; };Copy the code

On this basis, to achieve a multi scene rendering code.

Initialize auxiliary scenes

Achieve specific results

// Note that 1. AutoClear for auxiliary scenes needs to be turned off 2. SetTimeout (function() {engine.stoprenderloop (); engine.runRenderLoop(function () { scene.render(); sceneHelper.render(); }); }, 500); 3. The camera viewport setting of auxiliary scene to the upper right corner sceneHelper. ActiveCamera. The viewport = new BABYLON. The viewport (0.8, 0.8, 0.2, 0.2); 4. Also, change the camera to arcrota TameraCopy the code

The secondary scene synchronizes with the main scene camera

When the main scene is updated, the data of the main camera is passed to the auxiliary camera to achieve the effect

scene.onAfterRenderObservable.add(()=>{
     const activeCamera =sceneHelper.activeCamera;
     activeCamera.alpha = camera.alpha;
    activeCamera.beta = camera.beta;
})
Copy the code

Implement helper entities

With a cylinder as the axis, the XYZ tag always needs to face the user, so use Babylon.GUI as the tag entity for the X-axis example

const labelRoot = new BABYLON.TransformNode( `x-root`, sceneHelper ); const advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI( "UI", true, sceneHelper ); const height = 1; const Red = "#ff3653"; const Green = "#8adb00"; const Blue = "#2c8fff"; const axesLabel = new BABYLON.GUI.Ellipse(); axesLabel.isPointerBlocker = true; axesLabel.width = "120px"; axesLabel.height = "120px"; axesLabel.thickness = 4; axesLabel.color = Red; axesLabel.background = Red; const label = new BABYLON.GUI.TextBlock("x", "X"); label.fontSize = 70; label.fontWeight = "400"; label.color = "#000000"; axesLabel.addControl(label); advancedTexture.addControl(axesLabel); axesLabel.linkWithMesh(labelRoot); Const option = {diameter: 0.05, height, tessellation: 96}; //x-line const xl = BABYLON.CylinderBuilder.CreateCylinder("x-line", option, sceneHelper); xl.position.x += -height / 2; xl.rotation.z = -Math.PI / 2; const xMlt = new BABYLON.StandardMaterial("", sceneHelper); xMlt.diffuseColor = BABYLON.Color3.FromHexString(Red); xl.material = xMlt; const activeCamera = sceneHelper.activeCamera; axesLabel.onPointerClickObservable.add((info) => { activeCamera.restoreState(); camera.setPosition(new BABYLON.Vector3(5)); activeCamera.setPosition(new BABYLON.Vector3(5)); });Copy the code

Implementation effect

conclusion

This article only implements part X of the View Assistant; the rest of you can implement it yourself if you are interested. The next article is expected to implement local model upload to generate screenshots to save to the back end