为什么下面的javascript函数(drawBorder())没有切割一个洞

Why the following javascript function (drawBorder()) is not cutting a hole?

本文关键字：一个 javascript 函数 为什么 drawBorder      更新时间：2023-09-26

我正在尝试通过在矩形内切割一个矩形孔来创建一个边界。这个矩形是按照它应该的方式显示出来的，但我不知道为什么这个洞没有显示出来。

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>

您正在创建一个有孔的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

相关文章：