Javascript 如何使用three.js在网站中创建圆形框架webgl窗口场景
我想要一个圆形的场景而不是矩形的场景框架，这样只有立方体在网站框架中可见。我不希望整个网页显示场景，而只是圆形框架中的立方体。能否修改场景“Javascript 如何使用three.js在网站中创建圆形框架webgl窗口场景,javascript,three.js,Javascript,Three.js,我想要一个圆形的场景而不是矩形的场景框架，这样只有立方体在网站框架中可见。我不希望整个网页显示场景，而只是圆形框架中的立方体。能否修改场景“var scene=new THREE.scene（）；”以将矩形帧更改为圆形帧？抱歉，如果这是一个愚蠢的问题，但在谷歌上找不到答案。请帮帮我，我只是个初学者 <!DOCTYPE HTML> <html> <head> <title>Learning 3JS</title> <
var scene=new THREE.scene（）；<!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>
学习3JS
if（Detector.webgl）{
制作动画（）；
}否则{
var warning=Detector.getWebGLErrorMessage（）；
document.getElementById（'container'）.appendChild（警告）；
}
var container=document.querySelector（“#container”）；
var scene=new THREE.scene（）；
var摄像机=新的三视角摄像机（75，container.clientWidth/container.clientHeight，0.11000）；
var renderer=new THREE.WebGLRenderer（）；
var geometry=新的3.BoxGeometry（20,20,20）；
var material=new THREE.MeshLambertMaterial（{color:0xffffff}）；
var mesh=新的三个网格（几何体、材质）；
场景。添加（网格）；
摄像机位置z=50；
var灯=新的三点灯（0xffff00）；
/*放置灯光，使其照射在立方体上（x、y、z）*/
光。位置。设置（-15，-10,30）；
场景。添加（灯光）；
var控制装置=新的三个轨道控制装置（摄像机）；
//var控制=新的三个轨迹球控制（摄像头）；
控件.target.set（0,0,0）
var循环=函数（）
{
请求动画帧（循环）；
控件更新（）；
渲染器。渲染（场景、摄影机）；
网格旋转.x+=0.02；
网格旋转y+=0.005；
//网格旋转.z+=0.1；
}
loop（）；
renderer.setSize（container.clientWidth，container.clientHeight）；
container.appendChild（renderer.domeElement）；
好吧，你可以制作一个正方形画布，但随后使用一个圆形模具缓冲区，这样就不会有任何东西画在圆圈之外。三个模具不支持模具，与其他示例相比，它不会非常简单（需要获取
gl