To anyone who knows about Three.js and javascript, I am in need of some help with some code I am messing with. The framework I am using is Three.js. I already have a box showing in 3D and the sides are colored. The thing i want to do is, take one of the faces of the cube and display the class name of a div. While that cubes face is moving around (can be stationary or moving doesnt matter) it needs to be changing its face each tick. Inside of this div class name there is a player that is changing numbers around like the 2048 game. I had an idea that it might be cool if whoever is online the cube will add another face to it. so itll grow or shrink depending on whos on. Also later on in production make it have like a 15min timer so we dont have any campers staying on. There will be local storage so you will be back to where you were. The main screen will be 2D though. the side of the screen will be were the stats and the side window will be split in two sections. Top is stats and bottom is the geometry object. You can visually see how poeple are playing or doing by just moving it around. Also maybe if someone has made it to 2048 they can have a little badge or something. That can be planned later. Also one thing to note the div class name is not a texture file like a jpg or png. It is always changing. If i can atleast get it to show up as static for a bit that would be fine. Then the dynamic part later.
The following javascript is what i have so far.
Code: Select all
var scene, camera, renderer, VIEW_ANGLE, SCREEN_WIDTH, SCREEN_HEIGHT, ASPECT, NEAR, FAR, container, posXFrame, negXFrame, posYFrame, negYFrame, posZFrame, negZFrame, frameGeometry, frameMaterial, frame;
VIEW_ANGLE = 45;
SCREEN_WIDTH = window.innerWidth;
SCREEN_HEIGHT = window.innerHeight;
ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT;
NEAR = 1;
FAR = 1000;
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR);
camera.position.z = 10;
renderer = new THREE.WebGLRenderer();
renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
renderer.setClearColor(0xffffff);
//container = document.getElementsByClassName('container');
//posZFrame = new THREE.Texture(container);
//posZFrame.needsUpdate = true;
frameGeometry = new THREE.BoxGeometry(1, 1, 1);
frameGeometry.computeFaceNormals();
frameGeometry.computeVertexNormals();
frameMaterial = new THREE.MeshFaceMaterial([
new THREE.MeshBasicMaterial({color: 0xff0000}), // +x face red
new THREE.MeshBasicMaterial({color: 0xffa500}), // -x face orange
new THREE.MeshBasicMaterial({color: 0xffff00}), // +y face yellow
new THREE.MeshBasicMaterial({color: 0x00ff00}), // -y face green
new THREE.MeshBasicMaterial({color: 0x0000ff}), // +z face blue [b]( This is the face that will be facing you, and that I need to show the div class name )[/b]
new THREE.MeshBasicMaterial({color: 0xa020f0}) // -z face purple
]);
frame = new THREE.Mesh(frameGeometry, frameMaterial);
scene.add(frame);
document.body.appendChild(renderer.domElement);
function render() {
'use strict';
requestAnimationFrame(render);
frame.rotation.x += 0.01;
frame.rotation.y += 0.01;
renderer.render(scene, camera);
}
render();
Thanks
Mardonis