0
직사각형 장면 프레임 대신 원형 장면을 사용하여 큐브가 웹 사이트 프레임에 표시되도록합니다. 전체 웹 페이지에 원형 프레임의 정육면체 대신 장면을 표시하고 싶지 않습니다. 직사각형 프레임을 원형 프레임으로 변경하기 위해 "var scene = new THREE.Scene();"장면을 수정할 수 있습니까? 죄송합니다. 바보 같은 질문이지만 Google에서 답을 찾지 못했습니다. 제발 도와주세요, 난 그냥 초보자예요!three.js를 사용하여 둥근 원형 프레임 webgl 창 장면을 만드는 방법
<!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>
글쎄, 당신은 사각형 캔버스을하지만, 아무것도 그립니다되지 않도록 다음 라운드 스텐실 버퍼를 사용할 수 있습니다 : 당신은 아마 더 나은 적어도에 그것으로 캔버스 개념과 방법 WebGL이 작업을 이해하고, 처음으로 시작합니다 동그라미 바깥 쪽. – zero298
스텐실은 3 가지로 지원되지 않지만, 다른 예제와 비교할 때 매우 사소한 것은 아닙니다 ('gl' 컨텍스트를 가져와 스텐실을 사용하고 올바른 호출을 할 필요가 있습니다). 그러나 유효한 해결책입니다. – pailhead