javascript - Face not visible after changing wireframe to false -
i trying draw house, created faces. had meshbasicmaterial's wireframe set true while making it, when wanted add textures it, got errors. troubleshooting that, changed wireframe false, see wrong. 3 of faces not getting drawn. wireframe set false: 
and when true: 
i have tried drawing missing faces wireframe set true, , see them getting drawn. when change parameter false, doesn't draw face.
my code below:
<!doctype html> <head> <title>textures</title> <meta charset="utf-8" /> </head> <body style="font-family:georgia;"> <script src="http://www.erobo.net/scripts/javascript/33/scripts/three.min.js"></script> <div style="width: 580px; height:580px; margin: 0 auto; font-family:georgia;"> <h2><i>textures</i></h2> <b>my name</b> [ <text style="font-family:lucida console; font-size:14px">my_name@email.com</text>] <br> <hr> <form id="myform"> <input type="button" onclick="clearscreen()" value="clear" style="width: 50px; height: 25px; background-color:lightgrey"> </form> <br> <div id="divcontainer" style="float:left; width:600px; height:400px; border:2px solid blue;"> <script> var container = document.getelementbyid("divcontainer"); var renderer = new three.webglrenderer(); renderer.setsize(container.offsetwidth, container.offsetheight); container.appendchild(renderer.domelement); var aspectratio = container.offsetwidth / container.offsetheight; var scene = new three.scene(); var camera = new three.orthographiccamera(-aspectratio * 100 / 3, aspectratio * 100 / 2, 100 / 2, -100 / 3, -1000, 1000); camera.position.set(20, 10, 20); camera.lookat(scene.position); var geometry = new three.geometry(); var axesgeometry = new three.geometry(); var material = new three.meshbasicmaterial({ //map: texture, //overdraw: 0.5, color: 0xff0000, wireframe: true }); var axesmaterial = new three.linebasicmaterial({ color: 0x00ff00 }); axesgeometry.vertices.push(new three.vector3(0, 0, 0)); axesgeometry.vertices.push(new three.vector3(0, 0, 160)); axesgeometry.vertices.push(new three.vector3(0, 0, 0)); axesgeometry.vertices.push(new three.vector3(0, 160, 0)); axesgeometry.vertices.push(new three.vector3(0, 0, 0)); axesgeometry.vertices.push(new three.vector3(160, 0, 0)); geometry.vertices.push(new three.vector3(0, 0, 0), new three.vector3(0, 0, 30), new three.vector3(0, 30, 30), new three.vector3(0, 30, 0)); geometry.vertices.push(new three.vector3(0, 0, 0), new three.vector3(70, 0, 0), new three.vector3(70, 30, 0), new three.vector3(0, 30, 0)); geometry.vertices.push(new three.vector3(70, 0, 0), new three.vector3(70, 0, 30), new three.vector3(70, 30, 30), new three.vector3(70, 30, 0)); geometry.vertices.push(new three.vector3(70, 30, 30), new three.vector3(0, 30, 30), new three.vector3(0, 0, 30), new three.vector3(70, 0, 30)); geometry.vertices.push(new three.vector3(0, 30, 30), new three.vector3(0, 40, 15), new three.vector3(0, 30, 0)); geometry.vertices.push(new three.vector3(0, 30, 0), new three.vector3(70, 30, 0), new three.vector3(70, 40, 15), new three.vector3(0, 40, 15)); geometry.vertices.push(new three.vector3(0, 30, 30), new three.vector3(70, 30, 30), new three.vector3(70, 40, 15), new three.vector3(0, 40, 15)); geometry.vertices.push(new three.vector3(70, 30, 30), new three.vector3(70, 40, 15), new three.vector3(70, 30, 0)); geometry.faces.push(new three.face4(0, 1, 2, 3)); geometry.faces.push(new three.face4(4, 5, 6, 7)); geometry.faces.push(new three.face4(8, 9, 10, 11)); geometry.faces.push(new three.face4(12, 13, 14, 15)); geometry.faces.push(new three.face3(16, 17, 18)); geometry.faces.push(new three.face4(19, 20, 21, 22)); geometry.faces.push(new three.face4(23, 24, 25, 26)); geometry.faces.push(new three.face3(27, 28, 29)); geometry.computefacenormals(); geometry.computecentroids(); var axes = new three.line(axesgeometry, axesmaterial); var line = new three.mesh(geometry, material); //rotation line.rotation.x = 0; line.rotation.y = 0; line.rotation.z = 0; axes.rotation.x = 0; axes.rotation.y = 0; axes.rotation.z = 0; scene.add(line); scene.add(axes); var light = new three.pointlight(0x0000ff); light.position.set(100, 100, 100); scene.add(light); renderer.render(scene, camera); </script> </div> </body> <br> <i>instructions go here.</i> </div> </body> </html>i have checked code several times, drawing faces 1 one, 3 faces out of 8 don't drawn wireframe set false.
please decrease
line.rotation.y0-0.6;notice faces not drawn.
this because default draw "front" of face. front defined ordering of vertices of face, default, if view face front, vertices going anticlockwise:
https://www.opengl.org/wiki/face_culling
if don't want re-order vertices winding order consistent, easy solution to, in material, set side three.doubleside
var material = new three.meshbasicmaterial({ //map: texture, //overdraw: 0.5, color: 0xff0000, wireframe: true, side: three.doubleside }); this draw both sides of face, less efficent (has draw twice many faces)
Comments
Post a Comment