Adding text (as a distinct DOM Element
<section id="starter-4">
<div class="wrapper">
<canvas id="canvas" width="800" height="400"></canvas>
<div id="info">Description</div>
</div>
</section>
<script src="../../js/libs/three.r112.js"></script>
<script src="../../js/libs/utils.js"></script>
<script src="../../js/components/starter-4.js"></script>
/* No context defined. */
(function() {
document.addEventListener('DOMContentLoaded', function() {
console.log("hello let us begin using threejs as well");
// From 002. Just adding text.
// Create a scene
const scene = new THREE.Scene();
// Get our canvas element
const canvas = document.getElementById('canvas');
// Create a camera and a renderer. Match them up with the canvas element.
const camera = new THREE.PerspectiveCamera( 75, canvas.width / canvas.height, 0.1, 1000 );
const renderer = new THREE.WebGLRenderer({
canvas: canvas,
antialias: true
});
renderer.setSize( canvas.width, canvas.height );
// Create a cube
var geometry = new THREE.BoxGeometry( 2, 2, 2 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
// Move the camera out so we can see the cube.
camera.position.z = 5;
// Animation loop.
var animate = function () {
requestAnimationFrame( animate );
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render( scene, camera );
};
animate();
});
}());
#starter-4 {
background: #323232;
height: 100vh;
margin: 0;
display: grid;
.wrapper {
align-self: center;
justify-self: center;
position: relative;
}
#canvas {
background: #fff;
}
#info {
position: absolute;
bottom: 50%;
width: 100%;
text-align: center;
z-index: 100;
display: block;
color: #fff;
font-size: 4rem;
font-weight: bold;
text-transform: uppercase;
line-height: 1;
margin: 0;
padding: 0;
}
}