使用BabylonJS 的简略笔记

Light:

var light = new BABYLON. HemisphericLight( "light1", new BABYLON. Vector3( 0, 1, 0), scene);//环境光

var light1 = new BABYLON.DirectionalLight( 'light1', new BABYLON.Vector3( 0, 3, 0), scene);//太阳光 直射光

light. intensity = 1;//灯光强度

Camera:

var camera = new BABYLON.ArcRotateCamera("Camera", 2.9( alpha), 1.29( beta), 100( radius), BABYLON.Vector3.Zero()( target), scene);// 绕指定的目标进行旋转的第三人称观察型摄像机

camera. attachControl( canvas, true);//让 canvas使用相机

//限制相机放大缩小 最大及最小距离

camera. lowerRadiusLimit = 10;

camera. upperRadiusLimit = 150;

camera. minZ = 1.0; //限制相机穿进物体

camera. upperBetaLimit = Math.PI / 2;//限制初始旋转角度 旋转和物体平行则停止

camera. setPosition( cameranextpos)  //设置相机初始位置

camera.layerMask = 2; //设置相机层级显示

camerapos = BABYLON. Vector3. Lerp( camerapos, cameranextpos, smooth);//相机移动到下一个点的差值

camera. mode = BABYLON. Camera. ORTHOGRAPHIC_CAMERA;//相机模式改正交相机

camera. orthoTop = 20;

camera. orthoBottom = - 20;

camera. orthoLeft = - 30;

camera. orthoRight = 30;

Material:

var planTexture  = new BABYLON. Texture( "./static/textures/qinru/chuanglian.png", scene);

var materialPlane  = new BABYLON. StandardMaterial( "texturePlane", scene);

materialPlane. diffuseTexture = materialPlane;//普通贴图

materialPlane.diffuseTexture.hasAlpha = true;//透明贴图显示透明效果

materialPlane. specularColor = new BABYLON. Color3( 0, 0, 0);//高光贴图

materialPlane. backFaceCulling = false;//面片背面也渲染

//支持带有渐变的透明贴图效果

materialPlane. opacityTexture = materialPlane;

materialPlane. needDepthPrePass = true;

//逐帧动画

var count = 0;

var textureArry=[];

for( var i= 0; i<= 420; i++){

  textureArry[ i]= new BABYLON. Texture( "static/textures/gaoqing_xulie/Vulcano_" + i + ".png");

}

function aniamtionOneByOne() {

  SET= setTimeout(()=>{

    if( count > 420 ) {

      clearTimeout( SET);

      count = 420;

      mesh_pf. material. diffuseTexture = textureArry[ count];

      isPlay = false;

      haveTransition = false;

      return;

    }

    mesh_pf. material. diffuseTexture = textureArry[ count];

    count++;

    aniamtionOneByOne();

  }, 30);

}

clearTimeout( SET);//清除

//帧动画

function  modelShowAnimation(mesh) {

  var animation = new BABYLON. Animation( "myAnimation", "material.alpha", 30, BABYLON. Animation. ANIMATIONTYPE_FLOAT, BABYLON. Animation. ANIMATIONLOOPMODE_CYCLE);

  var keys = [];

  keys. push({

    frame: 0,

    value: 0

  });

  keys. push({

    frame: 100,

    value: 1

  });

  animation. setKeys( keys);

  mesh. animations = [];

  mesh. animations. push( animation);

  pf_animation = scene. beginAnimation(mesh, 0, 100, false, 4,()=>{

    aniamtionOneByOne();

  });

}

GUI:

var advancedTexture = BABYLON. GUI. AdvancedDynamicTexture. CreateFullscreenUI( "ui1");

function createLabel(mesh,name,texture) {

    var label = new BABYLON. GUI. Rectangle( "label for " + mesh. name);

    label. background = "#363636";

    label. height = "30px";

    label. alpha = 0.8;

    label. width = "30px";

    label. cornerRadius = 5;

    label. thickness = 2;

    advancedTexture. addControl( label);

    label. linkWithMesh(mesh);

    var text1 = new BABYLON. GUI. TextBlock();

    text1. text = name;

    text1. color = "white";

    text1. fontSize= "15";

    label. addControl( text1);

    return label;

}

//加载模型          this. strData2->babylon格式模型json数据

BABYLON. SceneLoader. ImportMesh( "", "", "data:" + this. strData2, scene, function (newMeshes, particleSystems, skeletons) {

  for ( var i = 0; i < newMeshes. length; i++) {

    newMeshes[ i]. isVisible = true;

    if (!newMeshes[ i]. rotationQuaternion) {

      newMeshes[ i]. rotationQuaternion = BABYLON. Quaternion. RotationYawPitchRoll(newMeshes[ i]. rotation. y, newMeshes[ i]. rotation. x, newMeshes[ i]. rotation. z);

      newMeshes[ i]. rotation = BABYLON. Vector3. Zero();

      newMeshes[ i]. scaling = new BABYLON. Vector3( 1, 1, 1);

      newMeshes[ i]. position = BABYLON. Vector3. Zero();

      newMeshes[ i]. material = materialPlane1;//指定材质

    }

  }

});