CODEWITHSUNDEEP
javascriptthree.js
deepds14
deepds14

Reputation: 51

how to create a round circular frame webgl window scene in website using three.js

I want a circular scene instead of the rectangular scene frame, so that just the cube is visible in the website frame. I don't want the whole webpage to show the scene, instead just the cube in a circular frame. Can the scene "var scene = new THREE.Scene();" be modified to change the rectangular frame into circular frame? Sorry, if this a stupid question to ask, but didn't find the answer in Google. Please help, I'm just a beginner! 

<!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>

Upvotes: 0

Views: 694

Answers (1)

user1501157
user1501157

Reputation:

No, you cannot have a circular canvas/frame buffer, exactly like you cannot have a circular image. This is a kind of general rule of computing.

But like for an image, you can simulate a circular "viewport", and there is MANY different ways to achieve this. For example, by using transparent pixels, or by painting the rectangular background of the image the same color as the background, etc.

Also, i think THREE.js is currently preventing you to understand what you do, because of its automatic functions. You probably better to begin by the beginning, at least to understands the Canvas concept and how WebGL work with it:

https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL

Upvotes: 1

Related Questions