javascript - I can't make a wireframe box -
i make rotating box, , it's working properly. change material code wireframe material linebasicmaterial. read three.js documentation , follow examples. doesn't show anything. plain white. change color hex, since default white.
this js fiddle example http://jsfiddle.net/wick3dsono/txgcd/
// revolutions per second var angularspeed = 0.2; var lasttime = 0; // function executed on each animation frame function animate(){ // update var time = (new date()).gettime(); var timediff = time - lasttime; var anglechange = angularspeed * timediff * 2 * math.pi / 1000; cube.rotation.y += anglechange; lasttime = time; // render renderer.render(scene, camera); // request new frame requestanimationframe(function(){ animate(); }); } // renderer var renderer = new three.webglrenderer(); renderer.setsize(window.innerwidth, window.innerheight); document.body.appendchild(renderer.domelement); // camera var camera = new three.perspectivecamera(45, window.innerwidth / window.innerheight, 1, 1000); camera.position.z = 500; // scene var scene = new three.scene(); // material var mat = new three.lineabasicmaterial({color: 0x00aeef}); // primary cube (little one) var cube = new three.mesh(new three.cubegeometry(200, 200, 200), mat); cube.overdraw = true; cube.rotation.x = math.pi * 0.1; scene.add(cube); // secondary cube (big one) //var cube_big = new three.mesh(new three.cubegeometry(200,200,200), mat); //cube_big.overdraw = true; //cube_big.rotation.x = math.pi * 0.1; //scene.add(cube_big); // add subtle ambient lighting var ambientlight = new three.ambientlight(0xbbbbbb); scene.add(ambientlight); // directional lighting var directionallight = new three.directionallight(0xffffff); directionallight.position.set(1, 1, 1).normalize(); scene.add(directionallight); // start animation animate();
anyway, i'm new js fiddle too, maybe there mistake when put code on js fiddle. copy paste code editor, erasing html , head tag, , copy script js field. on code editor, put on 1 html file.
you can use meshbasicmaterial or meshlambert material option: wireframe: true
Comments
Post a Comment