Three.js Help

Need help with an engine or coding not on the list? Need help with a game or the website and forums here? Direct all questions here.
Post Reply
Mardonis
Posts: 139
Joined: Wed Jun 29, 2011 7:54 pm

Three.js Help

Post by Mardonis »

Hello,

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();
I just need to get this key piece done so I can move on with the rest. If anybody else wants to discuss about this and thinks this might be cool just msg me.


Thanks
Mardonis
User avatar
hallsofvallhalla
Site Admin
Posts: 12031
Joined: Wed Apr 22, 2009 11:29 pm

Re: Three.js Help

Post by hallsofvallhalla »

Love me some three.js but I am toasted right now. too many 99 bannanas :P
Post Reply

Return to “Advanced Help and Support”