Within my article container, there are three aside tags. The third aside with id='menuPuzzleType' contains a Three.js script that creates and displays two cube meshes in a Canvas renderer.
<article id="popup">
<aside id='close'><img src="img/close.png" onClick="aFunction()" /></aside>
<aside id='msgPuzzleType'>Please select the type of puzzle you would like to play</aside>
<aside id='menuPuzzleType'>
<script>
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
cube.rotation.y -= 0.03;
cube2.rotation.y -=0.03;
renderer2.render(scene2, camera2);
}
var container2 = document.getElementById('menuPuzzleType');
//renderer
var renderer2 = new THREE.CanvasRenderer();
renderer2.setSize(400,400);//Was 100,100
container2.appendChild(renderer2.domElement);
//Scene
var scene2 = new THREE.Scene();
//Camera
var camera2 = new THREE.PerspectiveCamera(50,50/50,1,1000);
camera2.position.z = 240;//normal value is 100
camera2.position.y=60;
scene2.add(camera2);
//Axes
var axes2= new THREE.AxisHelper();
//Add texture for the cube
//Use image as texture
var img2 = new THREE.MeshBasicMaterial({ //CHANGED to MeshBasicMaterial
map:THREE.ImageUtils.loadTexture('img/2d.png')
});
img2.map.needsUpdate = true; //ADDED
//Add Cube
var cube = new THREE.Mesh(new THREE.CubeGeometry(40,40,40),img2);
cube.position.x =- 60;
scene2.add(cube);
var img3 = new THREE.MeshBasicMaterial({ //CHANGED to MeshBasicMaterial
map:THREE.ImageUtils.loadTexture('img/3d.png')
});
img3.map.needsUpdate = true; //ADDED
var cube2 = new THREE.Mesh(new THREE.CubeGeometry(40,40,40),img3);
cube2.position.x = 70; cube.position.y = 60; cube2.position.y=60;
scene2.add(cube2);
renderer2.render(scene2,camera2);
animate();
</script>
</aside>
</article>
I'm looking to place the two cubes inside the article container tag.
Below is my custom CSS code:
body{ overflow:hidden; }
article {
border:solid 1px #00CC33;
width:420px;
height:200px;
font-family: baskerville;
font-size: 16px;
margin-top: 50px;
/*For IE9 compatibility*/
behavior: url(border-radius.htc);
border-radius: 8px;
position:relative;
}
#popup {
bottom:50%;
position:relative;
margin: 0px;
left:30%;
}
#msgPuzzleType{ margin-left:60px; }
img{
behavior: url(border-radius.htc);
border-radius: 8px;
position:relative;
}
#menuPuzzleType{
background-color:#999999;
border:solid 1px #3300CC;
height:200px;
}
How can I successfully move the two cubes into the article container tag?