Instantly share code, notes, and snippets.

Embed
What would you like to do?
ejsの一部だよ
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();
@crssnky

This comment has been minimized.

Owner

crssnky commented Dec 3, 2017

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment