Comment dessiner une sphère 3D?

Vous aurez besoin pour modèle une sphère, et ont des couleurs différentes de sorte que, comme il tourne, vous pouvez voir que ce n'est pas seulement une sphère, mais en cours de rendu.

Sinon, une sphère dans l'espace, avec pas de point de référence autour d'elle ressemble à un cercle, si c'est une couleur solide.

Pour commencer, vous voulez essayer de dessiner un cercle avec des rectangles, qui est le principal primitif que vous avez.

Une fois que vous comprenez comment le faire, ou de créer une nouvelle primitive, comme un triangle en utilisant la méthode du Chemin, et de créer un cercle, alors vous êtes prêt à passer à la 3D.

3D est juste un truc, comme vous pourrez prendre votre modèle, probablement causée par une équation, puis les aplatir, comme vous pouvez le déterminer quelles parties sera vu, et puis l'afficher.

Mais, vous voulez changer la couleur des triangles basé sur quelle mesure ils sont à partir d'une source de lumière, ainsi qu'en fonction de l'angle de la partie de la source de lumière.

C'est là que vous pouvez commencer à faire des optimisations, que, si vous faites cela, pixel par pixel, alors vous êtes le raytracing. Si vous avez de gros blocs, et d'une source ponctuelle de lumière, et l'objet est en rotation, mais ne bouge pas autour de vous pouvez alors recalculer comment les changements de couleur pour chaque triangle, alors il est juste une question de changement de couleurs pour simuler la rotation.

L'algorithme dépendra de ce que les simplifications que vous voulez faire, de sorte que vous acquérir de l'expérience de revenir et de demander, en montrant ce que vous avez fait jusqu'à présent.

Voici un exemple de faire, et ci-dessous, j'ai copié la sphère en 3D de la partie, mais veuillez jeter un oeil à l'ensemble de la l'article.

function Sphere3D(radius) {
this.point = new Array();
this.color = "rgb(100,0,255)"
this.radius = (typeof(radius) == "undefined") ? 20.0 : radius;
this.radius = (typeof(radius) != "number") ? 20.0 : radius;
this.numberOfVertexes = 0;
//Loop from 0 to 360 degrees with a pitch of 10 degrees ... 
for(alpha = 0; alpha <= 6.28; alpha += 0.17) {
p = this.point[this.numberOfVertexes] = new Point3D();
p.x = Math.cos(alpha) * this.radius;
p.y = 0;
p.z = Math.sin(alpha) * this.radius;
this.numberOfVertexes++;
}
//Loop from 0 to 90 degrees with a pitch of 10 degrees ... 
//(direction = 1)
//Loop from 0 to 90 degrees with a pitch of 10 degrees ...
//(direction = -1)
for(var direction = 1; direction >= -1; direction -= 2) {
for(var beta = 0.17; beta < 1.445; beta += 0.17) {
var radius = Math.cos(beta) * this.radius;
var fixedY = Math.sin(beta) * this.radius * direction;
for(var alpha = 0; alpha < 6.28; alpha += 0.17) {
p = this.point[this.numberOfVertexes] = new Point3D();
p.x = Math.cos(alpha) * radius;
p.y = fixedY;
p.z = Math.sin(alpha) * radius;
this.numberOfVertexes++;
}
}
}
}

u peux essayer avec three.js la bibliothèque , qui ne tient pas beaucoup de code du noyau de webgl de programmation. Inclure three.js bibliothèque dans votre code html à partir de three.js lib.

u peut utiliser de la toile de moteur de rendu pour le navigateur safari , webgl travaille pour google chrome

vous trouverez les JS FIDDLE POUR LA SPHÈRE

var caméra, la scène, de matières, de la maille, de la géométrie, convertisseur

function drawSphere() {
init();
animate();
}
function init() {
//camera 
scene = new THREE.Scene()
camera = new THREE.PerspectiveCamera(50, window.innerWidth / innerHeight, 1, 1000);
camera.position.z = 300;
scene.add(camera);
//sphere object
var radius = 50,
segments = 10,
rings = 10;
geometry = new THREE.SphereGeometry(radius, segments, rings);
material = new THREE.MeshNormalMaterial({
color: 0x002288
});
mesh = new THREE.Mesh(geometry, material);
//scene 
;
scene.add(mesh);
//renderer
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
}
function animate() {
requestAnimationFrame(animate);
render();
}
function render() {
mesh.rotation.x += .01;
mesh.rotation.y += .02;
renderer.render(scene, camera);
}
//fn callin
drawSphere();