babylonjs 设置面板位置_hanyeah

代码function showWorldAxis(size) {

var makeTextPlane = function(text, color, size) {

var dynamicTexture = new BABYLON.DynamicTexture("DynamicTexture", 50, scene, true);

dynamicTexture.hasAlpha = true;

dynamicTexture.drawText(text, 5, 40, "bold 36px Arial", color , "transparent", true);

var plane = BABYLON.Mesh.CreatePlane("TextPlane", size, scene, true);

plane.material = new BABYLON.StandardMaterial("TextPlaneMaterial", scene);

plane.material.backFaceCulling = false;

plane.material.specularColor = new BABYLON.Color3(0, 0, 0);

plane.material.diffuseTexture = dynamicTexture;

return plane;

};

var axisX = BABYLON.Mesh.CreateLines("axisX", [

BABYLON.Vector3.Zero(), new BABYLON.Vector3(size, 0, 0), new BABYLON.Vector3(size * 0.95, 0.05 * size, 0),

new BABYLON.Vector3(size, 0, 0), new BABYLON.Vector3(size * 0.95, -0.05 * size, 0)

], scene);

axisX.color = new BABYLON.Color3(1, 0, 0);

var xChar = makeTextPlane("X", "red", size / 10);

xChar.position = new BABYLON.Vector3(0.9 * size, -0.05 * size, 0);

var axisY = BABYLON.Mesh.CreateLines("axisY", [

BABYLON.Vector3.Zero(), new BABYLON.Vector3(0, size, 0), new BABYLON.Vector3( -0.05 * size, size * 0.95, 0),

new BABYLON.Vector3(0, size, 0), new BABYLON.Vector3( 0.05 * size, size * 0.95, 0)

], scene);

axisY.color = new BABYLON.Color3(0, 1, 0);

var yChar = makeTextPlane("Y", "green", size / 10);

yChar.position = new BABYLON.Vector3(0, 0.9 * size, -0.05 * size);

var axisZ = BABYLON.Mesh.CreateLines("axisZ", [

BABYLON.Vector3.Zero(), new BABYLON.Vector3(0, 0, size), new BABYLON.Vector3( 0 , -0.05 * size, size * 0.95),

new BABYLON.Vector3(0, 0, size), new BABYLON.Vector3( 0, 0.05 * size, size * 0.95)

], scene);

axisZ.color = new BABYLON.Color3(0, 0, 1);

var zChar = makeTextPlane("Z", "blue", size / 10);

zChar.position = new BABYLON.Vector3(0, 0.05 * size, 0.9 * size);

};

自己实现，去掉了文字，靠颜色区分就够了，文字很多时候看不见。import Mesh = BABYLON.Mesh;

import Vector3 = BABYLON.Vector3;

import Scene = BABYLON.Scene;

import Color3 = BABYLON.Color3;

import LinesMesh = BABYLON.LinesMesh;

export class HAxis {

private axisX: Mesh;

private axisY: Mesh;

private axisZ: Mesh;

constructor(scene: Scene, size: number) {

// https://doc.babylonjs.com/snippets/world_axes

this.axisX = this.makeAxis(scene, "axisX", size, new Color3(1, 0, 0));

this.axisY = this.makeAxis(scene, "axisY", size, new Color3(0, 1, 0));

this.axisY.rotation.z = Math.PI / 2;

this.axisZ = this.makeAxis(scene, "axisZ", size, new Color3(0, 0, 1));

this.axisZ.rotation.y = -Math.PI / 2;

}

private makeAxis(scene: Scene, name: string, size: number, color3: Color3): Mesh {

const axis: LinesMesh = Mesh.CreateLines(name, [

new Vector3(0,0,0),

new Vector3(size, 0, 0),

new Vector3(0.95 * size, 0, 0.05 * size),

new Vector3(size, 0, 0),

new Vector3(0.95 * size, 0, -0.05 * size)], null);

axis.color = color3;

return axis;

}

}

这个案例只是世界坐标轴，可以改造一下，给模型添加坐标轴。

微软的教程还是很全的，关键是能不能搜索的到。