Skip to content

T
three.js

车家大少爷 / three.js
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

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

未验证 提交 977ed480 编写于 作者: M Mr.doob 提交者： GitHub
浏览文件
操作

Merge pull request #13808 from Mugen87/dev3 

Examples: Clean up
上级 5d628622 11f91fe3
隐藏空白更改
内联 并排
Showing with 96 addition and 101 deletion
examples/webgl_points_billboards.html
浏览文件 @ 977ed480
......@@ -45,8 +45,7 @@
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var container, stats;
var camera, scene, renderer, particles, geometry, material, i, h, color, sprite, size;
var camera, scene, renderer, stats, material;
var mouseX = 0, mouseY = 0;
var windowHalfX = window.innerWidth / 2;
......@@ -57,34 +56,33 @@
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 55, window.innerWidth / window.innerHeight, 2, 2000 );
camera.position.z = 1000;
scene = new THREE.Scene();
scene.fog = new THREE.FogExp2( 0x000000, 0.001 );
geometry = new THREE.Geometry();
var geometry = new THREE.BufferGeometry();
var vertices = [];
sprite = new THREE.TextureLoader().load( "textures/sprites/disc.png" );
var sprite = new THREE.TextureLoader().load( 'textures/sprites/disc.png' );
for ( i = 0; i < 10000; i ++ ) {
for ( var i = 0; i < 10000; i ++ ) {
var vertex = new THREE.Vector3();
vertex.x = 2000 * Math.random() - 1000;
vertex.y = 2000 * Math.random() - 1000;
vertex.z = 2000 * Math.random() - 1000;
var x = 2000 * Math.random() - 1000;
var y = 2000 * Math.random() - 1000;
var z = 2000 * Math.random() - 1000;
geometry.vertices.push( vertex );
vertices.push( x, y, z );
}
geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
material = new THREE.PointsMaterial( { size: 35, sizeAttenuation: false, map: sprite, alphaTest: 0.5, transparent: true } );
material.color.setHSL( 1.0, 0.3, 0.7 );
particles = new THREE.Points( geometry, material );
var particles = new THREE.Points( geometry, material );
scene.add( particles );
//
......@@ -92,12 +90,12 @@
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
document.body.appendChild( renderer.domElement );
//
stats = new Stats();
container.appendChild( stats.dom );
document.body.appendChild( stats.dom );
//
......@@ -175,7 +173,7 @@
camera.lookAt( scene.position );
h = ( 360 * ( 1.0 + time ) % 360 ) / 360;
var h = ( 360 * ( 1.0 + time ) % 360 ) / 360;
material.color.setHSL( h, 0.5, 0.5 );
renderer.render( scene, camera );
......
examples/webgl_points_billboards_colors.html
浏览文件 @ 977ed480
......@@ -45,8 +45,7 @@
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var container, stats;
var camera, scene, renderer, particles, geometry, material, i, h, color, colors = [], sprite, size;
var camera, scene, renderer, stats, material;
var mouseX = 0, mouseY = 0;
var windowHalfX = window.innerWidth / 2;
......@@ -57,39 +56,41 @@
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 3000 );
camera.position.z = 1400;
scene = new THREE.Scene();
scene.fog = new THREE.FogExp2( 0x000000, 0.0009 );
geometry = new THREE.Geometry();
var geometry = new THREE.BufferGeometry();
var vertices = [];
var colors = [];
var sprite = new THREE.TextureLoader().load( 'textures/sprites/ball.png' );
sprite = new THREE.TextureLoader().load( "textures/sprites/ball.png" );
var color = new THREE.Color();
for ( i = 0; i < 5000; i ++ ) {
for ( var i = 0; i < 5000; i ++ ) {
var vertex = new THREE.Vector3();
vertex.x = 2000 * Math.random() - 1000;
vertex.y = 2000 * Math.random() - 1000;
vertex.z = 2000 * Math.random() - 1000;
var x = 2000 * Math.random() - 1000;
var y = 2000 * Math.random() - 1000;
var z = 2000 * Math.random() - 1000;
geometry.vertices.push( vertex );
color.setHSL( ( x + 1000 ) / 2000, 1, 0.5 );
colors[ i ] = new THREE.Color( 0xffffff );
colors[ i ].setHSL( ( vertex.x + 1000 ) / 2000, 1, 0.5 );
vertices.push( x, y, z );
colors.push( color.r, color.g, color.b );
}
geometry.colors = colors;
geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
material = new THREE.PointsMaterial( { size: 85, map: sprite, vertexColors: THREE.VertexColors, alphaTest: 0.5, transparent: true } );
material.color.setHSL( 1.0, 0.2, 0.7 );
particles = new THREE.Points( geometry, material );
var particles = new THREE.Points( geometry, material );
scene.add( particles );
//
......@@ -97,12 +98,12 @@
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
document.body.appendChild( renderer.domElement );
//
stats = new Stats();
container.appendChild( stats.dom );
document.body.appendChild( stats.dom );
//
......@@ -180,7 +181,7 @@
camera.lookAt( scene.position );
h = ( 360 * ( 1.0 + time ) % 360 ) / 360;
var h = ( 360 * ( 1.0 + time ) % 360 ) / 360;
material.color.setHSL( h, 1.0, 0.6 );
renderer.render( scene, camera );
......
examples/webgl_points_random.html
浏览文件 @ 977ed480
......@@ -45,8 +45,7 @@
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var container, stats;
var camera, scene, renderer, particles, geometry, materials = [], parameters, i, h, color, size;
var camera, scene, renderer, stats, materials = [], parameters;
var mouseX = 0, mouseY = 0;
var windowHalfX = window.innerWidth / 2;
......@@ -57,44 +56,43 @@
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 3000 );
camera.position.z = 1000;
scene = new THREE.Scene();
scene.fog = new THREE.FogExp2( 0x000000, 0.0007 );
geometry = new THREE.Geometry();
var geometry = new THREE.BufferGeometry();
var vertices = [];
for ( i = 0; i < 20000; i ++ ) {
for ( var i = 0; i < 20000; i ++ ) {
var vertex = new THREE.Vector3();
vertex.x = Math.random() * 2000 - 1000;
vertex.y = Math.random() * 2000 - 1000;
vertex.z = Math.random() * 2000 - 1000;
var x = Math.random() * 2000 - 1000;
var y = Math.random() * 2000 - 1000;
var z = Math.random() * 2000 - 1000;
geometry.vertices.push( vertex );
vertices.push( x, y, z );
}
geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
parameters = [
[ [1, 1, 0.5], 5 ],
[ [0.95, 1, 0.5], 4 ],
[ [0.90, 1, 0.5], 3 ],
[ [0.85, 1, 0.5], 2 ],
[ [0.80, 1, 0.5], 1 ]
[ [ 1, 1, 0.5 ], 5 ],
[ [ 0.95, 1, 0.5 ], 4 ],
[ [ 0.90, 1, 0.5 ], 3 ],
[ [ 0.85, 1, 0.5 ], 2 ],
[ [ 0.80, 1, 0.5 ], 1 ]
];
for ( i = 0; i < parameters.length; i ++ ) {
for ( var i = 0; i < parameters.length; i ++ ) {
color = parameters[i][0];
size = parameters[i][1];
var size = parameters[ i ][ 1 ];
materials[i] = new THREE.PointsMaterial( { size: size } );
materials[ i ] = new THREE.PointsMaterial( { size: size } );
particles = new THREE.Points( geometry, materials[i] );
var particles = new THREE.Points( geometry, materials[ i ] );
particles.rotation.x = Math.random() * 6;
particles.rotation.y = Math.random() * 6;
......@@ -107,10 +105,10 @@
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
document.body.appendChild( renderer.domElement );
stats = new Stats();
container.appendChild( stats.dom );
document.body.appendChild( stats.dom );
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
document.addEventListener( 'touchstart', onDocumentTouchStart, false );
......@@ -187,7 +185,7 @@
camera.lookAt( scene.position );
for ( i = 0; i < scene.children.length; i ++ ) {
for ( var i = 0; i < scene.children.length; i ++ ) {
var object = scene.children[ i ];
......@@ -199,12 +197,12 @@
}
for ( i = 0; i < materials.length; i ++ ) {
for ( var i = 0; i < materials.length; i ++ ) {
color = parameters[i][0];
var color = parameters[ i ][ 0 ];
h = ( 360 * ( color[0] + time ) % 360 ) / 360;
materials[i].color.setHSL( h, color[1], color[2] );
var h = ( 360 * ( color[ 0 ] + time ) % 360 ) / 360;
materials[ i ].color.setHSL( h, color[ 1 ], color[ 2 ] );
}
......
examples/webgl_points_sprites.html
浏览文件 @ 977ed480
......@@ -46,8 +46,7 @@
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var container, stats;
var camera, scene, renderer, particles, geometry, materials = [], parameters, i, h, color, sprite, size;
var camera, scene, renderer, stats, materials = [], parameters;
var mouseX = 0, mouseY = 0;
var windowHalfX = window.innerWidth / 2;
......@@ -58,54 +57,53 @@
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.z = 1000;
scene = new THREE.Scene();
scene.fog = new THREE.FogExp2( 0x000000, 0.0008 );
geometry = new THREE.Geometry();
var geometry = new THREE.BufferGeometry();
var vertices = [];
var textureLoader = new THREE.TextureLoader();
var sprite1 = textureLoader.load( "textures/sprites/snowflake1.png" );
var sprite2 = textureLoader.load( "textures/sprites/snowflake2.png" );
var sprite3 = textureLoader.load( "textures/sprites/snowflake3.png" );
var sprite4 = textureLoader.load( "textures/sprites/snowflake4.png" );
var sprite5 = textureLoader.load( "textures/sprites/snowflake5.png" );
var sprite1 = textureLoader.load( 'textures/sprites/snowflake1.png' );
var sprite2 = textureLoader.load( 'textures/sprites/snowflake2.png' );
var sprite3 = textureLoader.load( 'textures/sprites/snowflake3.png' );
var sprite4 = textureLoader.load( 'textures/sprites/snowflake4.png' );
var sprite5 = textureLoader.load( 'textures/sprites/snowflake5.png' );
for ( i = 0; i < 10000; i ++ ) {
var vertex = new THREE.Vector3();
vertex.x = Math.random() * 2000 - 1000;
vertex.y = Math.random() * 2000 - 1000;
vertex.z = Math.random() * 2000 - 1000;
var x = Math.random() * 2000 - 1000;
var y = Math.random() * 2000 - 1000;
var z = Math.random() * 2000 - 1000;
geometry.vertices.push( vertex );
vertices.push( x, y, z );
}
geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
parameters = [
[ [1.0, 0.2, 0.5], sprite2, 20 ],
[ [0.95, 0.1, 0.5], sprite3, 15 ],
[ [0.90, 0.05, 0.5], sprite1, 10 ],
[ [0.85, 0, 0.5], sprite5, 8 ],
[ [0.80, 0, 0.5], sprite4, 5 ]
[ [ 1.0, 0.2, 0.5 ], sprite2, 20 ],
[ [ 0.95, 0.1, 0.5 ], sprite3, 15 ],
[ [ 0.90, 0.05, 0.5 ], sprite1, 10 ],
[ [ 0.85, 0, 0.5 ], sprite5, 8 ],
[ [ 0.80, 0, 0.5 ], sprite4, 5 ]
];
for ( i = 0; i < parameters.length; i ++ ) {
for ( var i = 0; i < parameters.length; i ++ ) {
color = parameters[i][0];
sprite = parameters[i][1];
size = parameters[i][2];
var color = parameters[ i ][ 0 ];
var sprite = parameters[ i ][ 1 ];
var size = parameters[ i ][ 2 ];
materials[i] = new THREE.PointsMaterial( { size: size, map: sprite, blending: THREE.AdditiveBlending, depthTest: false, transparent : true } );
materials[i].color.setHSL( color[0], color[1], color[2] );
materials[ i ] = new THREE.PointsMaterial( { size: size, map: sprite, blending: THREE.AdditiveBlending, depthTest: false, transparent : true } );
materials[ i ].color.setHSL( color[ 0 ], color[ 1 ], color[ 2 ] );
particles = new THREE.Points( geometry, materials[i] );
var particles = new THREE.Points( geometry, materials[i] );
particles.rotation.x = Math.random() * 6;
particles.rotation.y = Math.random() * 6;
......@@ -118,10 +116,10 @@
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
document.body.appendChild( renderer.domElement );
stats = new Stats();
container.appendChild( stats.dom );
document.body.appendChild( stats.dom );
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
document.addEventListener( 'touchstart', onDocumentTouchStart, false );
......@@ -198,7 +196,7 @@
camera.lookAt( scene.position );
for ( i = 0; i < scene.children.length; i ++ ) {
for ( var i = 0; i < scene.children.length; i ++ ) {
var object = scene.children[ i ];
......@@ -210,12 +208,12 @@
}
for ( i = 0; i < materials.length; i ++ ) {
for ( var i = 0; i < materials.length; i ++ ) {
color = parameters[i][0];
var color = parameters[ i ][ 0 ];
h = ( 360 * ( color[0] + time ) % 360 ) / 360;
materials[i].color.setHSL( h, color[1], color[2] );
var h = ( 360 * ( color[ 0 ] + time ) % 360 ) / 360;
materials[ i ].color.setHSL( h, color[ 1 ], color[ 2 ] );
}
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或