Is it possible to change the rectangular scene frame into a circular frame, so that only the cube is visible within the website frame? I would like to modify the scene "var scene = new THREE.Scene();" to achieve this effect. I couldn't find a solution on Google, so any help would be greatly appreciated as I am just starting out with web development!
<!DOCTYPE HTML>
<html>
<head>
<title>Learning 3JS</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0" />
<meta name="theme-color" content="#ff3400" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script src="../three.js-master/build/three.js"></script>
<script src="detector.js">
if (Detector.webgl) {
animate();
} else {
var warning = Detector.getWebGLErrorMessage();
document.getElementById('container').appendChild(warning);
}
</script>
<script src="OrbitControls.js"></script>
<script src="TrackballControls.js"></script>
</head>
<body>
<div id="container" style="width: 100%; height: 640px; background: aqua;"></div>
<script>
var container = document.querySelector('#container');
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, container.clientWidth/container.clientHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
var geometry = new THREE.BoxGeometry(20, 20, 20);
var material = new THREE.MeshLambertMaterial( { color: 0xffffff } );
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
camera.position.z = 50;
var light = new THREE.PointLight(0xffff00);
/* position the light so it shines on the cube (x, y, z) */
light.position.set(-15, -10, 30);
scene.add(light);
var controls = new THREE.OrbitControls(camera);
//var controls = new THREE.TrackballControls( camera );
controls.target.set( 0, 0, 0 )
var loop = function()
{
requestAnimationFrame(loop);
controls.update();
renderer.render(scene, camera);
mesh.rotation.x += 0.02;
mesh.rotation.y += 0.005;
//mesh.rotation.z += 0.1;
}
loop();
renderer.setSize(container.clientWidth, container.clientHeight);
container.appendChild(renderer.domElement);
</script>
</body>
</html>