Question

我试图通过在矩形内切割一个矩形孔来创建边框。矩形以它应该的方式显示，但无法弄清楚为什么孔没有显示出来。

我真的很感激任何提示。谢谢。

var scene;
var camera;
var renderer;
var canvasWidth;
var canvasHeight;
var aspRat;
var viewLength;

init();
draw();
renderScene();

function init(){
    
    renderer = new THREE.WebGLRenderer({antialias: true});
    renderer.setClearColor(0x000000, 1);
    
    canvasWidth = window.innerWidth - 50;
    console.log(canvasWidth);
    canvasHeight = window.innerHeight - 50;
    console.log(canvasHeight);
    
    renderer.setSize(canvasWidth, canvasHeight);
    document.getElementById("WebGLCanvas").appendChild(renderer.domElement);
    
    scene = new THREE.Scene();
    
    viewLength = 1000;
    aspRat = canvasWidth/canvasHeight;
    camera = new THREE.OrthographicCamera(-aspRat*viewLength/2, aspRat*viewLength/2,
                                          viewLength/2, -viewLength/2, -1000, 1000);
    console.log(aspRat*viewLength);
    console.log(aspRat);
    console.log(viewLength);
    camera.position.set(0, 0, 15);
    camera.lookAt(scene.position);
    
    scene.add(camera);
}


function draw(){
    
    drawBorder();
    
}

function renderScene(){
    
    renderer.render(scene, camera);
    
}


function drawBorder() {
    
    
    var border = new THREE.Shape();
    
    border.moveTo(-aspRat*viewLength/2, viewLength/2);
    border.lineTo(aspRat*viewLength/2, viewLength/2);
    border.lineTo(aspRat*viewLength/2, -viewLength/2);
    border.lineTo(-aspRat*viewLength/2, -viewLength/2);
    border.lineTo(-aspRat*viewLength/2, viewLength/2);
    
    
    
    var rectHole = new THREE.Path();
    
    rectHole.moveTo(-aspRat*viewLength/2 - 15, viewLength/2 - 10);
    rectHole.lineTo(aspRat*viewLength/2 - 15, viewLength/2 - 10);
    rectHole.lineTo(aspRat*viewLength/2 - 15, -viewLength/2 - 10);
    rectHole.lineTo(-aspRat*viewLength/2 - 15, -viewLength/2 - 10);
    rectHole.lineTo(-aspRat*viewLength/2 - 15, viewLength/2 - 10);
    border.holes.push(rectHole);
    
    var geometry = new THREE.ShapeGeometry( border );
    var material = new THREE.MeshBasicMaterial({ color:0x663300});
    var mesh = new THREE.Mesh(geometry, material );
    scene.add(mesh);
    
    
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r72/three.min.js"></script>
<!DOCTYPE html>
<html>

	
	
	<head>
	
		<title>StainedGlass</title>
		
		<meta name="viewport" content= "width=640, height=480, initial-scale=1">
		
		<style type= "text/css">
			
			body{
					background-color: #000000;
					overflow: hidden;
					margin: 0px, 0px, 0px, 0px;
			}
			
			#slider1{
				position: relative;
				left: 0px;
				top: 0px;
			}
			
		</style>
		
		<script type="text/javascript" src="src/three.min.js"></script>
		
	</head>
	
	<body>
		
		<div id="WebGLCanvas">
			
			
			<input id="slider1" type="range" min="0.0" max="1.0" step="0.1"/>
			<script type="text/javascript" src="src/myScript.js"></script>
		</div>
		
	</body>
	
</html>

Answer 1

您正在创建一个带洞的THREE.Shape，并使用如下图案：

var shape = new THREE.Shape();
var hole = new THREE.Path();
...
shape.holes.push( hole );

var geometry = new THREE.ShapeGeometry( shape );

您必须注意指定形状和孔的顶点的顺序。

尝试以逆时针顺序指定形状的顶点，并按顺时针顺序指定孔的顶点。

three.js r.72

为什么以下javascript函数（drawBorder（））没有削减漏洞？

1 个答案: