ejsの一部だよ

SniRepAR.js

console.log("<%= url %>");
var type = true;
function hideMe() {
    var elem = document.getElementById('description');
    elem.style.display = 'none';
}
if (type) {
    window.addEventListener('deviceorientation', function (ev) {
        if (ev.alpha == null) {
            alert("デバイスの傾きを取得できる状態にしてください。");
        }
    });
    type = false;
}
var url = "<%= url %>";
var text = "<%= text %>";
var name = "<%= name %>";

//SetUp Argon
var app = Argon.init();

//SetUp THREE
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera();
var userLocation = new THREE.Object3D();
scene.add(camera);
scene.add(userLocation);
// We use the standard WebGLRenderer
var renderer = new THREE.WebGLRenderer({
    alpha: true,
    logarithmicDepthBuffer: false
});
// account for the pixel density of the device
renderer.setPixelRatio(window.devicePixelRatio);
app.view.element.appendChild(renderer.domElement);
// to easily control stuff on the display
var hud = new THREE.CSS3DArgonHUD();
var description = document.getElementById('description');
hud.hudElements[0].appendChild(description);
app.view.element.appendChild(hud.domElement);
var stats = new Stats();
hud.hudElements[0].appendChild(stats.dom);
app.context.setDefaultReferenceFrame(app.context.localOriginEastUpSouth);
var uniforms = {
    amplitude: { type: "f", value: 0.0 }
};
var argonTextObject = new THREE.Object3D();
argonTextObject.position.z = -0.50;
userLocation.add(argonTextObject);

//Texture
try {
    var loader = new THREE.TextureLoader();
    loader.crossOrigin = "*";
    loader.load(url, function (tex) {
        var loader2 = new THREE.TextureLoader();
        loader2.load("デレステ セリフテキスト背景の場所", function (tex2) {
            var vertShader = document.getElementById('vertex_shh').innerHTML;
            var fragShader = document.getElementById('fragment_shh').innerHTML;
            var attributes = {}; // custom attributes
            var uniforms = {    // custom uniforms (your textures)
                tSec: { type: "t", value: tex },
                tOne: { type: "t", value: tex2 }
            };
            var material_shh = new THREE.ShaderMaterial({
                uniforms: uniforms,
                vertexShader: vertShader,
                fragmentShader: fragShader
            });
            var mesh = new THREE.Mesh(new THREE.PlaneGeometry(800, 450), material_shh);
            argonTextObject.add(mesh);
            argonTextObject.scale.set(0.0001, 0.0001, 0.0001);
        });
    });
} catch (e) {
    console.error(e.toString());
}

app.vuforia.isAvailable().then(function (available) {
    if (!available) {
        console.warn("vuforia not available on this platform.");
        return;
    }
    app.vuforia.init({
        encryptedLicenseData: `-----BEGIN PGP MESSAGE-----
ﾁｮﾒﾁｮﾒ
-----END PGP MESSAGE-----
`
    }).then(function (api) {
        api.objectTracker.createDataSet("VuforiaのARターゲットの場所").then(function (dataSet) {
            dataSet.load().then(function () {
                var trackables = dataSet.getTrackables();
                var gvuBrochureEntity = app.context.subscribeToEntityById(trackables["ターゲット名"].id);
                var gvuBrochureObject = new THREE.Object3D;
                scene.add(gvuBrochureObject);
                app.context.updateEvent.addEventListener(function () {
                    var gvuBrochurePose = app.context.getEntityPose(gvuBrochureEntity);
                    if (gvuBrochurePose.poseStatus & Argon.PoseStatus.KNOWN) {
                        gvuBrochureObject.position.copy(gvuBrochurePose.position);
                        gvuBrochureObject.quaternion.copy(gvuBrochurePose.orientation);
                        //argonTextObject.quaternion.copy(gvuBrochurePose.orientation);
                    }
                    if (gvuBrochurePose.poseStatus & Argon.PoseStatus.FOUND) {
                        gvuBrochureObject.add(argonTextObject);
                        argonTextObject.position.z = 0;
                        argonTextObject.scale.set(0.1, 0.1, 0.1);
                        console.log("vuforia is FOUND IT!!");
                    } else if (gvuBrochurePose.poseStatus & Argon.PoseStatus.LOST) {
                        argonTextObject.position.z = -0.50;
                        argonTextObject.scale.set(0.0001, 0.0001, 0.0001);
                        userLocation.add(argonTextObject);
                        console.log("vuforia is LOST...");
                    }
                });
            }).catch(function (err) {
                console.log("could not load dataset: " + err.message);
            });
            api.objectTracker.activateDataSet(dataSet);
        });
    }).catch(function (err) {
        console.log("vuforia failed to initialize: " + err.message);
    });
});

app.context.updateEvent.addEventListener(function () {
    var userPose = app.context.getEntityPose(app.context.user);
    if (userPose.poseStatus & Argon.PoseStatus.KNOWN) {
        userLocation.position.copy(userPose.position);
    }
});
app.renderEvent.addEventListener(function () {
    stats.update();
    var monoMode = (app.view.getSubviews()).length == 1;
    var viewport = app.view.getViewport();
    renderer.setSize(viewport.width, viewport.height);
    hud.setSize(viewport.width, viewport.height);
    for (var _i = 0, _a = app.view.getSubviews(); _i < _a.length; _i++) {
        var subview = _a[_i];
        // set the position and orientation of the camera for
        // this subview
        camera.position.copy(subview.pose.position);
        camera.quaternion.copy(subview.pose.orientation);
        // the underlying system provide a full projection matrix
        // for the camera.
        camera.projectionMatrix.fromArray(subview.projectionMatrix);
        // set the viewport for this view
        var _b = subview.viewport, x = _b.x, y = _b.y, width = _b.width, height = _b.height;
        renderer.setViewport(x, y, width, height);
        // set the webGL rendering parameters and render this view
        renderer.setScissor(x, y, width, height);
        renderer.setScissorTest(true);
        renderer.render(scene, camera);
        // adjust the hud, but only in mono
        if (monoMode) {
            hud.setViewport(x, y, width, height, subview.index);
            hud.render(subview.index);
        }
    }
});

//平面オブジェクト+テクスチャマッピングによる
var TextBoardCanvas = function (parameter) {
    parameter = parameter || {};

    //背景色(RGBA値を0から1で指定)
    this.backgroundColor = parameter.backgroundColor || { r: 1, g: 1, b: 1, a: 1 };
    //文字色(RGBA値を0から1で指定)
    this.textColor = parameter.textColor || { r: 0, g: 0, b: 0, a: 1 };

    //マッピング対象オブジェクトのサイズ(縦横比は2のべき乗を推奨)
    this.boardWidth = parameter.boardWidth || 100;
    this.boardHeight = parameter.boardHeight || 100;

    //フォント名(CSSで指定可能な形式)
    this.fontName = parameter.fontName || "serif"; //フォント名

    //フォントサイズと行間(canvas要素の横幅に対する[%]で指定)
    this.fontSize = parameter.fontSize || 10;      //フォントサイズ
    this.lineHeight = parameter.lineHeight || 1.1; //行間
    //解像度
    this.resolution = parameter.resolution || 4;

    this._lineHeight = 0;
    this.textLines = [];

    this.init();
}
//初期化
TextBoardCanvas.prototype.init = function () {
    //canvas要素の生成
    this.canvas = document.createElement('canvas');
    //canvas要素のサイズ
    this.canvas.width = Math.pow(2, Math.floor(Math.log2(this.boardWidth)) + this.resolution);  //横幅
    this.canvas.height = Math.pow(2, Math.floor(Math.log2(this.boardHeight)) + this.resolution); //縦幅

    console.log("canvas要素のサイズ:", this.canvas.width, "×", this.canvas.height);

    //コンテキストの取得
    this.canvas.context = this.canvas.getContext('2d');

    this.setBackGroundColor(this.backgroundColor.r, this.backgroundColor.g, this.backgroundColor.b, this.backgroundColor.a);
    this.setTextColor(this.textColor.r, this.textColor.g, this.textColor.b, this.textColor.a);
    this.setFontSize(this.fontSize);
    this.setFontName(this.fontName);
    this.setLineHeight(this.lineHeight);
}
//背景色の設定
TextBoardCanvas.prototype.setBackGroundColor = function (r, g, b, a) {
    this.backgroundColor.r = r || 0;
    this.backgroundColor.g = g || 0;
    this.backgroundColor.b = b || 0;
    this.backgroundColor.a = a || 0;

    this.canvas.context.fillStyle = "rgba(" + 255 * this.backgroundColor.r + " ," + 255 * this.backgroundColor.g + " ," + 255 * this.backgroundColor.b + " ," + this.backgroundColor.a + ")";
    this.canvas.context.fillRect(0, 0, this.canvas.width, this.canvas.height);
}
//全消し
TextBoardCanvas.prototype.clear = function () {
    this.canvas.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    this.canvas.context.fillStyle = "rgba(" + 255 * this.backgroundColor.r + " ," + 255 * this.backgroundColor.g + " ," + 255 * this.backgroundColor.b + " ," + this.backgroundColor.a + ")";
    this.canvas.context.fillRect(0, 0, this.canvas.width, this.canvas.height);
    this.canvas.context.fillStyle = "rgba(" + 255 * this.textColor.r + " ," + 255 * this.textColor.g + " ," + 255 * this.textColor.b + " ," + this.textColor.a + ")";
    this._lineHeight = 0;
}
//文字色の設定
TextBoardCanvas.prototype.setTextColor = function (r, g, b, a) {
    this.textColor.r = r || 0;
    this.textColor.g = g || 0;
    this.textColor.b = b || 0;
    this.textColor.a = a || 0;

    this.canvas.context.fillStyle = "rgba(" + 255 * this.textColor.r + " ," + 255 * this.textColor.g + " ," + 255 * this.textColor.b + " ," + this.textColor.a + ")";
}
//文字サイズの設定
TextBoardCanvas.prototype.setFontSize = function (size) {
    this.fontSize = size || 10;

    this.canvas.context.font = this.fontSize / 100 * this.canvas.width + "px " + this.fontName;
}
//フォントの設定
TextBoardCanvas.prototype.setFontName = function (name) {
    this.fontName = name || "serif";

    this.canvas.context.font = this.fontSize / 100 * this.canvas.width + "px " + this.fontName;
}
//行間の設定
TextBoardCanvas.prototype.setLineHeight = function (height) {
    this.lineHeight = height || 1.1;
}
//文字列の追加
TextBoardCanvas.prototype.addTextLine = function (text, indent, lineHeight) {
    text = text || "";
    indent = indent || 0;
    lineHeight = lineHeight || this.lineHeight;

    this.textLines.push({ text: text, indent: indent, lineHeight: lineHeight });
    this._lineHeight += lineHeight * this.fontSize / 100 * this.canvas.width;

    this.canvas.context.fillText(
        text,
        indent / 100 * this.canvas.width,
        this._lineHeight
    );
}
//canvas要素を取得
TextBoardCanvas.prototype.getTextCanvas = function () {
    return this.canvas;
}
var TextBoardObject = function (parameter) {
    parameter = parameter || {};

    TextBoardCanvas.call(this, parameter);

    this.plane = null;
    this.sprite = null;
}
TextBoardObject.prototype = Object.create(TextBoardCanvas.prototype);
TextBoardObject.constructor = TextBoardObject;

TextBoardObject.prototype.cleatePlaneObject = function () {
    //テクスチャ画像用のcanvas要素の取得
    var canvas = this.getTextCanvas();
    //テクスチャオブジェクトの生成
    this.texture = new THREE.Texture(canvas);
    //テクスチャ画像の更新
    this.texture.needsUpdate = true;

    //形状オブジェクトの宣言と生成
    var geometry = new THREE.PlaneGeometry(this.boardWidth, this.boardHeight);
    //材質オブジェクトの宣言と生成
    var material = new THREE.MeshBasicMaterial({ map: this.texture, transparent: true });
    //平面オブジェクトの生成
    this.plane = new THREE.Mesh(geometry, material);

    return this.plane;
}
TextBoardObject.prototype.cleateSpriteObject = function () {
    //テクスチャ画像用のcanvas要素の取得
    var canvas = this.getTextCanvas();
    //テクスチャオブジェクトの生成
    this.texture = new THREE.Texture(canvas);
    //テクスチャ画像の更新
    this.texture.needsUpdate = true;

    //材質オブジェクトの宣言と生成
    var material = new THREE.SpriteMaterial({ map: this.texture });
    //スプライトオブジェクトの生成
    this.sprite = new THREE.Sprite(material);

    this.sprite.scale.set(this.boardWidth, this.boardHeight, 1);

    return this.sprite;
}
TextBoardObject.prototype.cleateTextScreen = function () {
    this.textScene = new THREE.Scene();
    if (this.sprite) {

        this.textScene.add(this.sprite);

    } else {

        this.textScene.add(this.cleateSpriteObject());
    }

    this.textCamera = new THREE.OrthographicCamera(-this.boardWidth / 2, this.boardWidth / 2, this.boardHeight / 2, -this.boardHeight / 2, -10, 10);
}
TextBoardObject.prototype.update = function () {
    if (this.plane) this.plane.material.map.needsUpdate = true;
    if (this.sprite) this.sprite.material.map.needsUpdate = true;
}
TextBoardObject.prototype.getPlaneObject = function () {
    return this.plane;
}
TextBoardObject.prototype.getSpriteObject = function () {
    return this.sprite;
}



//String
var textBoard = new TextBoardObject({
    fontSize: 10, // [%]
    textColor: { r: 0, g: 0, b: 0, a: 1 },//文字色
    backgroundColor: { r: 1, g: 1, b: 1, a: 0 },//背景色(RGBA値を0から1で指定)
    boardWidth: 256,  //マッピング対象平面オブジェクトの横幅
    boardHeight: 256, //マッピング対象平面オブジェクトの縦幅
});
var textBoard2 = new TextBoardObject({
    fontSize: 2.5, // [%]
    textColor: { r: 0, g: 0, b: 0, a: 1 },//文字色
    backgroundColor: { r: 1, g: 1, b: 1, a: 0 },//背景色(RGBA値を0から1で指定)
    boardWidth: 256,  //マッピング対象平面オブジェクトの横幅
    boardHeight: 256, //マッピング対象平面オブジェクトの縦幅
});
var namePlane = textBoard.cleatePlaneObject();
namePlane.position.set(-150, -217, 50);
argonTextObject.add(namePlane);
textBoard.clear();
textBoard.addTextLine(name);
textBoard.update();
var textPlane = textBoard2.cleatePlaneObject();
textPlane.position.set(-0, -420, 50);
textPlane.scale.set(2.25, 2.25, 2.25);
argonTextObject.add(textPlane);
textBoard2.clear();
function insertStr(str, index, insert) {
    return str.slice(0, index) + insert + str.slice(index, str.length);
}
var str = text;
var Srts = str.split(/(.{40})/).filter(x => x);
console.log(Srts);
textBoard2.addTextLine(Srts[0]);
textBoard2.addTextLine(Srts[1], 0, 1);
textBoard2.update();

Based on https://github.com/argonjs/docs/blob/gh-pages/code/4-vuforia/app.js