I created a Torus and Cube Mesh in my scene, but I want the cube to be positioned at the bottom right corner of the screen. Here's what I tried:
<div style="position: absolute; bottom: 0px; right:0px; width: 100px; text-align: center; ">
<script>
var cube = new THREE.Mesh(new THREE.CubeGeometry(50,50,50),
new THREE.MeshBasicMaterial({color: 0x000000}));
scene.add(cube);
</script>
</div>
Despite my efforts, the cube is still appearing in the center of the screen:
Am I overlooking something important? Thank you for your help in advance.
UPDATE:
I attempted to create a new renderer, scene, and camera specifically for the cube like this:
HTML code:
<div id="share">
CSS code:
#share {
border: 1px solid black; /* or none; */
margin: 20px;
padding: 0px;
width: 200px;
height: 200px;
position: absolute;
right: 0px;
bottom: 0px;
}
JavaScript code:
<script>
//dom
var container2=document.getElementById('share');
//renderer
var renderer2 = new THREE.CanvasRenderer();
renderer2.setSize(200,200);
container2.appendChild(renderer2.domElement);
//Scene
var scene2 = new THREE.Scene();
//Camera
var camera2 = new THREE.PerspectiveCamera(50,200/200,1,1000);
camera2.up=camera.up;
scene2.add(camera2);
//Axes
var axes2= new THREE.AxisHelper();
scene2.add(axes2);
//Add Cube
var cube = new THREE.Mesh(new THREE.CubeGeometry(50,50,50),
new THREE.MeshBasicMaterial({color: 0x000000}));
scene2.add(cube);
//
renderer2.render(scene2,camera2);
</script>
Although the div is displaying correctly, the cube is not visible on the live page. I checked the web console and there are no errors reported. Can someone guide me towards finding the missing piece here? You can view the issue live here: