1. Cubo
Embora o nome dessa forma seja Cubegeometria, na verdade é um cubóide, ou seja, o comprimento, a largura e a altura podem ser definidos para valores diferentes. Seu construtor é:
THREE.CubeGeometry(width,height,depth,widthSegments,heightSegments, depthSegments)
Largura: comprimento na direção x
Altura: comprimento na direção y
profundidade: comprimento na direção z
Widthsegments: Número de segmentos na direção X (opcional, valor padrão 1)
Heightsegments: Número de segmentos na direção y (o mesmo que acima)
Profundamentos: Número de segmentos na direção z (o mesmo que acima)
Não faz parte:
var material = new Three.MeshBasicMaterial ({color: 0xfffff00, Wireframe: true}); drawcube (cena, material); função drawcube (cena, material) {var cube = new Three.mesh (novo três.cubegeometry (1, 2, 3), material); cena.add (cubo);}A posição padrão de um objeto é a origem e, para um cubo, a posição de seu centro geométrico na origem.
Segmentação:
var cubo = new Three.mesh (new Three.cubegeometria (1, 2, 3, 2, 2, 3), material);
Por que existem tantas linhas malignas? Edição da versão. Versão R73:
Observe que essa segmentação está segmentando seis faces , em vez de voxels do cubo, por isso não é segmentado no meio do cubo, e apenas seis lados são segmentados.
2. Plano
O avião aqui (Planegeometria) é na verdade um retângulo, não um plano de tamanho infinito no sentido matemático. Seu construtor é:
THREE.PlaneGeometry(width, height, widthSegments, heightSegments)
Largura: comprimento na direção x
Altura: comprimento na direção y
Widthsegments: Número de segmentos na direção X (opcional, valor padrão 1)
Heightsegments: Número de segmentos na direção y (o mesmo que acima)
novo Three.planegeometria (2, 4); O plano criado está no avião onde estão localizados o eixo x e o eixo y, e o efeito é o seguinte:
3. Esfera
O construtor da esfera (Spheregeometria) é:
Três.pheregeometria (raio, segmentswidth, segmentsheight, phistart, phil comprimento, tetastart, tetal) // raio: raio // segmentswidth: número de segmentos no longitude // segmentsheight: número de segmentos na latitude // phistart: raditius no começo de longitude // Latitude // THETALMENGON: RADIUS no início da latitude
3.1 Número de segmentos de latitude e longitude
Primeiro, vamos entender o segmentwidth e o segmentsheight. Use var sphere = novo três.Spheregeometria (3, 8, 6) para criar uma esfera com um raio de 3, longitude dividida em 8 partes e latitude dividida em 6 partes, como mostrado na figura abaixo.
O segmentowidth é equivalente à longitude que está sendo cortada em várias pétalas, enquanto o peso do segmento é equivalente à latitude que está sendo cortada em várias camadas.
O efeito de novos três.pheregeometria (3, 5, 4):
O efeito de novos três.pheregeometria (3, 8, 6):
O efeito de novos três.pheregeometria (3, 18, 12):
Na implementação da camada subjacente do gráfico, não há conceito de curvas, e as curvas são todas compostas de aproximações múltiplas da polinela. Para as esferas, quando esses dois valores são grandes, o poliedro formado pode ser considerado aproximadamente como esferas.
3.2 Longitude Arc
new THREE.SphereGeometry(3, 8, 6, Math.PI / 6, Math.PI / 3) significa que a longitude inicial é Math.PI / 6 e a extensão de longitude é Math.Pi / 3.
Os efeitos são os seguintes:
Observe que o segmento da Swidth aqui significa que a longitude é dividida em 8 blocos na área em que Math.PI/6 cruza Math.PI/3, em vez da longitude de toda a esfera dividida em 8 blocos antes de julgar a parte dentro dessa faixa de longitude.
3.3 Latitude Radian
O mesmo se aplica a radianos de latitude. new THREE.SphereGeometry(3, 8, 6, 0, Math.PI * 2, Math.PI / 6, Math.PI / 3) significa que a latitude se estende por math.pi / 6 sobre Math.pi / 3.
Os efeitos são os seguintes:
O efeito de new THREE.SphereGeometry(3, 8, 6, Math.PI / 2, Math.PI, Math.PI / 6, Math.PI / 2) :
4. Código -fonte
<! Doctype html> <html> <head> <meta charset = "utf-8"> <title> 3.js teste 4 </ititle> </ad head> <corpo onload = "init ()"> <canvas id = "maincanvas"> </canvas> </body> <cript type = "text/javrascrass" srcript "> </canvas> </" <script type = "text/javascript"> function init () {var renderer = new Three.Webglrenderer ({Canvas: document.getElementById ('mainCanes')}); renderer.setClearColor (0x0000000); var scene = new Three.Scene (); // Câmera var câmera = new Three.tográficoCamera (-5, 5, 3,75, -3,75, 0,1, 100); câmera.Position.set (25, 25, 25); câmera.Lookat (new Three.Vector3 (0, 0, 0)); cena.add (câmera); // material var material = new Three.MeshBasicMaterial ({color: 0xffff00, Wireframe: true}); drawcube (cena, material); // cubo // drawplane (cena, material); // plano // drawsphere (cena, material); // esfera // renderizador renderizador.render (cena, câmera); } função drawcube (cena, material) {var cube = new Three.Mesh (new Three.cubegeometria (1, 2, 3, 2, 2, 3), material); cena.add (cubo); } função drawPlane (cena, material) {var plan = new Three.mesh (new Three.planegeometria (2, 4), material); cenário.Add (plano); } função drawsphere (cena, material) {var sphere = new Three.Mesh (new Three.Spheregeometria (3, 18, 12), material); // var sphere = new Three.Mesh (new Three.Spheregeometry (3, 8, 6, Math.Pi/ 6, Math.Pi/ 3), material); 0, Math.Pi * 2, Math.Pi / 6, Math.Pi / 3), Material); // var sphere = new Three.Mesh (novo Three.Spheregeometry (3, 8, 6, Math.Pi / 2, Math.Pi, Math.Pi / 6, Math.Pi / 2), material); cena.add (esfera); } </script> </html>O exposto acima é o conteúdo inteiro das formas geométricas aprendidas por três.js. O editor atualizará os artigos sobre três.js um após o outro. Por favor, continue prestando atenção ao wulin.com.