1. Cubo
Aunque el nombre de esta forma es la cubeometría, en realidad es un cuboide, es decir, la longitud, el ancho y la altura se pueden establecer en diferentes valores. Su constructor es:
THREE.CubeGeometry(width,height,depth,widthSegments,heightSegments, depthSegments)
Ancho: longitud en x dirección
Altura: longitud en la dirección Y
Profundidad: longitud en la dirección z
WidthSegments: Número de segmentos en la dirección x (opcional, valor predeterminado 1)
Segmentos de altura: número de segmentos en la dirección y (igual que arriba)
Segmentos de profundidad: número de segmentos en la dirección z (igual que el anterior)
No hartado:
VAR Material = nuevo tres.MeshBasicMaterial ({color: 0xffff00, wireframe: true}); drawcube (escena, material); función DrawCube (escena, material) {var cube = new tres.mesh (nuevo tres.cubeGeometrety (1, 2, 3), material); Scene.Add (Cube);}La posición predeterminada de un objeto es el origen, y para un cubo, la posición de su centro geométrico en el origen.
Segmentación:
var cubo = nuevo tres.mesh (nuevo tres.CubeGeometry (1, 2, 3, 2, 2, 3), material);
¿Por qué hay tantas líneas malvadas? Problema de la versión. Versión R73:
Tenga en cuenta que esta segmentación está segmentando seis caras , en lugar de vóxeles del cubo, por lo que no está segmentado en el medio del cubo, y solo seis lados están segmentados.
2. Plano
El plano aquí (plangeometry) es en realidad un rectángulo, no un plano de tamaño infinito en el sentido matemático. Su constructor es:
THREE.PlaneGeometry(width, height, widthSegments, heightSegments)
Ancho: longitud en x dirección
Altura: longitud en la dirección Y
WidthSegments: Número de segmentos en la dirección x (opcional, valor predeterminado 1)
Segmentos de altura: número de segmentos en la dirección y (igual que arriba)
nuevos tres.planegeometría (2, 4); El plano creado se encuentra en el plano donde se encuentran el eje x y el eje y, y el efecto es el siguiente:
3. Esfera
El constructor de la esfera (esfeegeometría) es:
Tres.sphereGeometry (radio, segmentswidth, segmentSheight, Phistart, Philength, thetAstart, thetalength) // Radius: Radius // segmentswidth: Número de segmentos en longitud // segmentSheight: número de segmentos en el latitud // Phistart: Radius al comienzo de la longitud // Philength: Radius al comienzo de la longitud de la longitud: Comienzo de la latitud // THETALENTH: RADIUS al comienzo de la latitud
3.1 Número de segmentos de latitud y longitud
Primero, comprendamos SegmentSwidth y SegmentSheight. Use VAR Sphere = New Three.SphereGeometry (3, 8, 6) para crear una esfera con un radio de 3, longitud dividida en 8 partes y latitud dividida en 6 partes, como se muestra en la figura a continuación.
El segmentswidth es equivalente a la longitud que se corta en varios pétalos, mientras que el segmento es equivalente a la latitud que se corta en varias capas.
El efecto de las nuevas tres. SphereGeometry (3, 5, 4):
El efecto de las nuevas tres. SphereGeometry (3, 8, 6):
El efecto de los nuevos tres. SphereGeometry (3, 18, 12):
En la implementación de la capa subyacente del gráfico, no hay un concepto de curvas, y todas las curvas están compuestas por múltiples aproximaciones de polilínea. Para las esferas, cuando estos dos valores son grandes, el poliedro formado puede considerarse aproximadamente como esferas.
3.2 Arco de longitud
new THREE.SphereGeometry(3, 8, 6, Math.PI / 6, Math.PI / 3) significa que la longitud inicial es Math.Pi / 6 y el lapso de longitud es Math.Pi / 3.
Los efectos son los siguientes:
Tenga en cuenta que el segmentswidth aquí significa que la longitud se divide en 8 bloques en el área donde las matemáticas. PI/6 cruza Math.Pi/3, en lugar de la longitud de toda la esfera dividida en 8 bloques antes de juzgar la parte dentro de este rango de longitud.
3.3 Latitud Radian
Lo mismo se aplica a la latitud radianes. new THREE.SphereGeometry(3, 8, 6, 0, Math.PI * 2, Math.PI / 6, Math.PI / 3) significa que la latitud abarca de Math.Pi / 6 sobre Math.Pi / 3.
Los efectos son los siguientes:
El efecto de new THREE.SphereGeometry(3, 8, 6, Math.PI / 2, Math.PI, Math.PI / 6, Math.PI / 2) :
4. Código fuente
<! Doctype html> <html> <fead> <meta charset = "utf-8"> <title> 3.js prueba 4 </title> </head> <body onload = "init ()"> <canvas id = "mainCanvas"> </avangas> </body> <script type = "text/javaScript" <script type = "text/javascript"> function init () {var renderer = new tres.webglrenderer ({Canvas: document.getElementById ('MainCanvas')}); renderer.setClearColor (0x0000000); VAR Scene = new Three.scene (); // cámara var cámara = nueva tres.tográficacamera (-5, 5, 3.75, -3.75, 0.1, 100); Camera.Position.set (25, 25, 25); Camera.lookat (nuevo tres.vector3 (0, 0, 0)); escena.add (cámara); // material var de material = nuevo tres.MeshBasicMaterial ({Color: 0xffff00, wireframe: true}); DrawCube (escena, material); // cubo // Drawplane (escena, material); // plano // DrawSphere (escena, material); // sphere // renderer renderer.render (escena, cámara); } function drawCube (escena, material) {var cube = new Three.mesh (nuevo tres.cubeGeometry (1, 2, 3, 2, 2, 3), material); escena.add (cubo); } Función Drawplane (escena, material) {var plano = new Three.mesh (nuevo tres.Planegeometry (2, 4), material); escena.add (plano); } function drawSphere (escena, material) {var spheree = new Three.mesh (nuevo tres.sphereGeGeometry (3, 18, 12), material); // var spheree = new tres.mesh (new Tres.SphereGeometry (3, 8, 6, Math.pi/ 6, Math.pi/ 3), material); // var sphere = new tres. New Threes (new tressh (new Tresh (new Tresh (new Tresh (new Tresh (new Tresh (new Tresh (newseshssssssssssssssssssssssssssshssssssssssheretryssssssssheretrysssssssssssssheretrysssssssheretros 8, 6, 0, Math.Pi * 2, Math.pi / 6, Math.pi / 3), material); // var Sphere = new Three.mesh (new Tres.SphereGeometry (3, 8, 6, Math.pi / 2, Math.pi, Math.pi / 6, Math.pi / 2), material); escena.add (esfera); } </script> </html>Lo anterior es todo el contenido de las formas geométricas aprendidas por tres.js. El editor actualizará artículos sobre tres.js uno tras otro. Continúe prestando atención a Wulin.com.