home/three.js
2
0
Fork 0
mirror of https://github.com/wahyd4/three.js.git synced 2026-08-09 04:56:01 +10:00
Code Issues Packages Projects Releases Wiki Activity

- Added Sphere primitive

Browse Source 
- `three_debug.js` checks for broken UVs and display these faces with pink color instead
This commit is contained in:
Mr.doob
2010-07-19 13:23:06 +01:00
parent 8820e868b9
commit a7bed157a3
6 changed files with 270 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
build/three_debug.js
+1 -1
View File
File diff suppressed because one or more lines are too long
examples/geometry_earth.html
+134
View File
@@ -0,0 +1,134 @@
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>three.js - geometry - earth</title>
<meta charset="utf-8">
<style type="text/css">
body {
color: #ffffff;
font-family:Monospace;
font-size:13px;
text-align:center;
background-color: #000000;
margin: 0px;
overflow: hidden;
}
#info {
position: absolute;
top: 0px; width: 100%;
padding: 5px;
}
a {
color: #0080ff;
}
</style>
</head>
<body>
<div id="container"></div>
<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - earth demo</div>
<script type="text/javascript" src="http://github.com/mrdoob/stats.js/raw/master/build/stats.js"></script>
<script type="text/javascript" src="../build/three.js"></script>
<script type="text/javascript" src="primitives/Sphere.js"></script>
<script type="text/javascript">
var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight;
var container, stats;
var camera, scene, renderer;
var mesh;
var mouseX = 0;
var mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
init();
setInterval( loop, 1000 / 60 );
function init() {
container = document.getElementById( 'container' );
camera = new THREE.Camera( 60, SCREEN_WIDTH / SCREEN_HEIGHT, 0.0001, 10000 );
camera.position.z = 500;
scene = new THREE.Scene();
mesh = new THREE.Mesh( new Sphere( 200, 20, 20 ), loadImage( 'textures/land_ocean_ice_cloud_2048.jpg' ) );
scene.add(mesh);
renderer = new THREE.CanvasRenderer();
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
container.appendChild(renderer.domElement);
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
container.appendChild(stats.domElement);
document.addEventListener('mousemove', onDocumentMouseMove, false);
}
function loadImage( path ) {
var canvas = document.createElement( 'canvas' );
canvas.width = 32;
canvas.height = 32;
var material = new THREE.MeshBitmapUVMappingMaterial( canvas );
var image = new Image();
image.onload = function () {
material.bitmap = this;
};
image.src = path;
return material;
}
function onDocumentMouseMove( event ) {
mouseX = ( event.clientX - windowHalfX );
mouseY = ( event.clientY - windowHalfY );
}
function loop() {
camera.position.x += (mouseX - camera.position.x) * 0.05;
camera.position.y += (-mouseY - camera.position.y) * 0.05;
mesh.rotation.y -= 0.005;
renderer.render(scene, camera);
stats.update();
}
</script>
</body>
</html>
examples/primitives/Plane.js
+4 -4
View File
@@ -1,13 +1,13 @@
/**
* @author mr.doob / http://mrdoob.com/
* based on Papervision3D's Plane.as
* based on http://papervision3d.googlecode.com/svn/trunk/as3/trunk/src/org/papervision3d/objects/primitives/Plane.as
*/
var Plane = function ( width, height, segments_width, segments_height ) {
THREE.Geometry.call( this );
var scope = this,
var ix, iy,
width_half = width / 2,
height_half = height / 2,
gridX = segments_width || 1,
@@ -18,9 +18,9 @@ var Plane = function ( width, height, segments_width, segments_height ) {
segment_height = height / gridY;
for( var iy = 0; iy < gridY1; iy++ ) {
for( iy = 0; iy < gridY1; iy++ ) {
for( var ix = 0; ix < gridX1; ix++ ) {
for( ix = 0; ix < gridX1; ix++ ) {
var x = ix * segment_width - width_half;
var y = iy * segment_height - height_half;
examples/primitives/Sphere.js
+92
View File
@@ -0,0 +1,92 @@
/**
* @author mr.doob / http://mrdoob.com/
* based on http://papervision3d.googlecode.com/svn/trunk/as3/trunk/src/org/papervision3d/objects/primitives/Sphere.as
*/
var Sphere = function ( radius, segments_width, segments_height ) {
THREE.Geometry.call( this );
var gridX = segments_width || 8,
gridY = segments_height || 6;
var i, j;
var iHor = Math.max( 3, gridX );
var iVer = Math.max( 2, gridY );
var aVtc = [];
for ( j = 0; j < ( iVer + 1 ) ; j++ ) {
var fRad1 = j / iVer;
var fZ = radius * Math.cos( fRad1 * Math.PI );
var fRds = radius * Math.sin( fRad1 * Math.PI );
var aRow = [];
var oVtx = 0;
for ( i = 0; i < iHor; i++ ) {
var fRad2 = 2 * i / iHor;
var fX = fRds * Math.sin( fRad2 * Math.PI );
var fY = fRds * Math.cos( fRad2 * Math.PI );
if ( !( ( j == 0 || j == iVer ) && i > 0 ) ) {
oVtx = this.vertices.push( new THREE.Vertex( new THREE.Vector3( fY, fZ, fX ) ) ) - 1;
}
aRow.push( oVtx );
}
aVtc.push( aRow );
}
var iVerNum = aVtc.length;
for ( j = 0; j < iVerNum; j++ ) {
var iHorNum = aVtc[ j ].length;
if ( j > 0 ) {
for ( i = 0; i < iHorNum; i++ ) {
var bEnd = i == ( iHorNum - 1 );
var aP1 = aVtc[ j ][ bEnd ? 0 : i + 1 ];
var aP2 = aVtc[ j ][ ( bEnd ? iHorNum - 1 : i ) ];
var aP3 = aVtc[ j - 1 ][ ( bEnd ? iHorNum - 1 : i ) ];
var aP4 = aVtc[ j - 1 ][ bEnd ? 0 : i + 1 ];
var fJ0 = j / ( iVerNum - 1 );
var fJ1 = ( j - 1 ) / ( iVerNum - 1 );
var fI0 = ( i + 1 ) / iHorNum;
var fI1 = i / iHorNum;
var aP1uv = new THREE.UV( 1 - fI0, fJ0 );
var aP2uv = new THREE.UV( 1 - fI1, fJ0 );
var aP3uv = new THREE.UV( 1 - fI1, fJ1 );
var aP4uv = new THREE.UV( 1 - fI0, fJ1 );
if ( j < ( aVtc.length - 1 ) ) {
this.faces.push( new THREE.Face3( aP1, aP2, aP3 ) );
this.uvs.push( [ aP1uv, aP2uv, aP3uv ] );
}
if ( j > 1 ) {
this.faces.push( new THREE.Face3( aP1, aP3, aP4 ) );
this.uvs.push( [ aP1uv, aP3uv, aP4uv ] );
}
}
}
}
}
Sphere.prototype = new THREE.Geometry();
Sphere.prototype.constructor = Sphere;
examples/textures/land_ocean_ice_cloud_2048.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 580 KiB

src/renderers/CanvasRenderer.js
+39 -1
View File
@@ -269,6 +269,25 @@ THREE.CanvasRenderer = function () {
bitmapWidth = bitmap.width;
bitmapHeight = bitmap.height;
/* DEBUG
if ( !element.uvs[ 0 ] || !element.uvs[ 1 ] || !element.uvs[ 2 ]) {
_context.beginPath();
_context.moveTo( v1x, v1y );
_context.lineTo( v2x, v2y );
_context.lineTo( v3x, v3y );
_context.lineTo( v4x, v4y );
_context.lineTo( v1x, v1y );
_context.closePath();
_context.fillStyle = 'rgb(0, 255, 0)';
_context.fill();
continue;
}
*/
uv1.copy( element.uvs[ 0 ] );
uv2.copy( element.uvs[ 1 ] );
uv3.copy( element.uvs[ 2 ] );
@@ -390,6 +409,25 @@ THREE.CanvasRenderer = function () {
bitmapWidth = bitmap.width;
bitmapHeight = bitmap.height;
/* DEBUG
if ( !element.uvs[ 0 ] || !element.uvs[ 1 ] || !element.uvs[ 2 ] || !element.uvs[ 3 ]) {
_context.beginPath();
_context.moveTo( v1x, v1y );
_context.lineTo( v2x, v2y );
_context.lineTo( v3x, v3y );
_context.lineTo( v4x, v4y );
_context.lineTo( v1x, v1y );
_context.closePath();
_context.fillStyle = 'rgb(255, 0, 255)';
_context.fill();
continue;
}
*/
uv1.copy( element.uvs[ 0 ] );
uv2.copy( element.uvs[ 1 ] );
uv3.copy( element.uvs[ 2 ] );
@@ -409,7 +447,7 @@ THREE.CanvasRenderer = function () {
}
/* DEBUG
/*
_context.lineWidth = 1;
_context.strokeStyle = 'rgba( 0, 255, 0, 0.5 )';
_context.strokeRect( _bboxRect.getX(), _bboxRect.getY(), _bboxRect.getWidth(), _bboxRect.getHeight() );