Skip to content

Commit a2acf0b

Browse files
mrdoobmrdoob
committedNov 27, 2010
CanvasRenderer/SVGRenderer: RenderableFace4 is now gone. Unfortunately it created more problems than it solved.
CanvasRenderer now with ShadingSmooth, or something along the lines...
1 parent 724870d commit a2acf0b

31 files changed

+589
-689
lines changed
 

‎build/Three.js

+115-119
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎build/ThreeDebug.js

+116-119
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/camera_orthographic.html

+2-1
Original file line numberDiff line numberDiff line change
@@ -71,10 +71,11 @@
7171
// Cubes
7272

7373
var geometry = new Cube( 50, 50, 50 );
74+
var material = new THREE.MeshLambertMaterial( { color: 0xffffff, shading: THREE.FlatShading } );
7475

7576
for ( var i = 0; i < 100; i ++ ) {
7677

77-
var cube = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: 0xffffff, opacity: Math.random() * 0.5 + 0.5 } ) );
78+
var cube = new THREE.Mesh( geometry, material );
7879
cube.overdraw = true;
7980

8081
cube.scale.y = Math.floor( Math.random() * 2 + 1 );

‎examples/camera_free.html ‎examples/canvasrenderer_sandbox.html

+13-19
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@
4545
<script type="text/javascript" src="../src/materials/MeshLambertMaterial.js"></script>
4646
<script type="text/javascript" src="../src/materials/MeshPhongMaterial.js"></script>
4747
<script type="text/javascript" src="../src/materials/MeshDepthMaterial.js"></script>
48+
<script type="text/javascript" src="../src/materials/MeshNormalMaterial.js"></script>
4849
<script type="text/javascript" src="../src/materials/MeshFaceMaterial.js"></script>
4950
<script type="text/javascript" src="../src/materials/ParticleBasicMaterial.js"></script>
5051
<script type="text/javascript" src="../src/materials/ParticleCircleMaterial.js"></script>
@@ -55,7 +56,6 @@
5556
<script type="text/javascript" src="../src/renderers/SVGRenderer.js"></script>
5657
<script type="text/javascript" src="../src/renderers/WebGLRenderer.js"></script>
5758
<script type="text/javascript" src="../src/renderers/renderables/RenderableFace3.js"></script>
58-
<script type="text/javascript" src="../src/renderers/renderables/RenderableFace4.js"></script>
5959
<script type="text/javascript" src="../src/renderers/renderables/RenderableParticle.js"></script>
6060
<script type="text/javascript" src="../src/renderers/renderables/RenderableLine.js"></script>
6161

@@ -68,6 +68,7 @@
6868
var container, stats;
6969

7070
var camera, scene, renderer, objects;
71+
var pointLight;
7172

7273
var sphere;
7374

@@ -80,29 +81,23 @@
8081
var windowHalfX = window.innerWidth / 2;
8182
var windowHalfY = window.innerHeight / 2;
8283

83-
var moveForward = false,
84-
moveBackwards = false,
85-
moveUp = false,
86-
moveDown = false,
87-
moveLeft = false,
88-
moveRight = false,
84+
var moveForward = false, moveBackwards = false,
85+
moveUp = false, moveDown = false,
86+
moveLeft = false, moveRight = false,
8987

90-
yawLeft = false,
91-
yawRight = false,
92-
pitchUp = false,
93-
pitchDown = false,
94-
rollLeft = false,
95-
rollRight = false;
88+
yawLeft = false, yawRight = false,
89+
pitchUp = false, pitchDown = false,
90+
rollLeft = false, rollRight = false;
9691

9792
var debugContext;
9893

9994
init();
100-
setInterval(loop, 1000/60);
95+
setInterval( loop, 1000 / 60 );
10196

10297
function init() {
10398

104-
container = document.createElement('div');
105-
document.body.appendChild(container);
99+
container = document.createElement( 'div' );
100+
document.body.appendChild( container );
106101

107102
camera = new THREE.Camera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
108103
camera.position.y = 150;
@@ -137,7 +132,7 @@
137132
objects = [];
138133

139134
geometry = new Sphere( 100, 16, 8 );
140-
material = new THREE.MeshLambertMaterial( { color: 0xffffff, opacity: 1 } );
135+
material = new THREE.MeshLambertMaterial( { color: 0xffffff, opacity: 1/*, shading: THREE.FlatShading*/ } );
141136

142137
for ( var i = 0; i < 10; i ++ ) {
143138

@@ -172,10 +167,9 @@
172167
directionalLight.position.normalize();
173168
scene.addLight( directionalLight );
174169

175-
var pointLight = new THREE.PointLight( 0xff0000, 1 );
170+
pointLight = new THREE.PointLight( 0xff0000, 1 );
176171
scene.addLight( pointLight );
177172

178-
179173
renderer = new THREE.CanvasRenderer();
180174
renderer.setSize( window.innerWidth, window.innerHeight );
181175

‎examples/geometry_birds.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929
<script type="text/javascript" src="js/Stats.js"></script>
3030

3131
<script type="text/javascript" src="../build/Three.js"></script>
32-
<script type="text/javascript" src="geometry/Bird.js"></script>
32+
<script type="text/javascript" src="obj/Bird.js"></script>
3333

3434
<script type="text/javascript">
3535

‎examples/geometry_cube.html

+2
Original file line numberDiff line numberDiff line change
@@ -73,12 +73,14 @@
7373

7474
cube = new THREE.Mesh( new Cube( 200, 200, 200, 1, 1, materials ), new THREE.MeshFaceMaterial() );
7575
cube.position.y = 150;
76+
cube.overdraw = true;
7677
scene.addObject( cube );
7778

7879
// Plane
7980

8081
plane = new THREE.Mesh( new Plane( 200, 200 ), new THREE.MeshBasicMaterial( { color: 0xe0e0e0 } ) );
8182
plane.rotation.x = -90 * ( Math.PI / 180 );
83+
plane.overdraw = true;
8284
scene.addObject( plane );
8385

8486
renderer = new THREE.CanvasRenderer();

‎examples/geometry_earth.html

+1
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,7 @@
7474
scene.addObject(mesh);
7575

7676
mesh = new THREE.Mesh( new Sphere( 200, 20, 20 ), loadImage( 'textures/land_ocean_ice_cloud_2048.jpg' ) );
77+
mesh.overdraw = true;
7778
scene.addObject(mesh);
7879

7980
renderer = new THREE.CanvasRenderer();

‎examples/geometry_panorama.html

+1
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@
3232
<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - panorama demo. cubemap by <a href="http://www.zfight.com/" target="_blank">Jochum Skoglund</a>.</div>
3333

3434
<script type="text/javascript" src="../build/Three.js"></script>
35+
3536
<script type="text/javascript" src="../src/extras/primitives/Cube.js"></script>
3637

3738
<script type="text/javascript">

‎examples/interactive_voxelpainter.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -147,7 +147,7 @@
147147

148148
var position = new THREE.Vector3().add( intersects[ 0 ].point, intersects[ 0 ].object.rotationMatrix.transform( intersects[ 0 ].face.normal.clone() ) );
149149

150-
var voxel = new THREE.Mesh( new Cube( 50, 50, 50 ), [ new THREE.MeshLambertMaterial( { color: 0x00ff80, opacity: 1 } ), new THREE.MeshFaceMaterial() ] );
150+
var voxel = new THREE.Mesh( new Cube( 50, 50, 50 ), [ new THREE.MeshLambertMaterial( { color: 0x00ff80, opacity: 1, shading: THREE.FlatShading } ), new THREE.MeshFaceMaterial() ] );
151151
voxel.position.x = Math.floor( position.x / 50 ) * 50 + 25;
152152
voxel.position.y = Math.floor( position.y / 50 ) * 50 + 25;
153153
voxel.position.z = Math.floor( position.z / 50 ) * 50 + 25;

‎examples/lights_pointlights.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
overflow: hidden;
1111
}
1212

13-
#info {
13+
#info {
1414
position: absolute;
1515
top: 0px; width: 100%;
1616
color: #ffffff;
@@ -39,7 +39,7 @@
3939
</div>
4040

4141
<script type="text/javascript" src="../build/Three.js"></script>
42-
<script type="text/javascript" src="geometry/WaltHead.js"></script>
42+
<script type="text/javascript" src="obj/WaltHead.js"></script>
4343

4444
<script type="text/javascript">
4545

‎examples/materials.html

+54-28
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,50 @@
1414
</head>
1515
<body>
1616

17-
<script type="text/javascript" src="../build/Three.js"></script>
17+
<!-- <script type="text/javascript" src="../build/Three.js"></script> -->
18+
19+
<script type="text/javascript" src="../src/Three.js"></script>
20+
<script type="text/javascript" src="../src/core/Color.js"></script>
21+
<script type="text/javascript" src="../src/core/Vector2.js"></script>
22+
<script type="text/javascript" src="../src/core/Vector3.js"></script>
23+
<script type="text/javascript" src="../src/core/Vector4.js"></script>
24+
<script type="text/javascript" src="../src/core/Ray.js"></script>
25+
<script type="text/javascript" src="../src/core/Rectangle.js"></script>
26+
<script type="text/javascript" src="../src/core/Matrix3.js"></script>
27+
<script type="text/javascript" src="../src/core/Matrix4.js"></script>
28+
<script type="text/javascript" src="../src/core/Vertex.js"></script>
29+
<script type="text/javascript" src="../src/core/Face3.js"></script>
30+
<script type="text/javascript" src="../src/core/Face4.js"></script>
31+
<script type="text/javascript" src="../src/core/UV.js"></script>
32+
<script type="text/javascript" src="../src/core/Geometry.js"></script>
33+
<script type="text/javascript" src="../src/cameras/Camera.js"></script>
34+
<script type="text/javascript" src="../src/lights/Light.js"></script>
35+
<script type="text/javascript" src="../src/lights/AmbientLight.js"></script>
36+
<script type="text/javascript" src="../src/lights/DirectionalLight.js"></script>
37+
<script type="text/javascript" src="../src/lights/PointLight.js"></script>
38+
<script type="text/javascript" src="../src/objects/Object3D.js"></script>
39+
<script type="text/javascript" src="../src/objects/Mesh.js"></script>
40+
<script type="text/javascript" src="../src/objects/Particle.js"></script>
41+
<script type="text/javascript" src="../src/objects/Line.js"></script>
42+
<script type="text/javascript" src="../src/materials/Material.js"></script>
43+
<script type="text/javascript" src="../src/materials/LineBasicMaterial.js"></script>
44+
<script type="text/javascript" src="../src/materials/MeshBasicMaterial.js"></script>
45+
<script type="text/javascript" src="../src/materials/MeshLambertMaterial.js"></script>
46+
<script type="text/javascript" src="../src/materials/MeshPhongMaterial.js"></script>
47+
<script type="text/javascript" src="../src/materials/MeshDepthMaterial.js"></script>
48+
<script type="text/javascript" src="../src/materials/MeshNormalMaterial.js"></script>
49+
<script type="text/javascript" src="../src/materials/MeshFaceMaterial.js"></script>
50+
<script type="text/javascript" src="../src/materials/ParticleBasicMaterial.js"></script>
51+
<script type="text/javascript" src="../src/materials/ParticleCircleMaterial.js"></script>
52+
<script type="text/javascript" src="../src/materials/textures/Texture.js"></script>
53+
<script type="text/javascript" src="../src/scenes/Scene.js"></script>
54+
<script type="text/javascript" src="../src/renderers/Projector.js"></script>
55+
<script type="text/javascript" src="../src/renderers/CanvasRenderer.js"></script>
56+
<script type="text/javascript" src="../src/renderers/SVGRenderer.js"></script>
57+
<script type="text/javascript" src="../src/renderers/WebGLRenderer.js"></script>
58+
<script type="text/javascript" src="../src/renderers/renderables/RenderableFace3.js"></script>
59+
<script type="text/javascript" src="../src/renderers/renderables/RenderableParticle.js"></script>
60+
<script type="text/javascript" src="../src/renderers/renderables/RenderableLine.js"></script>
1861

1962
<script type="text/javascript" src="../src/extras/primitives/Sphere.js"></script>
2063

@@ -68,18 +111,16 @@
68111

69112
var geometry = new Sphere( 100, 14, 8, false );
70113

71-
var generatedTexture = new THREE.Texture( generateTexture() );
72-
generatedTexture.image.loaded = 1;
73-
74114
var materials = [];
75115
materials.push( { material: new THREE.MeshBasicMaterial( { color: 0x00ffff, wireframe: true } ), overdraw: false, doubleSided: true } );
76116
//materials.push( { material: new THREE.MeshBasicMaterial( { color: 0xff0000, blending: THREE.SubtractiveBlending } ), overdraw: false, doubleSided: true } );
77117
materials.push( { material: new THREE.MeshBasicMaterial( { color: 0xff0000, blending: THREE.AdditiveBlending } ), overdraw: false, doubleSided: true } );
78118
materials.push( { material: new THREE.MeshLambertMaterial( { color: 0xffffff, shading: THREE.FlatShading } ), overdraw: true, doubleSided: false } );
79-
materials.push( { material: new THREE.MeshPhongMaterial( { ambient: 0x030383, color: 0xf55555, specular: 0x66f6f6, shininess: 10, shading: THREE.FlatShading } ), overdraw: true, doubleSided: false } );
119+
materials.push( { material: new THREE.MeshLambertMaterial( { color: 0xffffff, shading: THREE.SmoothShading } ), overdraw: true, doubleSided: false } );
120+
// materials.push( { material: new THREE.MeshPhongMaterial( { ambient: 0x030383, color: 0xf55555, specular: 0x66f6f6, shininess: 10, shading: THREE.FlatShading } ), overdraw: true, doubleSided: false } );
80121
materials.push( { material: new THREE.MeshDepthMaterial( { near: 1, far: 2000 } ), overdraw: true, doubleSided: false } );
81-
materials.push( { material: new THREE.MeshNormalMaterial( ), overdraw: true, doubleSided: false } );
82-
materials.push( { material: new THREE.MeshBasicMaterial( { map: generatedTexture } ), overdraw: true, doubleSided: false } );
122+
materials.push( { material: new THREE.MeshNormalMaterial(), overdraw: true, doubleSided: false } );
123+
materials.push( { material: new THREE.MeshLambertMaterial( { map: loadImage( 'textures/land_ocean_ice_cloud_2048.jpg' ) } ), overdraw: false, doubleSided: false } );
83124

84125
for ( var i = 0, l = geometry.faces.length; i < l; i ++ ) {
85126

@@ -156,30 +197,15 @@
156197

157198
}
158199

159-
function generateTexture() {
160-
161-
var canvas = document.createElement( 'canvas' );
162-
canvas.width = 256;
163-
canvas.height = 256;
164-
165-
var context = canvas.getContext( '2d' );
166-
var image = context.getImageData( 0, 0, 256, 256 );
167-
168-
var x = 0, y = 0;
200+
function loadImage( path ) {
169201

170-
for ( var i = 0, j = 0, l = image.data.length; i < l; i += 4, j ++ ) {
171-
172-
x = j % 256;
173-
y = x == 0 ? y + 1 : y;
174-
175-
image.data[ i + 2 ] = Math.floor( x ^ y );
176-
image.data[ i + 3 ] = 255;
177-
178-
}
202+
var image = document.createElement( 'img' );
203+
var texture = new THREE.Texture( image, THREE.UVMapping )
179204

180-
context.putImageData( image, 0, 0 );
205+
image.onload = function () { texture.loaded = true; };
206+
image.src = path;
181207

182-
return canvas;
208+
return texture;
183209

184210
}
185211

0 commit comments

Comments
 (0)