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.

Show comment
Hide comment
Owner

crssnky commented Dec 3, 2017

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