i have a html5, three.js code, i have 8 different walls on a 3D scenario, i need to make those walls clickable and open a external url or url popup, this is my code and what i have.
// Geometry: walls
var cube = new t.CubeGeometry(UNITSIZE, WALLHEIGHT, UNITSIZE);
var materials = [
new t.MeshLambertMaterial({/*color: 0x00CCAA,*/map: t.ImageUtils.loadTexture('images/wall-1.jpg')}),
new t.MeshLambertMaterial({/*color: 0xC5EDA0,*/map: t.ImageUtils.loadTexture('images/wall-2.jpg')}),
new t.MeshLambertMaterial({/*color: 0xC5EDA0,*/map: t.ImageUtils.loadTexture('images/wall-3.jpg')}),
new t.MeshLambertMaterial({/*color: 0xC5EDA0,*/map: t.ImageUtils.loadTexture('images/wall-4.jpg')}),
new t.MeshLambertMaterial({/*color: 0xC5EDA0,*/map: t.ImageUtils.loadTexture('images/wall-5.jpg')}),
new t.MeshLambertMaterial({/*color: 0xC5EDA0,*/map: t.ImageUtils.loadTexture('images/wall-6.jpg')}),
new t.MeshLambertMaterial({/*color: 0xC5EDA0,*/map: t.ImageUtils.loadTexture('images/wall-7.jpg')}),
new t.MeshLambertMaterial({/*color: 0xC5EDA0,*/map: t.ImageUtils.loadTexture('images/wall-8.jpg')}),
new t.MeshLambertMaterial({/*color: 0xC5EDA0,*/map: t.ImageUtils.loadTexture('images/wall-9.jpg')}),
new t.MeshLambertMaterial({color: 0xFBEBCD}),
];
for (var i = 0; i < mapW; i++) {
for (var j = 0, m = map[i].length; j < m; j++) {
if (map[i][j]) {
var wall = new t.Mesh(cube, materials[map[i][j]-1]);
wall.position.x = (i - units/2) * UNITSIZE;
wall.position.y = WALLHEIGHT/2;
wall.position.z = (j - units/2) * UNITSIZE;
scene.add(wall);
}
}
}
.....
function onDocumentMouseMove(e) {
e.preventDefault();
mouse.x = (e.clientX / WIDTH) * 2 - 1;
mouse.y = - (e.clientY / HEIGHT) * 2 + 1;
}
....
Aucun commentaire:
Enregistrer un commentaire