I've been working through an online guide on three.js that illustrates how to create a rotating 3D cube. The JavaScript code I've implemented in a separate script file is as follows:
function spin() {
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth/2, window.innerHeight/2);
document.body.appendChild(renderer.domElement);
var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshBasicMaterial( { color: 0xffff00});
var cube = new THREE.Mesh(geometry, material);
camera.position.z = 5;
scene.add(cube);
var render = function(){
requestAnimationFrame(render);
cube.rotation.x += 0.1;
cube.rotation.y += 0.1;
renderer.render(scene, camera);
};
render();
}
Currently, this code produces a spinning yellow cube against a black backdrop. I'm aware that I can adjust the canvas size (using renderer.setSize()), but wonder if it's possible to reposition it on the webpage or add custom styles like a transparent background? Could it be integrated with other page elements?
I've considered creating my own canvas and rendering the cube there instead of utilizing the one created by three.js. Is this feasible?