Why the following javascript function (drawBorder()) is not cutting a hole?
Question
I am trying to create a border by cutting a rectangular hole inside a rectangle. The rectangle is showing up the way it is supposed to but can't figure out why the hole is not showing up.
I would really appreciate any hints. Thank you.
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>
1 answers
solution1
1 ACCPTED 2015-09-22 22:51:54
You are creating a THREE.Shape with a hole, and using a pattern like the following:
var shape = new THREE.Shape();
var hole = new THREE.Path();
...
shape.holes.push( hole );
var geometry = new THREE.ShapeGeometry( shape );
You have to be careful about the order in which you specify the vertices of the shape and the holes.
Try specifying the vertices of the shape in counterclockwise order, and the vertices of the holes in clockwise order.
three.js r.72
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.