Drawing-lines.html 2.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. <!DOCTYPE html>
  2. <html lang="pt-br">
  3. <head>
  4. <meta charset="utf-8">
  5. <base href="../../../" />
  6. <script src="page.js"></script>
  7. <link type="text/css" rel="stylesheet" href="page.css" />
  8. </head>
  9. <body>
  10. <h1>Desenhando linhas</h1>
  11. <div>
  12. <p>
  13. Digamos que você queira desenhar uma linha ou um círculo, não um wireframe [page:Mesh].
  14. Primeiro precisamos configurar o [page:WebGLRenderer renderizador] (renderer), a [page:Scene cena] (scene) e
  15. a câmera (camera) (veja a página Criando uma cena).
  16. </p>
  17. <p>
  18. Aqui está o código que vamos usar:
  19. </p>
  20. <code>
  21. const renderer = new THREE.WebGLRenderer();
  22. renderer.setSize( window.innerWidth, window.innerHeight );
  23. document.body.appendChild( renderer.domElement );
  24. const camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 500 );
  25. camera.position.set( 0, 0, 100 );
  26. camera.lookAt( 0, 0, 0 );
  27. const scene = new THREE.Scene();
  28. </code>
  29. <p>
  30. A próxima coisa que vamos fazer é definir um material.
  31. Para linhas nós temos que usar [page:LineBasicMaterial] ou [page:LineDashedMaterial].
  32. </p>
  33. <code>
  34. //create a blue LineBasicMaterial
  35. const material = new THREE.LineBasicMaterial( { color: 0x0000ff } );
  36. </code>
  37. <p>
  38. Depois do material, nós vamos precisar de uma geometria com alguns vértices:
  39. </p>
  40. <code>
  41. const points = [];
  42. points.push( new THREE.Vector3( - 10, 0, 0 ) );
  43. points.push( new THREE.Vector3( 0, 10, 0 ) );
  44. points.push( new THREE.Vector3( 10, 0, 0 ) );
  45. const geometry = new THREE.BufferGeometry().setFromPoints( points );
  46. </code>
  47. <p>
  48. Note que linhas são desenhadas entre cada par consecutivo de vértices,
  49. mas não entre o primeiro e o último (a linha não é fechada).
  50. </p>
  51. <p>
  52. Agora que nós temos os pontos para duas linhas e um material,
  53. podemos juntar tudo e formar uma linha
  54. </p>
  55. <code>
  56. const line = new THREE.Line( geometry, material );
  57. </code>
  58. <p>
  59. Tudo o que falta é adicioná-la na cena e chamar o [page:WebGLRenderer.render renderizador].
  60. </p>
  61. <code>
  62. scene.add( line );
  63. renderer.render( scene, camera );
  64. </code>
  65. <p>
  66. Agora você deve estar vendo uma seta apontando para cima, feita de duas linhas azuis.
  67. </p>
  68. </div>
  69. </body>
  70. </html>