Question

我想要一个圆形场景而不是矩形场景框架，这样只有立方体在网站框架中可见。我不希望整个网页显示场景，而只是圆形框架中的立方体。场景可以＆＃34; var scene = new THREE.Scene();＆＃34;被修改以将矩形框架更改为圆形框架？对不起，如果这是一个愚蠢的问题，但没有在谷歌找到答案。请帮忙，我只是一个初学者！

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

Answer 1

不，你不能拥有圆形画布/帧缓冲区，就像你不能拥有圆形图像一样。这是一种计算的一般规则。

但是对于图像，您可以模拟圆形“视口”，并且有许多不同的方法可以实现这一点。例如，通过使用透明像素，或通过将图像的矩形背景绘制为与背景相同的颜色等。

此外，我认为THREE.js目前正在阻止您理解您的操作，因为它具有自动功能。你最好从一开始就开始，至少要了解Canvas的概念以及WebGL如何使用它：

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

如何使用three.js在网站中创建圆形框架webgl窗口场景

1 个答案: