Skip to content

T
three.js

Ablesons / three.js
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

体验新版 GitCode，发现更多精彩内容 >>

提交 74935383 编写于 作者: M Mugen87
浏览文件
操作

Examples: Simplify some buffer geometry examples

上级 05d67cc5
隐藏空白更改
内联 并排
Showing with 158 addition and 205 deletion
examples/webgl_buffergeometry.html
浏览文件 @ 74935383
......@@ -82,14 +82,14 @@
var geometry = new THREE.BufferGeometry();
var positions = new Float32Array( triangles * 3 * 3 );
var normals = new Float32Array( triangles * 3 * 3 );
var colors = new Float32Array( triangles * 3 * 3 );
var positions = [];
var normals = [];
var colors = [];
var color = new THREE.Color();
var n = 800, n2 = n/2; // triangles spread in the cube
var d = 12, d2 = d/2; // individual triangle size
var n = 800, n2 = n / 2; // triangles spread in the cube
var d = 12, d2 = d / 2; // individual triangle size
var pA = new THREE.Vector3();
var pB = new THREE.Vector3();
......@@ -98,7 +98,7 @@
var cb = new THREE.Vector3();
var ab = new THREE.Vector3();
for ( var i = 0; i < positions.length; i += 9 ) {
for ( var i = 0; i < triangles; i ++ ) {
// positions
......@@ -118,17 +118,9 @@
var cy = y + Math.random() * d - d2;
var cz = z + Math.random() * d - d2;
positions[ i ] = ax;
positions[ i + 1 ] = ay;
positions[ i + 2 ] = az;
positions[ i + 3 ] = bx;
positions[ i + 4 ] = by;
positions[ i + 5 ] = bz;
positions[ i + 6 ] = cx;
positions[ i + 7 ] = cy;
positions[ i + 8 ] = cz;
positions.push( ax, ay, az );
positions.push( bx, by, bz );
positions.push( cx, cy, cz );
// flat face normals
......@@ -146,17 +138,9 @@
var ny = cb.y;
var nz = cb.z;
normals[ i ] = nx;
normals[ i + 1 ] = ny;
normals[ i + 2 ] = nz;
normals[ i + 3 ] = nx;
normals[ i + 4 ] = ny;
normals[ i + 5 ] = nz;
normals[ i + 6 ] = nx;
normals[ i + 7 ] = ny;
normals[ i + 8 ] = nz;
normals.push( nx, ny, nz );
normals.push( nx, ny, nz );
normals.push( nx, ny, nz );
// colors
......@@ -166,25 +150,17 @@
color.setRGB( vx, vy, vz );
colors[ i ] = color.r;
colors[ i + 1 ] = color.g;
colors[ i + 2 ] = color.b;
colors[ i + 3 ] = color.r;
colors[ i + 4 ] = color.g;
colors[ i + 5 ] = color.b;
colors[ i + 6 ] = color.r;
colors[ i + 7 ] = color.g;
colors[ i + 8 ] = color.b;
colors.push( color.r, color.g, color.b );
colors.push( color.r, color.g, color.b );
colors.push( color.r, color.g, color.b );
}
function disposeArray() { this.array = null; }
geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ).onUpload( disposeArray ) );
geometry.addAttribute( 'normal', new THREE.BufferAttribute( normals, 3 ).onUpload( disposeArray ) );
geometry.addAttribute( 'color', new THREE.BufferAttribute( colors, 3 ).onUpload( disposeArray ) );
geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ).onUpload( disposeArray ) );
geometry.addAttribute( 'normal', new THREE.Float32BufferAttribute( normals, 3 ).onUpload( disposeArray ) );
geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ).onUpload( disposeArray ) );
geometry.computeBoundingSphere();
......
examples/webgl_buffergeometry_custom_attributes_particles.html
浏览文件 @ 74935383
......@@ -85,15 +85,12 @@
var particles = 100000;
var WIDTH = window.innerWidth;
var HEIGHT = window.innerHeight;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera( 40, WIDTH / HEIGHT, 1, 10000 );
camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = 300;
scene = new THREE.Scene();
......@@ -122,31 +119,29 @@
geometry = new THREE.BufferGeometry();
var positions = new Float32Array( particles * 3 );
var colors = new Float32Array( particles * 3 );
var sizes = new Float32Array( particles );
var positions = [];
var colors = [];
var sizes = [];
var color = new THREE.Color();
for ( var i = 0, i3 = 0; i < particles; i ++, i3 += 3 ) {
for ( var i = 0; i < particles; i ++ ) {
positions[ i3 + 0 ] = ( Math.random() * 2 - 1 ) * radius;
positions[ i3 + 1 ] = ( Math.random() * 2 - 1 ) * radius;
positions[ i3 + 2 ] = ( Math.random() * 2 - 1 ) * radius;
positions.push( ( Math.random() * 2 - 1 ) * radius );
positions.push( ( Math.random() * 2 - 1 ) * radius );
positions.push( ( Math.random() * 2 - 1 ) * radius );
color.setHSL( i / particles, 1.0, 0.5 );
colors[ i3 + 0 ] = color.r;
colors[ i3 + 1 ] = color.g;
colors[ i3 + 2 ] = color.b;
colors.push( color.r, color.g, color.b );
sizes[ i ] = 20;
sizes.push( 20 );;
}
geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
geometry.addAttribute( 'customColor', new THREE.BufferAttribute( colors, 3 ) );
geometry.addAttribute( 'size', new THREE.BufferAttribute( sizes, 1 ) );
geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ) );
geometry.addAttribute( 'customColor', new THREE.Float32BufferAttribute( colors, 3 ) );
geometry.addAttribute( 'size', new THREE.Float32BufferAttribute( sizes, 1 ) );
particleSystem = new THREE.Points( geometry, shaderMaterial );
......@@ -154,7 +149,7 @@
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( WIDTH, HEIGHT );
renderer.setSize( window.innerWidth, window.innerHeight );
var container = document.getElementById( 'container' );
container.appendChild( renderer.domElement );
......
examples/webgl_buffergeometry_lines.html
浏览文件 @ 74935383
......@@ -62,14 +62,13 @@
scene = new THREE.Scene();
var segments = 10000;
var geometry = new THREE.BufferGeometry();
var material = new THREE.LineBasicMaterial({ vertexColors: THREE.VertexColors });
var material = new THREE.LineBasicMaterial( { vertexColors: THREE.VertexColors } );
var positions = new Float32Array( segments * 3 );
var colors = new Float32Array( segments * 3 );
var positions = [];
var colors = [];
var r = 800;
......@@ -81,20 +80,20 @@
// positions
positions[ i * 3 ] = x;
positions[ i * 3 + 1 ] = y;
positions[ i * 3 + 2 ] = z;
positions.push( x, y, z );
// colors
colors[ i * 3 ] = ( x / r ) + 0.5;
colors[ i * 3 + 1 ] = ( y / r ) + 0.5;
colors[ i * 3 + 2 ] = ( z / r ) + 0.5;
colors.push( ( x / r ) + 0.5 );
colors.push( ( y / r ) + 0.5 );
colors.push( ( z / r ) + 0.5 );
}
geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
geometry.addAttribute( 'color', new THREE.BufferAttribute( colors, 3 ) );
geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ) );
geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
geometry.computeBoundingSphere();
......
examples/webgl_buffergeometry_lines_indexed.html
浏览文件 @ 74935383
......@@ -61,81 +61,95 @@
scene = new THREE.Scene();
var geometry = new THREE.BufferGeometry();
var material = new THREE.LineBasicMaterial({ vertexColors: THREE.VertexColors });
var material = new THREE.LineBasicMaterial( { vertexColors: THREE.VertexColors } );
var indices = [];
var positions = [];
var next_positions_index = 0;
var colors = [];
var indices_array = [];
var next_positions_index = 0;
//
var iteration_count = 4;
var rangle = 60 * Math.PI / 180.0;
function add_vertex(v) {
function add_vertex( v ) {
if ( next_positions_index == 0xffff ) console.error( 'Too many points.' );
positions.push( v.x, v.y, v.z );
colors.push( Math.random() * 0.5 + 0.5, Math.random() * 0.5 + 0.5, 1 );
if (next_positions_index == 0xffff) throw new Error("Too many points");
return next_positions_index ++;
positions.push(v.x, v.y, v.z);
colors.push(Math.random()*0.5+0.5, Math.random()*0.5+0.5, 1);
return next_positions_index++;
}
// simple Koch curve
function snowflake_iteration(p0, p4, depth) {
function snowflake_iteration( p0, p4, depth ) {
if (--depth < 0) {
if ( -- depth < 0 ) {
var i = next_positions_index - 1; // p0 already there
add_vertex( p4 );
indices.push( i, i + 1 );
var i = next_positions_index-1; // p0 already there
add_vertex(p4);
indices_array.push(i, i+1);
return;
}
var v = p4.clone().sub(p0);
var v_tier = v.clone().multiplyScalar(1.0/3.0);
var p1 = p0.clone().add(v_tier);
var v = p4.clone().sub( p0 );
var v_tier = v.clone().multiplyScalar( 1 / 3 );
var p1 = p0.clone().add( v_tier );
var angle = Math.atan2(v.y, v.x) + rangle;
var angle = Math.atan2( v.y, v.x ) + rangle;
var length = v_tier.length();
var p2 = p1.clone();
p2.x += Math.cos(angle) * length;
p2.y += Math.sin(angle) * length;
p2.x += Math.cos( angle ) * length;
p2.y += Math.sin( angle ) * length;
var p3 = p0.clone().add(v_tier).add(v_tier);
var p3 = p0.clone().add( v_tier ).add( v_tier );
snowflake_iteration( p0, p1, depth );
snowflake_iteration( p1, p2, depth );
snowflake_iteration( p2, p3, depth );
snowflake_iteration( p3, p4, depth );
snowflake_iteration(p0, p1, depth);
snowflake_iteration(p1, p2, depth);
snowflake_iteration(p2, p3, depth);
snowflake_iteration(p3, p4, depth);
}
function snowflake(points, loop, x_offset) {
function snowflake( points, loop, x_offset ) {
for ( var iteration = 0; iteration != iteration_count; iteration ++ ) {
for (var iteration = 0; iteration != iteration_count; ++iteration) {
add_vertex( points[ 0 ] );
for ( var p_index=0, p_count = points.length - 1; p_index != p_count; p_index ++ ) {
snowflake_iteration( points[ p_index ], points[ p_index + 1 ], iteration );
add_vertex(points[0]);
for (var p_index=0, p_count=points.length-1; p_index != p_count; ++p_index) {
snowflake_iteration(points[p_index], points[p_index+1], iteration);
}
if (loop) snowflake_iteration(points[points.length-1], points[0], iteration);
if ( loop ) snowflake_iteration( points[ points.length - 1 ], points[ 0 ], iteration );
// translate input curve for next iteration
for (var p_index=0, p_count=points.length; p_index != p_count; ++p_index) {
for ( var p_index = 0, p_count = points.length; p_index != p_count; p_index ++ ) {
points[p_index].x += x_offset;
}
}
}
var y = 0;
snowflake
(
[
new THREE.Vector3(0, y+0, 0),
new THREE.Vector3(500, y+0, 0)
new THREE.Vector3( 0, y, 0 ),
new THREE.Vector3( 500, y, 0 )
],
false, 600
);
......@@ -144,9 +158,9 @@
snowflake
(
[
new THREE.Vector3(0, y+0, 0),
new THREE.Vector3(250, y+400, 0),
new THREE.Vector3(500, y+0, 0)
new THREE.Vector3( 0, y, 0) ,
new THREE.Vector3( 250, y + 400, 0 ),
new THREE.Vector3( 500, y, 0 )
],
true, 600
);
......@@ -155,10 +169,10 @@
snowflake
(
[
new THREE.Vector3(0, y+0, 0),
new THREE.Vector3(500, y, 0),
new THREE.Vector3(500, y+500, 0),
new THREE.Vector3(0, y+500, 0)
new THREE.Vector3( 0, y, 0 ),
new THREE.Vector3( 500, y, 0 ),
new THREE.Vector3( 500, y + 500, 0 ),
new THREE.Vector3( 0, y + 500, 0 )
],
true, 600
);
......@@ -167,21 +181,22 @@
snowflake
(
[
new THREE.Vector3(250, y+0, 0),
new THREE.Vector3(500, y+0, 0),
new THREE.Vector3(250, y+0, 0),
new THREE.Vector3(250, y+250, 0),
new THREE.Vector3(250, y+0, 0),
new THREE.Vector3(0, y, 0),
new THREE.Vector3(250, y+0, 0),
new THREE.Vector3(250, y-250, 0),
new THREE.Vector3(250, y+0, 0)
new THREE.Vector3( 250, y, 0 ),
new THREE.Vector3( 500, y, 0 ),
new THREE.Vector3( 250, y, 0 ),
new THREE.Vector3( 250, y + 250, 0 ),
new THREE.Vector3( 250, y, 0 ),
new THREE.Vector3( 0, y, 0 ),
new THREE.Vector3( 250, y, 0 ),
new THREE.Vector3( 250, y - 250, 0 ),
new THREE.Vector3( 250, y, 0 )
],
false, 600
);
// --------------------------------
geometry.setIndex( indices_array );
//
geometry.setIndex( indices );
geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ) );
geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
geometry.computeBoundingSphere();
......@@ -191,7 +206,7 @@
mesh.position.y -= 1200;
parent_node = new THREE.Object3D();
parent_node.add(mesh);
parent_node.add( mesh );
scene.add( parent_node );
......@@ -239,8 +254,6 @@
var time = Date.now() * 0.001;
//mesh.rotation.x = time * 0.25;
//mesh.rotation.y = time * 0.5;
parent_node.rotation.z = time * 0.5;
renderer.render( scene, camera );
......
examples/webgl_buffergeometry_points.html
浏览文件 @ 74935383
......@@ -69,14 +69,14 @@
var geometry = new THREE.BufferGeometry();
var positions = new Float32Array( particles * 3 );
var colors = new Float32Array( particles * 3 );
var positions = [];
var colors = [];
var color = new THREE.Color();
var n = 1000, n2 = n / 2; // particles spread in the cube
for ( var i = 0; i < positions.length; i += 3 ) {
for ( var i = 0; i < particles; i ++ ) {
// positions
......@@ -84,9 +84,7 @@
var y = Math.random() * n - n2;
var z = Math.random() * n - n2;
positions[ i ] = x;
positions[ i + 1 ] = y;
positions[ i + 2 ] = z;
positions.push( x, y, z );
// colors
......@@ -96,14 +94,12 @@
color.setRGB( vx, vy, vz );
colors[ i ] = color.r;
colors[ i + 1 ] = color.g;
colors[ i + 2 ] = color.b;
colors.push( color.r, color.g, color.b );
}
geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
geometry.addAttribute( 'color', new THREE.BufferAttribute( colors, 3 ) );
geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ) );
geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
geometry.computeBoundingSphere();
......
examples/webgl_buffergeometry_rawshader.html
浏览文件 @ 74935383
......@@ -113,30 +113,29 @@
var geometry = new THREE.BufferGeometry();
var vertices = new Float32Array( triangles * 3 * 3 );
var positions = [];
var colors = [];
for ( var i = 0, l = triangles * 3 * 3; i < l; i += 3 ) {
for ( var i = 0; i < triangles; i ++ ) {
vertices[ i ] = Math.random() - 0.5;
vertices[ i + 1 ] = Math.random() - 0.5;
vertices[ i + 2 ] = Math.random() - 0.5;
positions.push( Math.random() - 0.5 );
positions.push( Math.random() - 0.5 );
positions.push( Math.random() - 0.5 );
}
geometry.addAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );
var colors = new Uint8Array( triangles * 3 * 4 );
colors.push( Math.random() * 255 );
colors.push( Math.random() * 255 );
colors.push( Math.random() * 255 );
colors.push( Math.random() * 255 );
for ( var i = 0, l = triangles * 3 * 4; i < l; i += 4 ) {
}
colors[ i ] = Math.random() * 255;
colors[ i + 1 ] = Math.random() * 255;
colors[ i + 2 ] = Math.random() * 255;
colors[ i + 3 ] = Math.random() * 255;
var positionAttribute = new THREE.Float32BufferAttribute( positions, 3 );
var colorAttribute = new THREE.Uint8BufferAttribute( colors, 4 );
}
colorAttribute.normalized = true; // this will map the buffer values to 0.0f - +1.0f in the shader
geometry.addAttribute( 'color', new THREE.BufferAttribute( colors, 4, true ) );
geometry.addAttribute( 'position', positionAttribute );
geometry.addAttribute( 'color', colorAttribute );
// material
......
examples/webgl_buffergeometry_uint.html
浏览文件 @ 74935383
......@@ -82,22 +82,15 @@
var geometry = new THREE.BufferGeometry();
var indices = new Uint32Array( triangles * 3 );
for ( var i = 0; i < indices.length; i ++ ) {
indices[ i ] = i;
}
var positions = new Float32Array( triangles * 3 * 3 );
var normals = new Int16Array( triangles * 3 * 3 );
var colors = new Uint8Array( triangles * 3 * 3 );
var indices = [];
var positions = [];
var normals = [];
var colors = [];
var color = new THREE.Color();
var n = 800, n2 = n/2; // triangles spread in the cube
var d = 12, d2 = d/2; // individual triangle size
var n = 800, n2 = n / 2; // triangles spread in the cube
var d = 12, d2 = d / 2; // individual triangle size
var pA = new THREE.Vector3();
var pB = new THREE.Vector3();
......@@ -106,7 +99,7 @@
var cb = new THREE.Vector3();
var ab = new THREE.Vector3();
for ( var i = 0; i < positions.length; i += 9 ) {
for ( var i = 0; i < triangles; i ++ ) {
// positions
......@@ -126,17 +119,9 @@
var cy = y + Math.random() * d - d2;
var cz = z + Math.random() * d - d2;
positions[ i ] = ax;
positions[ i + 1 ] = ay;
positions[ i + 2 ] = az;
positions[ i + 3 ] = bx;
positions[ i + 4 ] = by;
positions[ i + 5 ] = bz;
positions[ i + 6 ] = cx;
positions[ i + 7 ] = cy;
positions[ i + 8 ] = cz;
positions.push( ax, ay, az );
positions.push( bx, by, bz );
positions.push( cx, cy, cz );
// flat face normals
......@@ -154,17 +139,9 @@
var ny = cb.y;
var nz = cb.z;
normals[ i ] = nx * 32767;
normals[ i + 1 ] = ny * 32767;
normals[ i + 2 ] = nz * 32767;
normals[ i + 3 ] = nx * 32767;
normals[ i + 4 ] = ny * 32767;
normals[ i + 5 ] = nz * 32767;
normals[ i + 6 ] = nx * 32767;
normals[ i + 7 ] = ny * 32767;
normals[ i + 8 ] = nz * 32767;
normals.push( nx * 32767, ny * 32767, nz * 32767 );
normals.push( nx * 32767, ny * 32767, nz * 32767 );
normals.push( nx * 32767, ny * 32767, nz * 32767 );
// colors
......@@ -174,24 +151,22 @@
color.setRGB( vx, vy, vz );
colors[ i ] = color.r * 255;
colors[ i + 1 ] = color.g * 255;
colors[ i + 2 ] = color.b * 255;
colors.push( color.r * 255, color.g * 255, color.b * 255 );
colors.push( color.r * 255, color.g * 255, color.b * 255 );
colors.push( color.r * 255, color.g * 255, color.b * 255 );
colors[ i + 3 ] = color.r * 255;
colors[ i + 4 ] = color.g * 255;
colors[ i + 5 ] = color.b * 255;
}
colors[ i + 6 ] = color.r * 255;
colors[ i + 7 ] = color.g * 255;
colors[ i + 8 ] = color.b * 255;
var positionAttribute = new THREE.Float32BufferAttribute( positions, 3 );
var normalAttribute = new THREE.Int16BufferAttribute( normals, 3 );
var colorAttribute = new THREE.Uint8BufferAttribute( colors, 3 );
}
normalAttribute.normalized = true; // this will map the buffer values to 0.0f - +1.0f in the shader
colorAttribute.normalized = true;
geometry.setIndex( new THREE.BufferAttribute( indices, 1 ) );
geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
geometry.addAttribute( 'normal', new THREE.BufferAttribute( normals, 3, true ) );
geometry.addAttribute( 'color', new THREE.BufferAttribute( colors, 3, true ) );
geometry.addAttribute( 'position', positionAttribute );
geometry.addAttribute( 'normal', normalAttribute );
geometry.addAttribute( 'color',colorAttribute );
geometry.computeBoundingSphere();
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或