提交 2afd6457 编写于 作者: 林炳权

Merge branch 'dev' of https://github.com/mrdoob/three.js into dev

......@@ -19,7 +19,7 @@ Please also include a live example if possible. You can start from these templat
##### Three.js version
- [ ] Dev
- [ ] r97
- [ ] r98
- [ ] ...
##### Browser
......
......@@ -185,7 +185,7 @@
} );
var REVISION = '98dev';
var REVISION = '98';
var MOUSE = { LEFT: 0, MIDDLE: 1, RIGHT: 2 };
var CullFaceNone = 0;
var CullFaceBack = 1;
......@@ -6166,7 +6166,7 @@
var background_frag = "uniform sampler2D t2D;\nvarying vec2 vUv;\nvoid main() {\n\tgl_FragColor = texture2D( t2D, vUv );\n}\n";
var background_vert = "varying vec2 vUv;\nvoid main() {\n\tvUv = uv;\n\tgl_Position = vec4( position, 1.0 );\n\tgl_Position.z = 1.0;\n}\n";
var background_vert = "varying vec2 vUv;\nuniform mat3 uvTransform;\nvoid main() {\n\tvUv = ( uvTransform * vec3( uv, 1 ) ).xy;\n\tgl_Position = vec4( position, 1.0 );\n\tgl_Position.z = 1.0;\n}\n";
var cube_frag = "uniform samplerCube tCube;\nuniform float tFlip;\nuniform float opacity;\nvarying vec3 vWorldDirection;\nvoid main() {\n\tgl_FragColor = textureCube( tCube, vec3( tFlip * vWorldDirection.x, vWorldDirection.yz ) );\n\tgl_FragColor.a *= opacity;\n}\n";
......@@ -7400,6 +7400,7 @@
background: {
uniforms: {
uvTransform: { value: new Matrix3() },
t2D: { value: null },
},
......@@ -14624,6 +14625,7 @@
boxMesh = new Mesh(
new BoxBufferGeometry( 1, 1, 1 ),
new ShaderMaterial( {
type: 'BackgroundCubeMaterial',
uniforms: UniformsUtils.clone( ShaderLib.cube.uniforms ),
vertexShader: ShaderLib.cube.vertexShader,
fragmentShader: ShaderLib.cube.fragmentShader,
......@@ -14660,6 +14662,7 @@
planeMesh = new Mesh(
new PlaneBufferGeometry( 2, 2 ),
new ShaderMaterial( {
type: 'BackgroundMaterial',
uniforms: UniformsUtils.clone( ShaderLib.background.uniforms ),
vertexShader: ShaderLib.background.vertexShader,
fragmentShader: ShaderLib.background.fragmentShader,
......@@ -14678,6 +14681,14 @@
planeMesh.material.uniforms.t2D.value = background;
if ( background.matrixAutoUpdate === true ) {
background.updateMatrix();
}
planeMesh.material.uniforms.uvTransform.value.copy( background.matrix );
// push to the pre-sorted opaque render list
renderList.push( planeMesh, planeMesh.geometry, planeMesh.material, 0, null );
......@@ -33933,8 +33944,8 @@
if ( onError ) onError( error );
scope.manager.itemEnd( url );
scope.manager.itemError( url );
scope.manager.itemEnd( url );
}, 0 );
......@@ -33993,8 +34004,8 @@
}
scope.manager.itemEnd( url );
scope.manager.itemError( url );
scope.manager.itemEnd( url );
}
......@@ -34026,8 +34037,8 @@
}
scope.manager.itemEnd( url );
scope.manager.itemError( url );
scope.manager.itemEnd( url );
}, false );
......@@ -34044,8 +34055,8 @@
}
scope.manager.itemEnd( url );
scope.manager.itemError( url );
scope.manager.itemEnd( url );
}, false );
......@@ -34324,11 +34335,11 @@
if ( ! texData ) return;
if ( undefined !== texData.image ) {
if ( texData.image !== undefined ) {
texture.image = texData.image;
} else if ( undefined !== texData.data ) {
} else if ( texData.data !== undefined ) {
texture.image.width = texData.width;
texture.image.height = texData.height;
......@@ -34336,32 +34347,32 @@
}
texture.wrapS = undefined !== texData.wrapS ? texData.wrapS : ClampToEdgeWrapping;
texture.wrapT = undefined !== texData.wrapT ? texData.wrapT : ClampToEdgeWrapping;
texture.wrapS = texData.wrapS !== undefined ? texData.wrapS : ClampToEdgeWrapping;
texture.wrapT = texData.wrapT !== undefined ? texData.wrapT : ClampToEdgeWrapping;
texture.magFilter = undefined !== texData.magFilter ? texData.magFilter : LinearFilter;
texture.minFilter = undefined !== texData.minFilter ? texData.minFilter : LinearMipMapLinearFilter;
texture.magFilter = texData.magFilter !== undefined ? texData.magFilter : LinearFilter;
texture.minFilter = texData.minFilter !== undefined ? texData.minFilter : LinearMipMapLinearFilter;
texture.anisotropy = undefined !== texData.anisotropy ? texData.anisotropy : 1;
texture.anisotropy = texData.anisotropy !== undefined ? texData.anisotropy : 1;
if ( undefined !== texData.format ) {
if ( texData.format !== undefined ) {
texture.format = texData.format;
}
if ( undefined !== texData.type ) {
if ( texData.type !== undefined ) {
texture.type = texData.type;
}
if ( undefined !== texData.mipmaps ) {
if ( texData.mipmaps !== undefined ) {
texture.mipmaps = texData.mipmaps;
}
if ( 1 === texData.mipmapCount ) {
if ( texData.mipmapCount === 1 ) {
texture.minFilter = LinearFilter;
......@@ -34452,8 +34463,8 @@
if ( onError ) onError( event );
scope.manager.itemEnd( url );
scope.manager.itemError( url );
scope.manager.itemEnd( url );
}
......@@ -38861,6 +38872,7 @@
parseMaterials: function ( json, textures ) {
var cache = {}; // MultiMaterial
var materials = {};
if ( json !== undefined ) {
......@@ -38880,7 +38892,15 @@
for ( var j = 0; j < data.materials.length; j ++ ) {
array.push( loader.parse( data.materials[ j ] ) );
var material = data.materials[ j ];
if ( cache[ material.uuid ] === undefined ) {
cache[ material.uuid ] = loader.parse( material );
}
array.push( cache[ material.uuid ] );
}
......@@ -38889,6 +38909,7 @@
} else {
materials[ data.uuid ] = loader.parse( data );
cache[ data.uuid ] = materials[ data.uuid ];
}
......@@ -38935,8 +38956,8 @@
}, undefined, function () {
scope.manager.itemEnd( url );
scope.manager.itemError( url );
scope.manager.itemEnd( url );
} );
......@@ -39466,8 +39487,8 @@
if ( onError ) onError( e );
scope.manager.itemEnd( url );
scope.manager.itemError( url );
scope.manager.itemEnd( url );
} );
......@@ -40233,6 +40254,77 @@
CubeCamera.prototype = Object.create( Object3D.prototype );
CubeCamera.prototype.constructor = CubeCamera;
/**
* @author alteredq / http://alteredqualia.com/
*/
function Clock( autoStart ) {
this.autoStart = ( autoStart !== undefined ) ? autoStart : true;
this.startTime = 0;
this.oldTime = 0;
this.elapsedTime = 0;
this.running = false;
}
Object.assign( Clock.prototype, {
start: function () {
this.startTime = ( typeof performance === 'undefined' ? Date : performance ).now(); // see #10732
this.oldTime = this.startTime;
this.elapsedTime = 0;
this.running = true;
},
stop: function () {
this.getElapsedTime();
this.running = false;
this.autoStart = false;
},
getElapsedTime: function () {
this.getDelta();
return this.elapsedTime;
},
getDelta: function () {
var diff = 0;
if ( this.autoStart && ! this.running ) {
this.start();
return 0;
}
if ( this.running ) {
var newTime = ( typeof performance === 'undefined' ? Date : performance ).now();
diff = ( newTime - this.oldTime ) / 1000;
this.oldTime = newTime;
this.elapsedTime += diff;
}
return diff;
}
} );
/**
* @author mrdoob / http://mrdoob.com/
*/
......@@ -40250,6 +40342,8 @@
this.filter = null;
this.timeDelta = 0;
}
AudioListener.prototype = Object.assign( Object.create( Object3D.prototype ), {
......@@ -40325,6 +40419,7 @@
var scale = new Vector3();
var orientation = new Vector3();
var clock = new Clock();
return function updateMatrixWorld( force ) {
......@@ -40333,21 +40428,27 @@
var listener = this.context.listener;
var up = this.up;
this.timeDelta = clock.getDelta();
this.matrixWorld.decompose( position, quaternion, scale );
orientation.set( 0, 0, - 1 ).applyQuaternion( quaternion );
if ( listener.positionX ) {
listener.positionX.setValueAtTime( position.x, this.context.currentTime );
listener.positionY.setValueAtTime( position.y, this.context.currentTime );
listener.positionZ.setValueAtTime( position.z, this.context.currentTime );
listener.forwardX.setValueAtTime( orientation.x, this.context.currentTime );
listener.forwardY.setValueAtTime( orientation.y, this.context.currentTime );
listener.forwardZ.setValueAtTime( orientation.z, this.context.currentTime );
listener.upX.setValueAtTime( up.x, this.context.currentTime );
listener.upY.setValueAtTime( up.y, this.context.currentTime );
listener.upZ.setValueAtTime( up.z, this.context.currentTime );
// code path for Chrome (see #14393)
var endTime = this.context.currentTime + this.timeDelta;
listener.positionX.linearRampToValueAtTime( position.x, endTime );
listener.positionY.linearRampToValueAtTime( position.y, endTime );
listener.positionZ.linearRampToValueAtTime( position.z, endTime );
listener.forwardX.linearRampToValueAtTime( orientation.x, endTime );
listener.forwardY.linearRampToValueAtTime( orientation.y, endTime );
listener.forwardZ.linearRampToValueAtTime( orientation.z, endTime );
listener.upX.linearRampToValueAtTime( up.x, endTime );
listener.upY.linearRampToValueAtTime( up.y, endTime );
listener.upZ.linearRampToValueAtTime( up.z, endTime );
} else {
......@@ -40373,6 +40474,7 @@
this.type = 'Audio';
this.listener = listener;
this.context = listener.context;
this.gain = this.context.createGain();
......@@ -40784,8 +40886,25 @@
orientation.set( 0, 0, 1 ).applyQuaternion( quaternion );
panner.setPosition( position.x, position.y, position.z );
panner.setOrientation( orientation.x, orientation.y, orientation.z );
if ( panner.positionX ) {
// code path for Chrome and Firefox (see #14393)
var endTime = this.context.currentTime + this.listener.timeDelta;
panner.positionX.linearRampToValueAtTime( position.x, endTime );
panner.positionY.linearRampToValueAtTime( position.y, endTime );
panner.positionZ.linearRampToValueAtTime( position.z, endTime );
panner.orientationX.linearRampToValueAtTime( orientation.x, endTime );
panner.orientationY.linearRampToValueAtTime( orientation.y, endTime );
panner.orientationZ.linearRampToValueAtTime( orientation.z, endTime );
} else {
panner.setPosition( position.x, position.y, position.z );
panner.setOrientation( orientation.x, orientation.y, orientation.z );
}
};
......@@ -43821,77 +43940,6 @@
} );
/**
* @author alteredq / http://alteredqualia.com/
*/
function Clock( autoStart ) {
this.autoStart = ( autoStart !== undefined ) ? autoStart : true;
this.startTime = 0;
this.oldTime = 0;
this.elapsedTime = 0;
this.running = false;
}
Object.assign( Clock.prototype, {
start: function () {
this.startTime = ( typeof performance === 'undefined' ? Date : performance ).now(); // see #10732
this.oldTime = this.startTime;
this.elapsedTime = 0;
this.running = true;
},
stop: function () {
this.getElapsedTime();
this.running = false;
this.autoStart = false;
},
getElapsedTime: function () {
this.getDelta();
return this.elapsedTime;
},
getDelta: function () {
var diff = 0;
if ( this.autoStart && ! this.running ) {
this.start();
return 0;
}
if ( this.running ) {
var newTime = ( typeof performance === 'undefined' ? Date : performance ).now();
diff = ( newTime - this.oldTime ) / 1000;
this.oldTime = newTime;
this.elapsedTime += diff;
}
return diff;
}
} );
/**
* @author bhouston / http://clara.io
* @author WestLangley / http://github.com/WestLangley
......@@ -44825,7 +44873,7 @@
/*
var distanceGeometry = new THREE.IcosahedronGeometry( 1, 2 );
var distanceGeometry = new THREE.IcosahedronBufferGeometry( 1, 2 );
var distanceMaterial = new THREE.MeshBasicMaterial( { color: hexColor, fog: false, wireframe: true, opacity: 0.1, transparent: true } );
this.lightSphere = new THREE.Mesh( bulbGeometry, bulbMaterial );
因为 它太大了无法显示 source diff 。你可以改为 查看blob
......@@ -179,7 +179,7 @@ Object.assign( EventDispatcher.prototype, {
} );
var REVISION = '98dev';
var REVISION = '98';
var MOUSE = { LEFT: 0, MIDDLE: 1, RIGHT: 2 };
var CullFaceNone = 0;
var CullFaceBack = 1;
......@@ -6160,7 +6160,7 @@ var worldpos_vertex = "#if defined( USE_ENVMAP ) || defined( DISTANCE ) || defin
var background_frag = "uniform sampler2D t2D;\nvarying vec2 vUv;\nvoid main() {\n\tgl_FragColor = texture2D( t2D, vUv );\n}\n";
var background_vert = "varying vec2 vUv;\nvoid main() {\n\tvUv = uv;\n\tgl_Position = vec4( position, 1.0 );\n\tgl_Position.z = 1.0;\n}\n";
var background_vert = "varying vec2 vUv;\nuniform mat3 uvTransform;\nvoid main() {\n\tvUv = ( uvTransform * vec3( uv, 1 ) ).xy;\n\tgl_Position = vec4( position, 1.0 );\n\tgl_Position.z = 1.0;\n}\n";
var cube_frag = "uniform samplerCube tCube;\nuniform float tFlip;\nuniform float opacity;\nvarying vec3 vWorldDirection;\nvoid main() {\n\tgl_FragColor = textureCube( tCube, vec3( tFlip * vWorldDirection.x, vWorldDirection.yz ) );\n\tgl_FragColor.a *= opacity;\n}\n";
......@@ -7394,6 +7394,7 @@ var ShaderLib = {
background: {
uniforms: {
uvTransform: { value: new Matrix3() },
t2D: { value: null },
},
......@@ -14618,6 +14619,7 @@ function WebGLBackground( renderer, state, objects, premultipliedAlpha ) {
boxMesh = new Mesh(
new BoxBufferGeometry( 1, 1, 1 ),
new ShaderMaterial( {
type: 'BackgroundCubeMaterial',
uniforms: UniformsUtils.clone( ShaderLib.cube.uniforms ),
vertexShader: ShaderLib.cube.vertexShader,
fragmentShader: ShaderLib.cube.fragmentShader,
......@@ -14654,6 +14656,7 @@ function WebGLBackground( renderer, state, objects, premultipliedAlpha ) {
planeMesh = new Mesh(
new PlaneBufferGeometry( 2, 2 ),
new ShaderMaterial( {
type: 'BackgroundMaterial',
uniforms: UniformsUtils.clone( ShaderLib.background.uniforms ),
vertexShader: ShaderLib.background.vertexShader,
fragmentShader: ShaderLib.background.fragmentShader,
......@@ -14672,6 +14675,14 @@ function WebGLBackground( renderer, state, objects, premultipliedAlpha ) {
planeMesh.material.uniforms.t2D.value = background;
if ( background.matrixAutoUpdate === true ) {
background.updateMatrix();
}
planeMesh.material.uniforms.uvTransform.value.copy( background.matrix );
// push to the pre-sorted opaque render list
renderList.push( planeMesh, planeMesh.geometry, planeMesh.material, 0, null );
......@@ -33927,8 +33938,8 @@ Object.assign( FileLoader.prototype, {
if ( onError ) onError( error );
scope.manager.itemEnd( url );
scope.manager.itemError( url );
scope.manager.itemEnd( url );
}, 0 );
......@@ -33987,8 +33998,8 @@ Object.assign( FileLoader.prototype, {
}
scope.manager.itemEnd( url );
scope.manager.itemError( url );
scope.manager.itemEnd( url );
}
......@@ -34020,8 +34031,8 @@ Object.assign( FileLoader.prototype, {
}
scope.manager.itemEnd( url );
scope.manager.itemError( url );
scope.manager.itemEnd( url );
}, false );
......@@ -34038,8 +34049,8 @@ Object.assign( FileLoader.prototype, {
}
scope.manager.itemEnd( url );
scope.manager.itemError( url );
scope.manager.itemEnd( url );
}, false );
......@@ -34318,11 +34329,11 @@ Object.assign( DataTextureLoader.prototype, {
if ( ! texData ) return;
if ( undefined !== texData.image ) {
if ( texData.image !== undefined ) {
texture.image = texData.image;
} else if ( undefined !== texData.data ) {
} else if ( texData.data !== undefined ) {
texture.image.width = texData.width;
texture.image.height = texData.height;
......@@ -34330,32 +34341,32 @@ Object.assign( DataTextureLoader.prototype, {
}
texture.wrapS = undefined !== texData.wrapS ? texData.wrapS : ClampToEdgeWrapping;
texture.wrapT = undefined !== texData.wrapT ? texData.wrapT : ClampToEdgeWrapping;
texture.wrapS = texData.wrapS !== undefined ? texData.wrapS : ClampToEdgeWrapping;
texture.wrapT = texData.wrapT !== undefined ? texData.wrapT : ClampToEdgeWrapping;
texture.magFilter = undefined !== texData.magFilter ? texData.magFilter : LinearFilter;
texture.minFilter = undefined !== texData.minFilter ? texData.minFilter : LinearMipMapLinearFilter;
texture.magFilter = texData.magFilter !== undefined ? texData.magFilter : LinearFilter;
texture.minFilter = texData.minFilter !== undefined ? texData.minFilter : LinearMipMapLinearFilter;
texture.anisotropy = undefined !== texData.anisotropy ? texData.anisotropy : 1;
texture.anisotropy = texData.anisotropy !== undefined ? texData.anisotropy : 1;
if ( undefined !== texData.format ) {
if ( texData.format !== undefined ) {
texture.format = texData.format;
}
if ( undefined !== texData.type ) {
if ( texData.type !== undefined ) {
texture.type = texData.type;
}
if ( undefined !== texData.mipmaps ) {
if ( texData.mipmaps !== undefined ) {
texture.mipmaps = texData.mipmaps;
}
if ( 1 === texData.mipmapCount ) {
if ( texData.mipmapCount === 1 ) {
texture.minFilter = LinearFilter;
......@@ -34446,8 +34457,8 @@ Object.assign( ImageLoader.prototype, {
if ( onError ) onError( event );
scope.manager.itemEnd( url );
scope.manager.itemError( url );
scope.manager.itemEnd( url );
}
......@@ -38855,6 +38866,7 @@ Object.assign( ObjectLoader.prototype, {
parseMaterials: function ( json, textures ) {
var cache = {}; // MultiMaterial
var materials = {};
if ( json !== undefined ) {
......@@ -38874,7 +38886,15 @@ Object.assign( ObjectLoader.prototype, {
for ( var j = 0; j < data.materials.length; j ++ ) {
array.push( loader.parse( data.materials[ j ] ) );
var material = data.materials[ j ];
if ( cache[ material.uuid ] === undefined ) {
cache[ material.uuid ] = loader.parse( material );
}
array.push( cache[ material.uuid ] );
}
......@@ -38883,6 +38903,7 @@ Object.assign( ObjectLoader.prototype, {
} else {
materials[ data.uuid ] = loader.parse( data );
cache[ data.uuid ] = materials[ data.uuid ];
}
......@@ -38929,8 +38950,8 @@ Object.assign( ObjectLoader.prototype, {
}, undefined, function () {
scope.manager.itemEnd( url );
scope.manager.itemError( url );
scope.manager.itemEnd( url );
} );
......@@ -39460,8 +39481,8 @@ ImageBitmapLoader.prototype = {
if ( onError ) onError( e );
scope.manager.itemEnd( url );
scope.manager.itemError( url );
scope.manager.itemEnd( url );
} );
......@@ -40227,6 +40248,77 @@ function CubeCamera( near, far, cubeResolution, options ) {
CubeCamera.prototype = Object.create( Object3D.prototype );
CubeCamera.prototype.constructor = CubeCamera;
/**
* @author alteredq / http://alteredqualia.com/
*/
function Clock( autoStart ) {
this.autoStart = ( autoStart !== undefined ) ? autoStart : true;
this.startTime = 0;
this.oldTime = 0;
this.elapsedTime = 0;
this.running = false;
}
Object.assign( Clock.prototype, {
start: function () {
this.startTime = ( typeof performance === 'undefined' ? Date : performance ).now(); // see #10732
this.oldTime = this.startTime;
this.elapsedTime = 0;
this.running = true;
},
stop: function () {
this.getElapsedTime();
this.running = false;
this.autoStart = false;
},
getElapsedTime: function () {
this.getDelta();
return this.elapsedTime;
},
getDelta: function () {
var diff = 0;
if ( this.autoStart && ! this.running ) {
this.start();
return 0;
}
if ( this.running ) {
var newTime = ( typeof performance === 'undefined' ? Date : performance ).now();
diff = ( newTime - this.oldTime ) / 1000;
this.oldTime = newTime;
this.elapsedTime += diff;
}
return diff;
}
} );
/**
* @author mrdoob / http://mrdoob.com/
*/
......@@ -40244,6 +40336,8 @@ function AudioListener() {
this.filter = null;
this.timeDelta = 0;
}
AudioListener.prototype = Object.assign( Object.create( Object3D.prototype ), {
......@@ -40319,6 +40413,7 @@ AudioListener.prototype = Object.assign( Object.create( Object3D.prototype ), {
var scale = new Vector3();
var orientation = new Vector3();
var clock = new Clock();
return function updateMatrixWorld( force ) {
......@@ -40327,21 +40422,27 @@ AudioListener.prototype = Object.assign( Object.create( Object3D.prototype ), {
var listener = this.context.listener;
var up = this.up;
this.timeDelta = clock.getDelta();
this.matrixWorld.decompose( position, quaternion, scale );
orientation.set( 0, 0, - 1 ).applyQuaternion( quaternion );
if ( listener.positionX ) {
listener.positionX.setValueAtTime( position.x, this.context.currentTime );
listener.positionY.setValueAtTime( position.y, this.context.currentTime );
listener.positionZ.setValueAtTime( position.z, this.context.currentTime );
listener.forwardX.setValueAtTime( orientation.x, this.context.currentTime );
listener.forwardY.setValueAtTime( orientation.y, this.context.currentTime );
listener.forwardZ.setValueAtTime( orientation.z, this.context.currentTime );
listener.upX.setValueAtTime( up.x, this.context.currentTime );
listener.upY.setValueAtTime( up.y, this.context.currentTime );
listener.upZ.setValueAtTime( up.z, this.context.currentTime );
// code path for Chrome (see #14393)
var endTime = this.context.currentTime + this.timeDelta;
listener.positionX.linearRampToValueAtTime( position.x, endTime );
listener.positionY.linearRampToValueAtTime( position.y, endTime );
listener.positionZ.linearRampToValueAtTime( position.z, endTime );
listener.forwardX.linearRampToValueAtTime( orientation.x, endTime );
listener.forwardY.linearRampToValueAtTime( orientation.y, endTime );
listener.forwardZ.linearRampToValueAtTime( orientation.z, endTime );
listener.upX.linearRampToValueAtTime( up.x, endTime );
listener.upY.linearRampToValueAtTime( up.y, endTime );
listener.upZ.linearRampToValueAtTime( up.z, endTime );
} else {
......@@ -40367,6 +40468,7 @@ function Audio( listener ) {
this.type = 'Audio';
this.listener = listener;
this.context = listener.context;
this.gain = this.context.createGain();
......@@ -40778,8 +40880,25 @@ PositionalAudio.prototype = Object.assign( Object.create( Audio.prototype ), {
orientation.set( 0, 0, 1 ).applyQuaternion( quaternion );
panner.setPosition( position.x, position.y, position.z );
panner.setOrientation( orientation.x, orientation.y, orientation.z );
if ( panner.positionX ) {
// code path for Chrome and Firefox (see #14393)
var endTime = this.context.currentTime + this.listener.timeDelta;
panner.positionX.linearRampToValueAtTime( position.x, endTime );
panner.positionY.linearRampToValueAtTime( position.y, endTime );
panner.positionZ.linearRampToValueAtTime( position.z, endTime );
panner.orientationX.linearRampToValueAtTime( orientation.x, endTime );
panner.orientationY.linearRampToValueAtTime( orientation.y, endTime );
panner.orientationZ.linearRampToValueAtTime( orientation.z, endTime );
} else {
panner.setPosition( position.x, position.y, position.z );
panner.setOrientation( orientation.x, orientation.y, orientation.z );
}
};
......@@ -43815,77 +43934,6 @@ Object.assign( Raycaster.prototype, {
} );
/**
* @author alteredq / http://alteredqualia.com/
*/
function Clock( autoStart ) {
this.autoStart = ( autoStart !== undefined ) ? autoStart : true;
this.startTime = 0;
this.oldTime = 0;
this.elapsedTime = 0;
this.running = false;
}
Object.assign( Clock.prototype, {
start: function () {
this.startTime = ( typeof performance === 'undefined' ? Date : performance ).now(); // see #10732
this.oldTime = this.startTime;
this.elapsedTime = 0;
this.running = true;
},
stop: function () {
this.getElapsedTime();
this.running = false;
this.autoStart = false;
},
getElapsedTime: function () {
this.getDelta();
return this.elapsedTime;
},
getDelta: function () {
var diff = 0;
if ( this.autoStart && ! this.running ) {
this.start();
return 0;
}
if ( this.running ) {
var newTime = ( typeof performance === 'undefined' ? Date : performance ).now();
diff = ( newTime - this.oldTime ) / 1000;
this.oldTime = newTime;
this.elapsedTime += diff;
}
return diff;
}
} );
/**
* @author bhouston / http://clara.io
* @author WestLangley / http://github.com/WestLangley
......@@ -44819,7 +44867,7 @@ function PointLightHelper( light, sphereSize, color ) {
/*
var distanceGeometry = new THREE.IcosahedronGeometry( 1, 2 );
var distanceGeometry = new THREE.IcosahedronBufferGeometry( 1, 2 );
var distanceMaterial = new THREE.MeshBasicMaterial( { color: hexColor, fog: false, wireframe: true, opacity: 0.1, transparent: true } );
this.lightSphere = new THREE.Mesh( bulbGeometry, bulbMaterial );
......@@ -73,12 +73,15 @@
<p>Whether playback can be controlled using the [page:Audio.play play](),
[page:Audio.pause pause]() etc. methods. Default is *true*.</p>
<h3>[property:Number playbackRate]</h3>
<p>Speed of playback. Default is *1*.</p>
<h3>[property:Boolean isPlaying]</h3>
<p>Whether the audio is currently playing.</p>
<h3>[property:AudioListener listener]</h3>
<p>A reference to the listener object of this audio.</p>
<h3>[property:Number playbackRate]</h3>
<p>Speed of playback. Default is *1*.</p>
<h3>[property:Number startTime]</h3>
<p>The time at which the sound should begin to play. Same as the *when* paramter of [link:https://developer.mozilla.org/en-US/docs/Web/API/AudioBufferSourceNode/start AudioBufferSourceNode.start](). Default is *0*.</p>
......
......@@ -67,6 +67,8 @@
<h3>[property:AudioNode filter]</h3>
<p>Default is *null*.</p>
<h3>[property:Number timeDelta]</h3>
<p>Time delta value for audio entities. Use in context of [link:https://developer.mozilla.org/en-US/docs/Web/API/AudioParam/linearRampToValueAtTime AudioParam.linearRampToValueAtTimeDefault](). Default is *0*.</p>
<h2>Methods</h2>
......
......@@ -18,8 +18,7 @@
<h2>Example</h2>
<p>
[example:webgl_loader_json WebGL / loader / json]<br />
[example:webgl_loader_json_objconverter WebGL / loader / json / objconverter]
[example:webgl_loader_json WebGL / loader / json]
</p>
<code>
......
......@@ -18,7 +18,6 @@
<div>
[example:webgl_sprites WebGL / sprites]<br />
[example:misc_ubiquity_test misc / ubiquity / test]<br />
[example:misc_ubiquity_test2 misc / ubiquity / test2]<br />
[example:software_sandbox software / sandbox]<br />
[example:svg_sandbox svg / sandbox]<br />
[example:webgl_materials_cubemap_dynamic webgl / materials / cubemap / dynamic]
......
......@@ -78,6 +78,9 @@
<h3>[property:Boolean isPlaying]</h3>
<p>是否正在播放</p>
<h3>[property:AudioListener listener]</h3>
<p>A reference to the listener object of this audio.</p>
<h3>[property:Number startTime]</h3>
<p>开始播放的时间. 和[link:https://developer.mozilla.org/en-US/docs/Web/API/AudioBufferSourceNode/start AudioBufferSourceNode.start]()的*when*参数一样. 默认为 *0*.</p>
......
......@@ -66,6 +66,8 @@
<h3>[property:AudioNode filter]</h3>
<p>默认为*null*.</p>
<h3>[property:Number timeDelta]</h3>
<p>Time delta value for audio entities. Use in context of [link:https://developer.mozilla.org/en-US/docs/Web/API/AudioParam/linearRampToValueAtTime AudioParam.linearRampToValueAtTimeDefault](). Default is *0*.</p>
<h2>方法</h2>
......
......@@ -10,19 +10,19 @@
<body>
[page:PerspectiveCamera] &rarr;
<h1>阵列摄像机([name])</h1>
<h1>摄像机阵列([name])</h1>
<p class="desc">
[name] 可以被用来更加高效地用一组已经预定义好的摄像机来渲染一个场景。 这对于VR场景的渲染来说,是非常重要的一个性能体现<br />
一个 [name] 的实例中总是包含着一组子摄像机,应当为每一个子摄像机定义*bound*(边界)这个属性,属性决定了由该子摄像机所渲染的视口区域的大小。
[name] 用于更加高效地使用一组已经预定义的摄像机来渲染一个场景。这将能够更好地提升VR场景的渲染性能<br />
一个 [name] 的实例中总是包含着一组子摄像机,应当为每一个子摄像机定义*bound*(边界)这个属性,这一属性决定了由该子摄像机所渲染的视口区域的大小。
</p>
<h2>示例</h2>
<p>[example:webgl_camera_array camera / array ]</p>
<h2>构造</h2>
<h2>构造函数</h2>
<h3>[name]( [param:Array array] )</h3>
<p>
......@@ -35,7 +35,7 @@
<h3>[property:Array cameras]</h3>
<p>
摄像机组。
摄像机组。
</p>
<h2>方法</h2>
......
......@@ -191,7 +191,7 @@
<h2>资源</h2>
<h2>源代码</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
......
......@@ -78,7 +78,7 @@
</p>
<h2>资源</h2>
<h2>源代码</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
......
......@@ -96,7 +96,7 @@
<p>传入一个需要转换的 [page:Geometry] 实例。</p>
<h2>资源</h2>
<h2>源代码</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
......
......@@ -93,7 +93,7 @@ car.start();
</p>
<h2>资源</h2>
<h2>源代码</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
......
......@@ -123,7 +123,7 @@ scene.add( new THREE.Mesh( geometry, material ) );
<p>将参数指定的 Face3 对象的数据拷贝到当前对象。</p>
<h2>资源</h2>
<h2>源代码</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
......
......@@ -327,7 +327,7 @@
</p>
<h2>资源</h2>
<h2>源代码</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
......
......@@ -37,7 +37,7 @@
<h2>方法</h2>
<p>继承方法详见 [page:BufferAttribute]。</p>
<h2>资源</h2>
<h2>源代码</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
......
......@@ -43,7 +43,7 @@
</p>
<h2>资源</h2>
<h2>源代码</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
......
......@@ -41,7 +41,7 @@
继承方法详见 [page:InterleavedBuffer]。
</p>
<h2>资源</h2>
<h2>源代码</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
......
......@@ -112,7 +112,7 @@
克隆当前 [name]。
</p>
<h2>资源</h2>
<h2>源代码</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
......
......@@ -94,7 +94,7 @@
<h3>[method:null setXYZW]( [param:Integer index], [param:Float x], [param:Float y], [param:Float z], [param:Float w] ) </h3>
<p>通过给定参数,设置指定索引矢量的第一、二、三、四个元素 (X Y Z 和 W 值)。</p>
<h2>资源</h2>
<h2>源代码</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
......
......@@ -75,7 +75,7 @@
根据参数切换对象所属图层。
</p>
<h2>资源</h2>
<h2>源代码</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
......
......@@ -206,7 +206,7 @@
该方法的使用示例详见 [example:webgldeferred_animation WebGL deferred animation]。
</p>
<h2>资源</h2>
<h2>源代码</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
......
......@@ -49,7 +49,7 @@
继承方法详见 [page:BufferAttribute]。
<h2>资源</h2>
<h2>源代码</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/core/BufferAttribute.js src/core/BufferAttribute.js]
</body>
......
......@@ -13,7 +13,7 @@
<h1>多面几何体([name])</h1>
<p class="desc">
多面体在三维空间中具有一些平面的立体图形。这个类将一个顶点数组投射到一个球面上,之后将它们细分为所需的细节级别。
多面体在三维空间中具有一些平面的立体图形。这个类将一个顶点数组投射到一个球面上,之后将它们细分为所需的细节级别。
</p>
<h2>示例</h2>
......
......@@ -18,7 +18,6 @@
<div>
[example:webgl_sprites WebGL / sprites]<br />
[example:misc_ubiquity_test misc / ubiquity / test]<br />
[example:misc_ubiquity_test2 misc / ubiquity / test2]<br />
[example:software_sandbox software / sandbox]<br />
[example:svg_sandbox svg / sandbox]<br />
[example:webgl_materials_cubemap_dynamic webgl / materials / cubemap / dynamic]
......
......@@ -10,67 +10,67 @@
<body>
[page:Texture] &rarr;
<h1>[name]</h1>
<h1>Canvas纹理([name])</h1>
<p class="desc">
Creates a texture from a canvas element.<br /><br />
从Canvas元素中创建纹理贴图。<br /><br />
This is almost the same as the base [page:Texture Texture] class, except that it sets [page:Texture.needsUpdate needsUpdate] to *true* immediately.
它几乎与其基类[page:Texture Texture]相同,但它直接将[page:Texture.needsUpdate needsUpdate](需要更新)设置为了*true*。
</p>
<h2>Constructor</h2>
<h2>构造函数</h2>
<h3>[name]( [param:HTMLElement canvas], [param:Constant mapping], [param:Constant wrapS], [param:Constant wrapT], [param:Constant magFilter], [param:Constant minFilter], [param:Constant format], [param:Constant type], [param:Number anisotropy] )</h3>
<p>
[page:HTMLElement canvas] -- The HTML canvas element from which to load the texture. <br />
[page:HTMLElement canvas] -- 将会被用于加载纹理贴图的Canvas元素。<br />
[page:Constant mapping] -- How the image is applied to the object. An object type of [page:Textures THREE.UVMapping].
See [page:Textures mapping constants] for other choices.<br />
[page:Constant mapping] -- 纹理贴图将被如何应用(映射)到物体上,它是[page:Textures THREE.UVMapping]中的对象类型。
请参阅[page:Textures mapping constants](映射模式常量)来了解其他选项。<br />
[page:Constant wrapS] -- The default is [page:Textures THREE.ClampToEdgeWrapping].
See [page:Textures wrap mode constants] for other choices.<br />
[page:Constant wrapS] -- 默认值是[page:Textures THREE.ClampToEdgeWrapping].
请参阅[page:Textures wrap mode constants](包裹模式常量)来了解其他选项。<br />
[page:Constant wrapT] -- The default is [page:Textures THREE.ClampToEdgeWrapping].
See [page:Textures wrap mode constants] for other choices.<br />
[page:Constant wrapT] -- 默认值是[page:Textures THREE.ClampToEdgeWrapping].
请参阅[page:Textures wrap mode constants](包裹模式常量)来了解其他选项。<br />
[page:Constant magFilter] -- How the texture is sampled when a texel covers more than one pixel.
The default is [page:Textures THREE.LinearFilter]. See [page:Textures magnification filter constants] for other choices.<br />
[page:Constant magFilter] -- 当一个纹素覆盖大于一个像素时,贴图将如何采样。
其默认值为[page:Textures THREE.LinearFilter]。请参阅[page:Textures magnification filter constants](放大滤镜常量)来了解其它选项。<br />
[page:Constant minFilter] -- How the texture is sampled when a texel covers less than one pixel.
The default is [page:Textures THREE.LinearMipMapLinearFilter]. See [page:Textures minification filter constants] for other choices.<br />
[page:Constant minFilter] -- 当一个纹素覆盖小于一个像素时,贴图将如何采样。
其默认值为[page:Textures THREE.LinearMipMapLinearFilter]。请参阅[page:Textures minification filter constants](缩小滤镜常量)来了解其它选项。<br />
[page:Constant format] -- The format used in the texture.
See [page:Textures format constants] for other choices.<br />
[page:Constant format] -- 在纹理贴图中使用的格式。
请参阅[page:Textures format constants](格式常量)来了解各个选项。<br />
[page:Constant type] -- Default is [page:Textures THREE.UnsignedByteType].
See [page:Textures type constants] for other choices.<br />
[page:Constant type] -- 默认值是[page:Textures THREE.UnsignedByteType].
请参阅[page:Textures type constants](类型常量)来了解其他选项。<br />
[page:Number anisotropy] -- The number of samples taken along the axis through the pixel that has the highest density of texels.
By default, this value is 1. A higher value gives a less blurry result than a basic mipmap, at the cost of more texture samples being used.
Use [page:WebGLrenderer.getMaxAnisotropy renderer.getMaxAnisotropy]() to find the maximum valid anisotropy value for the GPU; this value is usually a power of 2.<br /><br />
[page:Number anisotropy] -- 沿着轴,通过具有最高纹素密度的像素的样本数。
默认情况下,这个值为1。设置一个较高的值将会产生比基本的mipmap更清晰的效果,代价是需要使用更多纹理样本。
使用[page:WebGLrenderer.getMaxAnisotropy renderer.getMaxAnisotropy]() 来查询GPU中各向异性的最大有效值;这个值通常是2的幂。<br /><br />
</p>
<h2>Properties</h2>
<h2>属性</h2>
<p>
See the base [page:Texture Texture] class for common properties.
请参阅其基类[page:Texture Texture]来了解共有属性。
</p>
<h3>[property:boolean needsUpdate]</h3>
<p>
True by default. This is required so that the canvas data is loaded.
默认值为true,这是必须的,以便使得Canvas中的数据能够载入。
</p>
<h2>Methods</h2>
<h2>方法</h2>
<p>
See the base [page:Texture Texture] class for common methods.
请参阅[page:Texture Texture]来了解共有方法。
</p>
<h2>Source</h2>
<h2>源代码</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
......
......@@ -10,78 +10,78 @@
<body>
[page:Texture] &rarr;
<h1>[name]</h1>
<h1>压缩的纹理([name])</h1>
<p class="desc">
Creates a texture based on data in compressed form, for example from a [link:https://en.wikipedia.org/wiki/DirectDraw_Surface DDS] file.<br /><br />
基于被压缩的数据,创建一个纹理贴图,例如从一个[link:https://en.wikipedia.org/wiki/DirectDraw_Surface DDS]文件中。<br /><br />
For use with the [page:CompressedTextureLoader CompressedTextureLoader].
它和[page:CompressedTextureLoader CompressedTextureLoader]一起使用。
</p>
<h2>Constructor</h2>
<h2>构造函数</h2>
<h3>[name]( [param:Array mipmaps], [param:Number width], [param:Number height], [param:Constant format], [param:Constant type], [param:Constant mapping], [param:Constant wrapS], [param:Constant wrapT], [param:Constant magFilter], [param:Constant minFilter], [param:Number anisotropy] )</h3>
<p>
[page:Array mipmaps] -- The mipmaps array should contain objects with data, width and height. The mipmaps should be of the correct format and type.<br />
[page:Array mipmaps] -- mipmaps数组中需要包含具有数据、宽、高的对象。mipmaps应当具有正确的格式与类型。<br />
[page:Number width] -- The width of the biggest mipmap.<br />
[page:Number width] -- 最大的mipmap的宽。<br />
[page:Number height] -- The height of the biggest mipmap.<br />
[page:Number height] -- 最大的mipmap的高。<br />
[page:Constant format] -- The format used in the mipmaps.
See [page:Textures ST3C Compressed Texture Formats],
[page:Textures PVRTC Compressed Texture Formats] and
[page:Textures ETC Compressed Texture Format] for other choices.<br />
[page:Constant format] -- 在mipmaps中使用的格式。
请参阅[page:Textures ST3C Compressed Texture Formats]、
[page:Textures PVRTC Compressed Texture Formats]
[page:Textures ETC Compressed Texture Format]页面来了解其它选项。<br />
[page:Constant type] -- Default is [page:Textures THREE.UnsignedByteType].
See [page:Textures type constants] for other choices.<br />
[page:Constant type] -- 默认值是[page:Textures THREE.UnsignedByteType]。
请参阅[page:Textures type constants]页面来了解其它选项。<br />
[page:Constant mapping] -- How the image is applied to the object. An object type of [page:Textures THREE.UVMapping].
See [page:Textures mapping constants] for other choices.<br />
[page:Constant mapping] -- 纹理贴图将被如何应用(映射)到物体上,它是[page:Textures THREE.UVMapping]中的对象类型。
请参阅[page:Textures mapping constants](映射模式常量)来了解其他选项。<br />
[page:Constant wrapS] -- The default is [page:Textures THREE.ClampToEdgeWrapping].
See [page:Textures wrap mode constants] for other choices.<br />
[page:Constant wrapS] -- 默认值是[page:Textures THREE.ClampToEdgeWrapping].
请参阅[page:Textures wrap mode constants](包裹模式常量)来了解其他选项。<br />
[page:Constant wrapT] -- The default is [page:Textures THREE.ClampToEdgeWrapping].
See [page:Textures wrap mode constants] for other choices.<br />
[page:Constant wrapT] -- 默认值是[page:Textures THREE.ClampToEdgeWrapping].
请参阅[page:Textures wrap mode constants](包裹模式常量)来了解其他选项。<br />
[page:Constant magFilter] -- How the texture is sampled when a texel covers more than one pixel.
The default is [page:Textures THREE.LinearFilter]. See [page:Textures magnification filter constants] for other choices.<br />
[page:Constant magFilter] -- 当一个纹素覆盖大于一个像素时,贴图将如何采样。
其默认值为[page:Textures THREE.LinearFilter]。请参阅[page:Textures magnification filter constants](放大滤镜常量)来了解其它选项。<br />
[page:Constant minFilter] -- How the texture is sampled when a texel covers less than one pixel.
The default is [page:Textures THREE.LinearMipMapLinearFilter]. See [page:Textures minification filter constants] for other choices.<br />
[page:Constant minFilter] -- 当一个纹素覆盖小于一个像素时,贴图将如何采样。
其默认值为[page:Textures THREE.LinearMipMapLinearFilter]。请参阅[page:Textures minification filter constants](缩小滤镜常量)来了解其它选项。<br />
[page:Number anisotropy] -- The number of samples taken along the axis through the pixel that has the highest density of texels.
By default, this value is 1. A higher value gives a less blurry result than a basic mipmap, at the cost of more texture samples being used.
Use renderer.getMaxAnisotropy() to find the maximum valid anisotropy value for the GPU; this value is usually a power of 2.<br /><br />
[page:Number anisotropy] -- 沿着轴,通过具有最高纹素密度的像素的样本数。
默认情况下,这个值为1。设置一个较高的值将会产生比基本的mipmap更清晰的效果,代价是需要使用更多纹理样本。
使用[page:WebGLrenderer.getMaxAnisotropy renderer.getMaxAnisotropy]() 来查询GPU中各向异性的最大有效值;这个值通常是2的幂。<br /><br />
</p>
<h2>Properties</h2>
<h2>属性</h2>
See the base [page:Texture Texture] class for common properties.
请参阅其基类[page:Texture Texture]来了解共有属性。
<h3>[property:boolean flipY]</h3>
<p>
False by default. Flipping textures does not work for compressed textures.
默认值为false。翻转纹理在压缩的纹理贴图中无法工作。
</p>
<h3>[property:boolean generateMipmaps]</h3>
<p>
False by default. Mipmaps can't be generated for compressed textures
默认值为false。无法为压缩的纹理贴图生成Mipmap。
</p>
<h2>Methods</h2>
<h2>方法</h2>
<h2>Source</h2>
<h2>源代码</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
......
......@@ -10,11 +10,11 @@
<body>
[page:Texture] &rarr;
<h1>[name]</h1>
<h1>立方纹理([name])</h1>
<p class="desc">Creates a cube texture made up of six images.</p>
<p class="desc">创建一个由6张图片所组成的纹理对象。</p>
<h2>Example</h2>
<h2>示例</h2>
<code>
var loader = new THREE.CubeTextureLoader();
......@@ -29,28 +29,27 @@
var material = new THREE.MeshBasicMaterial( { color: 0xffffff, envMap: textureCube } );
</code>
<h2>Constructor</h2>
<h2>构造函数</h2>
<h3>[name]( images, mapping, wrapS, wrapT, magFilter, minFilter, format, type, anisotropy )</h3>
<p>
CubeTexture is almost equivalent in functionality and usage to [page:Texture]. The only differences are that the
images are an array of 6 images as opposed to a single image, and the mapping options are
[page:Textures THREE.CubeReflectionMapping] (default) or [page:Textures THREE.CubeRefractionMapping]
CubeTexture(立方贴图)的功能以及用法几乎和[page:Texture]是相同的。区别在于,CubeTexture中的图像是6个单独的图像所组成的数组,
纹理映射选项为[page:Textures THREE.CubeReflectionMapping](默认值)或[page:Textures THREE.CubeRefractionMapping]。
</p>
<h2>Properties</h2>
<h2>属性</h2>
<h3>See [page:Texture]</h3>
<h3>请参阅[page:Texture]页面。</h3>
<h2>Methods</h2>
<h2>方法</h2>
<h3>See [page:Texture]</h3>
<h3>请参阅[page:Texture]页面。</h3>
<h2>Source</h2>
<h2>源代码</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
......
......@@ -12,39 +12,39 @@
<h1>[name]</h1>
<p class="desc">Creates a three-dimensional texture. This type of texture can only be used with a WebGL 2 rendering context.</p>
<p class="desc">创建一个三维的纹理贴图。这种纹理贴图只能被用于WebGL 2渲染环境中。</p>
<h2>Constructor</h2>
<h2>构造函数</h2>
<h3>[name]( [param:TypedArray data], [param:Number width], [param:Number height], [param:Number depth] )</h3>
<p>
[page:Object data] -- data of the texture.<br />
[page:Object data] -- 纹理的数据。<br />
[page:Number width] -- width of the texture.<br />
[page:Number width] -- 纹理的宽度。<br />
[page:Number height] -- height of the texture.<br />
[page:Number height] -- 纹理的高度。<br />
[page:Number depth] -- depth of the texture.
[page:Number depth] -- 纹理的深度。
</p>
<h2>Example</h2>
<h2>示例</h2>
<div>[example:webgl2_materials_texture3d WebGL2 / materials / texture3d]</div>
<div>[example:webgl2_materials_texture3d_volume WebGL2 / materials / texture3d / volume]</div>
<h2>Properties</h2>
<h2>属性</h2>
<p>
See the base [page:Texture Texture] class for common properties.
请参阅其基类[page:Texture Texture]来了解共有属性。
</p>
<h2>Methods</h2>
<h2>方法</h2>
<p>
See the base [page:Texture Texture] class for common methods.
请参阅其基类[page:Texture Texture]来了解共有方法。
</p>
<h2>Source</h2>
<h2>源代码</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
......
......@@ -10,103 +10,102 @@
<body>
[page:Texture] &rarr;
<h1>[name]</h1>
<h1>深度纹理([name])</h1>
<p class="desc">
Creates a texture for use as a Depth Texture. Require support for the
[link:https://www.khronos.org/registry/webgl/extensions/WEBGL_depth_texture/ WEBGL_depth_texture] extension.
创建一个作为深度纹理贴图来使用的纹理。需要支持[link:https://www.khronos.org/registry/webgl/extensions/WEBGL_depth_texture/ WEBGL_depth_texture]扩展。
</p>
<h2>Example</h2>
<h2>示例</h2>
[example:webgl_depth_texture depth / texture]
<h2>Constructor</h2>
<h2>构造函数</h2>
<h3>[name]( [param:Number width], [param:Number height], [param:Constant type], [param:Constant wrapS], [param:Constant wrapT], [param:Constant magFilter], [param:Constant minFilter], [param:Number anisotropy], [param:Constant format] )</h3>
<p>
[page:Number width] -- width of the texture.<br />
[page:Number width] -- 纹理的宽度。<br />
[page:Number height] -- height of the texture.<br />
[page:Number height] -- 纹理的高度。<br />
[page:Constant type] -- Default is [page:Textures THREE.UnsignedShortType].
See [page:Textures type constants] for other choices.<br />
[page:Constant type] -- 默认值是[page:Textures THREE.UnsignedShortType]。
请参阅[page:Textures type constants](类型常量)来了解其他选项。<br />
[page:Constant mapping] --
See [page:Textures type constants] for details.<br />
请参阅[page:Textures mapping constants](映射模式常量)来了解其他选项。<br />
[page:Constant wrapS] -- The default is [page:Textures THREE.ClampToEdgeWrapping].
See [page:Textures wrap mode constants] for other choices.<br />
[page:Constant wrapS] -- 默认值是[page:Textures THREE.ClampToEdgeWrapping].
请参阅[page:Textures wrap mode constants](包裹模式常量)来了解其他选项。<br />
[page:Constant wrapT] -- The default is [page:Textures THREE.ClampToEdgeWrapping].
See [page:Textures wrap mode constants] for other choices.<br />
[page:Constant wrapT] -- 默认值是[page:Textures THREE.ClampToEdgeWrapping].
请参阅[page:Textures wrap mode constants](包裹模式常量)来了解其他选项。<br />
[page:Constant magFilter] -- How the texture is sampled when a texel covers more than one pixel.
The default is [page:Textures THREE.NearestFilter]. See [page:Textures magnification filter constants] for other choices.<br />
[page:Constant magFilter] -- 当一个纹素覆盖大于一个像素时,贴图将如何采样。
其默认值为[page:Textures THREE.LinearFilter]。请参阅[page:Textures magnification filter constants](放大滤镜常量)来了解其它选项。<br />
[page:Constant minFilter] -- How the texture is sampled when a texel covers less than one pixel.
The default is [page:Textures THREE.NearestFilter]. See [page:Textures minification filter constants] for other choices.<br />
[page:Constant minFilter] -- 当一个纹素覆盖小于一个像素时,贴图将如何采样。
其默认值为[page:Textures THREE.LinearMipMapLinearFilter]。请参阅[page:Textures minification filter constants](缩小滤镜常量)来了解其它选项。<br />
[page:Number anisotropy] -- The number of samples taken along the axis through the pixel that has the highest density of texels.
By default, this value is 1. A higher value gives a less blurry result than a basic mipmap, at the cost of more texture samples being used.
Use [page:WebGLrenderer.getMaxAnisotropy renderer.getMaxAnisotropy]() to find the maximum valid anisotropy value for the GPU; this value is usually a power of 2.<br />
[page:Number anisotropy] -- 沿着轴,通过具有最高纹素密度的像素的样本数。
默认情况下,这个值为1。设置一个较高的值将会产生比基本的mipmap更清晰的效果,代价是需要使用更多纹理样本。
使用[page:WebGLrenderer.getMaxAnisotropy renderer.getMaxAnisotropy]() 来查询GPU中各向异性的最大有效值;这个值通常是2的幂。<br /><br />
[page:Constant format] -- must be either [page:Textures DepthFormat] (default) or [page:Textures DepthStencilFormat].
See [page:Textures format constants] for details.<br />
[page:Constant format] -- 这个值必须是[page:Textures DepthFormat](默认值)或者[page:Textures DepthStencilFormat]。
请参阅[page:Textures format constants](格式常量)来了解详细信息。<br />
</p>
<h2>Properties</h2>
<h2>属性</h2>
<p>
See the base [page:Texture Texture] class for common properties
- the following are also part of the texture class, but have different defaults here.
请参阅其基类[page:Texture Texture]来了解共有属性。
—— 以下属性也是texture类中的一部分,但在这里默认值不同。
</p>
<h3>[page:Texture.format .format]</h3>
<p>
Either [page:Textures DepthFormat] (default) or [page:Textures DepthStencilFormat].
See [page:Textures format constants] for details.<br />
[page:Textures DepthFormat](默认值)或者[page:Textures DepthStencilFormat]中的一个。
请参阅[page:Textures format constants]来了解详细信息。<br />
</p>
<h3>[page:Texture.type .type]</h3>
<p>
Default is [page:Textures THREE.UnsignedShortType].
See [page:Textures format constants] for details.<br />
默认值是[page:Textures THREE.UnsignedShortType]。
请参阅[page:Textures format constants]来了解详细信息。<br />
</p>
<h3>[page:Texture.magFilter .magFilter]</h3>
<p>
How the texture is sampled when a texel covers more than one pixel.
The default is [page:Textures THREE.NearestFilter].
See [page:Textures magnification filter constants] for other choices.
当一个纹素覆盖大于一个像素时,贴图将如何采样。
其默认值为[page:Textures THREE.NearestFilter]。
请参阅[page:Textures magnification filter constants](放大滤镜常量)来了解其他选项。
</p>
<h3>[page:Texture.minFilter .minFilter]</h3>
<p>
How the texture is sampled when a texel covers less than one pixel.
The default is [page:Textures THREE.NearestFilter].
See [page:Textures magnification filter constants] for other choices.
当一个纹素覆盖小于一个像素时,贴图将如何采样。
其默认值为[page:Textures THREE.NearestFilter]。
请参阅[page:Textures minification filter constants](缩小滤镜常量)来了解其他选项。
</p>
<h3>[page:Texture.flipY .flipY]</h3>
<p>
Depth textures do not need to be flipped so this is *false* by default.
深度贴图不需要被翻转,因此其默认值为*false*。
</p>
<h3>[page:Texture.generateMipmaps .generateMipmaps]</h3>
<p>
Depth textures do not use mipmaps.
深度贴图不使用mipmap。
</p>
<h2>Methods</h2>
<h2>方法</h2>
<p>
See the base [page:Texture Texture] class for common methods.
请参阅其基类[page:Texture Texture]来了解共有方法。
</p>
<h2>Source</h2>
<h2>源代码</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
......
......@@ -8,16 +8,16 @@
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
<h1>[name]</h1>
<h1>纹理([name])</h1>
<p class="desc">Create a texture to apply to a surface or as a reflection or refraction map.</p>
<p class="desc">创建一个纹理贴图,将其应用到一个表面,或者作为反射/折射贴图。</p>
<h2>Constructor</h2>
<h2>构造函数</h2>
<h3>[name]( image, mapping, wrapS, wrapT, magFilter, minFilter, format, type, anisotropy, encoding )</h3>
<h2>Example</h2>
<h2>源代码</h2>
<code>
// load a texture, set wrap mode to repeat
......@@ -27,236 +27,233 @@
texture.repeat.set( 4, 4 );
</code>
<h2>Properties</h2>
<h2>属性</h2>
<h3>[property:Integer id]</h3>
<p>
Readonly - unique number for this texture instance.
只读 - 表示该纹理实例的唯一数字。
</p>
<h3>[property:String uuid]</h3>
<p>
[link:http://en.wikipedia.org/wiki/Universally_unique_identifier UUID] of this object instance.
This gets automatically assigned, so this shouldn't be edited.
该对象实例的[link:http://en.wikipedia.org/wiki/Universally_unique_identifier UUID]。
这个值是自动分配的,因此不应当对其进行编辑。
</p>
<h3>[property:String name]</h3>
<p>
Optional name of the object (doesn't need to be unique). Default is an empty string.
该对象的名称,可选,且无需唯一。默认值是一个空字符串。
</p>
<h3>[property:Image image]</h3>
<p>
An image object, typically created using the [page:TextureLoader.load] method.
This can be any image (e.g., PNG, JPG, GIF, DDS) or video (e.g., MP4, OGG/OGV) type supported by three.js.<br /><br />
一个图片对象,通常由[page:TextureLoader.load]方法创建。
该对象可以是被three.js所支持的任意图片(例如PNG、JPG、GIF、DDS)或视频(例如MP4、OGG/OGV)格式。<br /><br />
To use video as a texture you need to have a playing HTML5
video element as a source for your texture image and continuously update this texture
as long as video is playing - the [page:VideoTexture VideoTexture] class handles this automatically.
要使用视频来作为纹理贴图,你需要有一个正在播放的HTML5 Video元素来作为你纹理贴图的源图像,
并在视频播放时不断地更新这个纹理贴图。——[page:VideoTexture VideoTexture] 类会对此自动进行处理。
</p>
<h3>[property:array mipmaps]</h3>
<p>
Array of user-specified mipmaps (optional).
用户所给定的mipmap数组(可选)。
</p>
<h3>[property:number mapping]</h3>
<p>
How the image is applied to the object. An object type of [page:Textures THREE.UVMapping] is the default,
where the U,V coordinates are used to apply the map.<br />
图像将如何应用到物体(对象)上。默认值是[page:Textures THREE.UVMapping]对象类型,
即UV坐标将被用于纹理映射。<br />
See the [page:Textures texture constants] page for other mapping types.
请参阅[page:Textures texture constants](映射模式常量)来了解其他映射类型。
</p>
<h3>[property:number wrapS]</h3>
<p>
This defines how the texture is wrapped horizontally and corresponds to *U* in UV mapping.<br />
The default is [page:Textures THREE.ClampToEdgeWrapping], where the edge is clamped to the outer edge texels.
The other two choices are [page:Textures THREE.RepeatWrapping] and [page:Textures THREE.MirroredRepeatWrapping].
See the [page:Textures texture constants] page for details.
这个值定义了纹理贴图在水平方向上将如何包裹,在UV映射中对应于*U*。<br />
默认值是[page:Textures THREE.ClampToEdgeWrapping],即纹理边缘将被推到外部边缘的纹素。
其它的两个选项分别是[page:Textures THREE.RepeatWrapping]和[page:Textures THREE.MirroredRepeatWrapping]。
请参阅[page:Textures texture constants]来了解详细信息。
</p>
<h3>[property:number wrapT]</h3>
<p>
This defines how the texture is wrapped vertically and corresponds to *V* in UV mapping.<br />
The same choices are available as for [property:number wrapS].<br /><br />
这个值定义了纹理贴图在垂直方向上将如何包裹,在UV映射中对应于*V*。<br />
可以使用与[property:number wrapS]相同的选项。<br /><br />
NOTE: tiling of images in textures only functions if image dimensions are powers of two
(2, 4, 8, 16, 32, 64, 128, 256, 512, 1024, 2048, ...) in terms of pixels.
Individual dimensions need not be equal, but each must be a power of two.
This is a limitation of WebGL, not three.js.
请注意:纹理中图像的平铺,仅有当图像大小(以像素为单位)为2的幂(2、4、8、16、32、64、128、256、512、1024、2048、……)时才起作用。
宽度、高度无需相等,但每个维度的长度必须都是2的幂。
这是WebGL中的限制,不是由three.js所限制的。
</p>
<h3>[property:number magFilter]</h3>
<p>
How the texture is sampled when a texel covers more than one pixel. The default is
[page:Textures THREE.LinearFilter], which takes the four closest texels and bilinearly interpolates among them.
The other option is [page:Textures THREE.NearestFilter], which uses the value of the closest texel.<br />
See the [page:Textures texture constants] page for details.
当一个纹素覆盖大于一个像素时,贴图将如何采样。默认值为[page:Textures THREE.LinearFilter],
它将获取四个最接近的纹素,并在他们之间进行双线性插值。
另一个选项是[page:Textures THREE.NearestFilter],它将使用最接近的纹素的值。<br />
请参阅[page:Textures texture constants]页面来了解详细信息。
</p>
<h3>[property:number minFilter]</h3>
<p>
How the texture is sampled when a texel covers less than one pixel. The default is
[page:Textures THREE.LinearMipMapLinearFilter], which uses mipmapping and a trilinear filter. <br /><br />
当一个纹素覆盖小于一个像素时,贴图将如何采样。默认值为[page:Textures THREE.LinearMipMapLinearFilter],
它将使用mipmapping以及三次线性滤镜。<br /><br />
See the [page:Textures texture constants] page for all possible choices.
请参阅[page:Textures texture constants]页面来了解所有可能的选项。
</p>
<h3>[property:number anisotropy]</h3>
<p>
The number of samples taken along the axis through the pixel that has the highest density of texels.
By default, this value is 1. A higher value gives a less blurry result than a basic mipmap,
at the cost of more texture samples being used. Use [page:WebGLRenderer.getMaxAnisotropy renderer.getMaxAnisotropy]() to
find the maximum valid anisotropy value for the GPU; this value is usually a power of 2.
沿着轴,通过具有最高纹素密度的像素的样本数。
默认情况下,这个值为1。设置一个较高的值将会产生比基本的mipmap更清晰的效果,代价是需要使用更多纹理样本。
使用[page:WebGLrenderer.getMaxAnisotropy renderer.getMaxAnisotropy]() 来查询GPU中各向异性的最大有效值;这个值通常是2的幂。
</p>
<h3>[property:number format]</h3>
<p>
The default is [page:Textures THREE.RGBAFormat], although the [page:TextureLoader TextureLoader] will automatically
set this to [page:Textures THREE.RGBFormat] for JPG images. <br /><br />
默认值为[page:Textures THREE.RGBAFormat],
但[page:TextureLoader TextureLoader]将会在载入JPG图片时自动将这个值设置为[page:Textures THREE.RGBFormat]。<br /><br />
See the [page:Textures texture constants] page for details of other formats.
请参阅[page:Textures texture constants]页面来了解其它格式。
</p>
<h3>[property:number type]</h3>
<p>
This must correspond to the [page:Texture.format .format]. The default is [page:Textures THREE.UnsignedByteType],
which will be used for most texture formats.<br /><br />
这个值必须与[page:Texture.format .format]相对应。默认值为[page:Textures THREE.UnsignedByteType],
它将会被用于绝大多数纹理格式。<br /><br />
See the [page:Textures texture constants] page for details of other formats.
请参阅[page:Textures texture constants]来了解其它格式。
</p>
<h3>[property:Vector2 offset]</h3>
<p>
How much a single repetition of the texture is offset from the beginning, in each direction U and V.
Typical range is *0.0* to *1.0*. _Note:_ The offset property is a convenience modifier and only affects
the Texture's application to the first set of UVs on a model. If the Texture is used as a map requiring
additional UV sets (e.g. the aoMap or lightMap of most stock materials), those UVs must be manually
assigned to achieve the desired offset.
纹理在单次重复时,从一开始将分别在U、V方向上偏移多少。
这个值的范围通常在*0.0*之间*1.0*。
请注意:这一属性是一个非常方便的修改器,仅仅影响纹理对模型上第一组UV的应用。
如果该纹理被用于需要额外的UV集的贴图(例如一些成品材质中的aoMap或lightMap),
这些UV必须被手动调整来实现所期望的偏移。
</p>
<h3>[property:Vector2 repeat]</h3>
<p>
How many times the texture is repeated across the surface, in each direction U and V. If repeat is set
greater than 1 in either direction, the corresponding Wrap parameter should also be set to
[page:Textures THREE.RepeatWrapping] or [page:Textures THREE.MirroredRepeatWrapping] to achieve the desired
tiling effect. _Note:_ The repeat property is a convenience modifier and only affects
the Texture's application to the first set of UVs on a model. If the Texture is used as a map requiring
additional UV sets (e.g. the aoMap or lightMap of most stock materials), those UVs must be manually
assigned to achieve the desired repetiton.
纹理将在表面上,分别在U、V方向重复多少次。如果这个值在任意方向上设置为大于1,
则对应的Wrap参数应当也被设为[page:Textures THREE.RepeatWrapping]或[page:Textures THREE.MirroredRepeatWrapping],
以实现所期望的平铺效果。
请注意:这一属性是一个非常方便的修改器,仅仅影响纹理对模型上第一组UV的应用。
如果该纹理被用于需要额外的UV集的贴图(例如一些成品材质中的aoMap或lightMap),
这些UV必须被手动调整来实现所期望的重复。
</p>
<h3>[property:number rotation]</h3>
<p>
How much the texture is rotated around the center point, in radians. Postive values are counter-clockwise. Default is *0*.
纹理将围绕中心点旋转多少度,单位为弧度(rad)。正值为逆时针方向旋转,默认值为*0*。
</p>
<h3>[property:Vector2 center]</h3>
<p>
The point around which rotation occurs. A value of (0.5, 0.5) corresponds to the center of the texture. Default is (0, 0), the lower left.
旋转中心点。(0.5, 0.5)对应纹理的正中心。默认值为(0,0),即左下角。
</p>
<h3>[property:boolean matrixAutoUpdate]</h3>
<p>
Whether to update the texture's uv-transform [page:Texture.matrix .matrix] from the texture properties [page:Texture.offset .offset], [page:Texture.repeat .repeat],
[page:Texture.rotation .rotation], and [page:Texture.center .center]. True by default.
Set this to false if you are specifying the uv-transform matrix directly.
是否从纹理的[page:Texture.offset .offset]、[page:Texture.repeat .repeat]、[page:Texture.rotation .rotation]和[page:Texture.center .center]属性更新纹理的UV变换矩阵(uv-transform [page:Texture.matrix .matrix])。
默认值为true。
如果你要直接指定纹理的变换矩阵,请将其设为false。
</p>
<h3>[property:Matrix3 matrix]</h3>
<p>
The uv-transform matrix for the texture. Updated by the renderer from the texture properties [page:Texture.offset .offset], [page:Texture.repeat .repeat],
[page:Texture.rotation .rotation], and [page:Texture.center .center] when the texture's [page:Texture.matrixAutoUpdate .matrixAutoUpdate] property is true.
When [page:Texture.matrixAutoUpdate .matrixAutoUpdate] property is false, this matrix may be set manually.
Default is the identity matrix.
纹理的UV变换矩阵。
当纹理的[page:Texture.matrixAutoUpdate .matrixAutoUpdate]属性为true时,
由渲染器从纹理的[page:Texture.offset .offset]、[page:Texture.repeat .repeat]、[page:Texture.rotation .rotation]和[page:Texture.center .center]属性中进行更新。
当[page:Texture.matrixAutoUpdate .matrixAutoUpdate]属性为false时,该矩阵可以被手动设置。
默认值为单位矩阵。
</p>
<h3>[property:boolean generateMipmaps]</h3>
<p>
Whether to generate mipmaps (if possible) for a texture. True by default. Set this to false if you are
creating mipmaps manually.
是否为纹理生成mipmap(如果可用)。默认为true。
如果你手动生成mipmap,请将其设为false。
</p>
<h3>[property:boolean premultiplyAlpha]</h3>
<p>
False by default, which is the norm for PNG images. Set to true if the RGB values have
been stored premultiplied by alpha.
默认为false,这是PNG图像的规范。
如果RGB值已被Alpha预乘,请将其设为true。
</p>
<h3>[property:boolean flipY]</h3>
<p>
True by default. Flips the image's Y axis to match the WebGL texture coordinate space.
默认为true。翻转图像的Y轴以匹配WebGL纹理坐标空间。
</p>
<h3>[property:number unpackAlignment]</h3>
<p>
4 by default. Specifies the alignment requirements for the start of each pixel row in memory.
The allowable values are 1 (byte-alignment), 2 (rows aligned to even-numbered bytes),
4 (word-alignment), and 8 (rows start on double-word boundaries).
See [link:http://www.khronos.org/opengles/sdk/docs/man/xhtml/glPixelStorei.xml glPixelStorei]
for more information.
默认为4。指定内存中每个像素行起点的对齐要求。
允许的值为1(字节对齐)、2(行对齐到偶数字节)、4(字对齐)和8(行从双字边界开始)。
请参阅[link:http://www.khronos.org/opengles/sdk/docs/man/xhtml/glPixelStorei.xml glPixelStorei]来了解详细信息。
</p>
<h3>[property:number encoding]</h3>
<p>
[page:Textures THREE.LinearEncoding] is the default.
See the [page:Textures texture constants] page for details of other formats.<br /><br />
默认值为[page:Textures THREE.LinearEncoding]。
请参阅[page:Textures texture constants]来了解其他格式的详细信息。<br /><br />
Note that if this value is changed on a texture after the material has been used,
it is necessary to trigger a Material.needsUpdate for this value to be realized in the shader.
请注意,如果在材质被使用之后,纹理贴图中这个值发生了改变,
需要触发Material.needsUpdate,来使得这个值在着色器中实现。
</p>
<h3>[property:Integer version]</h3>
<p>
This starts at *0* and counts how many times [property:Boolean needsUpdate] is set to *true*.
这个值起始值为*0*,计算[property:Boolean needsUpdate]被设置为*true*的次数。
</p>
<h3>[property:Function onUpdate]</h3>
<p>
A callback function, called when the texture is updated (e.g., when needsUpdate has been set to true
and then the texture is used).
一个回调函数,在纹理被更新后调用。
(例如,当needsUpdate被设为true且纹理被使用。)
</p>
<h3>[property:Boolean needsUpdate]</h3>
<p>
Set this to *true* to trigger an update next time the texture is used. Particularly important for setting the wrap mode.
将其设置为*true*,以便在下次使用纹理时触发一次更新。
这对于设置包裹模式尤其重要。
</p>
<h2>Methods</h2>
<h2>方法</h2>
<h3>[page:EventDispatcher EventDispatcher] methods are available on this class.</h3>
<h3>[page:EventDispatcher EventDispatcher]方法在这个类上可以使用。</h3>
<h3>[method:null updateMatrix]()</h3>
<p>
Update the texture's uv-transform [page:Texture.matrix .matrix] from the texture properties [page:Texture.offset .offset], [page:Texture.repeat .repeat],
[page:Texture.rotation .rotation], and [page:Texture.center .center].
从纹理的[page:Texture.offset .offset]、[page:Texture.repeat .repeat]、
[page:Texture.rotation .rotation]和[page:Texture.center .center]属性来更新纹理的UV变换矩阵(uv-transform [page:Texture.matrix .matrix])。
</p>
<h3>[method:Texture clone]()</h3>
<p>
Make copy of the texture. Note this is not a "deep copy", the image is shared.
拷贝纹理。请注意。这不是“深拷贝”,图像是共用的。
</p>
<h3>[method:Texture toJSON]( [param:Object meta] )</h3>
<p>
meta -- optional object containing metadata.<br />
Convert the material to three.js JSON format.
meta -- 可选,包含有元数据的对象。<br />
将材质转换为three.js JSON格式。
</p>
<h3>[method:null dispose]()</h3>
<p>
Call [page:EventDispatcher EventDispatcher].dispatchEvent with a 'dispose' event type.
使用“dispose”事件类型调用[page:EventDispatcher EventDispatcher].dispatchEvent。
</p>
<h3>[method:Vector2 transformUv]( [param:Vector2 uv] )</h3>
<p>
Transform the uv based on the value of this texture's [page:Texture.offset .offset], [page:Texture.repeat .repeat],
[page:Texture.wrapS .wrapS], [page:Texture.wrapT .wrapT] and [page:Texture.flipY .flipY] properties.
基于纹理的[page:Texture.offset .offset]、[page:Texture.repeat .repeat]、
[page:Texture.wrapS .wrapS]、[page:Texture.wrapT .wrapT]和[page:Texture.flipY .flipY]属性值来变换uv。
</p>
<h2>Source</h2>
<h2>源代码</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
......
......@@ -10,15 +10,15 @@
<body>
[page:Texture] &rarr;
<h1>[name]</h1>
<h1>视频纹理([name])</h1>
<p class="desc">
Creates a texture for use with a video texture.<br /><br />
创建一个使用视频来作为贴图的纹理对象。<br /><br />
This is almost the same as the base [page:Texture Texture] class, except that it continuosly sets [page:Texture.needsUpdate needsUpdate] to *true* so that the texture is updated as the video plays. Automatic creation of [page:Texture.mipmaps mipmaps] is also disabled.
它和其基类[page:Texture Texture]几乎是相同的,除了它总是将[page:Texture.needsUpdate needsUpdate]设置为*true*,以便使得贴图能够在视频播放时进行更新。自动创建[page:Texture.mipmaps mipmaps]也会被禁用。
</p>
<h2>Example</h2>
<h2>示例</h2>
<p>[example:webgl_materials_video materials / video ]</p>
......@@ -33,63 +33,63 @@ texture.format = THREE.RGBFormat;
</code>
<h2>Constructor</h2>
<h2>构造函数</h2>
<h3>[name]( [param:Video video], [param:Constant mapping], [param:Constant wrapS], [param:Constant wrapT], [param:Constant magFilter], [param:Constant minFilter], [param:Constant format], [param:Constant type], [param:Number anisotropy] )</h3>
<p>
[page:Video video] -- The video element to use as the texture. <br />
[page:Video video] -- 将被作为纹理贴图来使用的Video元素。<br />
[page:Constant mapping] -- How the image is applied to the object. An object type of [page:Textures THREE.UVMapping].
See [page:Textures mapping constants] for other choices.<br />
[page:Constant mapping] -- 纹理贴图将被如何应用(映射)到物体上,它是[page:Textures THREE.UVMapping]中的对象类型。
请参阅[page:Textures mapping constants](映射模式常量)来了解其他选项。<br />
[page:Constant wrapS] -- The default is [page:Textures THREE.ClampToEdgeWrapping].
See [page:Textures wrap mode constants] for other choices.<br />
[page:Constant wrapS] -- 默认值是[page:Textures THREE.ClampToEdgeWrapping].
请参阅[page:Textures wrap mode constants](包裹模式常量)来了解其他选项。<br />
[page:Constant wrapT] -- The default is [page:Textures THREE.ClampToEdgeWrapping].
See [page:Textures wrap mode constants] for other choices.<br />
[page:Constant wrapT] -- 默认值是[page:Textures THREE.ClampToEdgeWrapping].
请参阅[page:Textures wrap mode constants](包裹模式常量)来了解其他选项。<br />
[page:Constant magFilter] -- How the texture is sampled when a texel covers more than one pixel.
The default is [page:Textures THREE.LinearFilter]. See [page:Textures magnification filter constants] for other choices.<br />
[page:Constant magFilter] -- 当一个纹素覆盖大于一个像素时,贴图将如何采样。
其默认值为[page:Textures THREE.LinearFilter]。请参阅[page:Textures magnification filter constants](放大滤镜常量)来了解其它选项。<br />
[page:Constant minFilter] -- How the texture is sampled when a texel covers less than one pixel.
The default is [page:Textures THREE.LinearMipMapLinearFilter]. See [page:Textures minification filter constants] for other choices.<br />
[page:Constant minFilter] -- 当一个纹素覆盖小于一个像素时,贴图将如何采样。
其默认值为[page:Textures THREE.LinearMipMapLinearFilter]。请参阅[page:Textures minification filter constants](缩小滤镜常量)来了解其它选项。<br />
[page:Constant format] -- The format used in the texture.
See [page:Textures format constants] for other choices.<br />
[page:Constant format] -- 在纹理贴图中使用的格式。
请参阅[page:Textures format constants](格式常量)来了解各个选项。<br />
[page:Constant type] -- Default is [page:Textures THREE.UnsignedByteType].
See [page:Textures type constants] for other choices.<br />
[page:Constant type] -- 默认值是[page:Textures THREE.UnsignedByteType].
请参阅[page:Textures type constants](类型常量)来了解其他选项。<br />
[page:Number anisotropy] -- The number of samples taken along the axis through the pixel that has the highest density of texels.
By default, this value is 1. A higher value gives a less blurry result than a basic mipmap, at the cost of more texture samples being used.
Use [page:WebGLrenderer.getMaxAnisotropy renderer.getMaxAnisotropy]() to find the maximum valid anisotropy value for the GPU; this value is usually a power of 2.<br /><br />
[page:Number anisotropy] -- 沿着轴,通过具有最高纹素密度的像素的采样数。
默认情况下,这个值为1。设置一个较高的值将会比基本的mipmap产生更清晰的效果,代价是需要使用更多纹理样本。
使用[page:WebGLrenderer.getMaxAnisotropy renderer.getMaxAnisotropy]() 来查询GPU中各向异性的最大有效值;这个值通常是2的幂。<br /><br />
</p>
<h2>Properties</h2>
<h2>属性</h2>
<p>
See the base [page:Texture Texture] class for common properties.
请参阅其基类[page:Texture Texture]来了解共有属性。
</p>
<h3>[property:boolean needsUpdate]</h3>
<p>
You will not need to set this manually here as it is handled by the [page:VideoTexture.update update] method.
在这里,你不必手动设置这个值,因为它是由[page:VideoTexture.update update]方法来进行控制的。
</p>
<h2>Methods</h2>
<h2>方法</h2>
<p>
See the base [page:Texture Texture] class for common methods.
请参阅其基类[page:Texture Texture]来查看共有方法。
</p>
<h3>[method:null update]()</h3>
<p>
This is called automatically and sets [property:boolean needsUpdate] to *true* every time
a new frame is available.
在每一次新的一帧可用时,这个方法将被自动调用,
并将[property:boolean needsUpdate]设置为*true*。
</p>
<h2>Source</h2>
<h2>源代码</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
......
......@@ -91,7 +91,7 @@
<h3>[method:null load]( [param:String url], [param:Function onLoad], [param:Function onProgress], [param:Function onError] )</h3>
<p>
[page:String url] — A string containing the path/URL of the <em>.svg</em> file.<br />
[page:Function onLoad] — (optional) A function to be called after loading is successfully completed. The function receives the loaded [page:SVGDocument] as an argument.<br />
[page:Function onLoad] — (optional) A function to be called after loading is successfully completed. The function receives an array of [page:ShapePath] as an argument.<br />
[page:Function onProgress] — (optional) A function to be called while the loading is in progress. The argument will be the XMLHttpRequest instance, which contains [page:Integer total] and [page:Integer loaded] bytes.<br />
[page:Function onError] — (optional) A function to be called if an error occurs during loading. The function receives the error as an argument.<br />
</p>
......
......@@ -427,15 +427,15 @@ var list = {
"zh": {
"Manual": {
"手册": {
"Getting Started": {
"起步": {
"创建一个场景": "manual/zh/introduction/Creating-a-scene",
"通过模块来引入": "manual/zh/introduction/Import-via-modules",
"浏览器支持": "manual/zh/introduction/Browser-support",
"WebGL兼容性检查": "manual/zh/introduction/WebGL-compatibility-check",
"如何在本地运行Three.js": "manual/zh/introduction/How-to-run-things-locally",
"How to use WebGL 2": "manual/zh/introduction/How-to-use-WebGL2",
"如何使用WebGL 2": "manual/zh/introduction/How-to-use-WebGL2",
"画线": "manual/zh/introduction/Drawing-lines",
"创建文字": "manual/zh/introduction/Creating-text",
"载入3D模型": "manual/zh/introduction/Loading-3D-models",
......@@ -445,21 +445,22 @@ var list = {
"一些有用的链接": "manual/zh/introduction/Useful-links"
},
"Next Steps": {
"How to update things": "manual/zh/introduction/How-to-update-things",
"Matrix transformations": "manual/zh/introduction/Matrix-transformations",
"Animation system": "manual/zh/introduction/Animation-system"
"进阶": {
"如何更新场景": "manual/zh/introduction/How-to-update-things",
"如何创建VR内容": "manual/zh/introduction/How-to-create-VR-content",
"矩阵变换": "manual/zh/introduction/Matrix-transformations",
"动画系统": "manual/zh/introduction/Animation-system"
},
"Build Tools": {
"Testing with NPM": "manual/zh/buildTools/Testing-with-NPM"
"构建工具": {
"使用NPM进行测试": "manual/zh/buildTools/Testing-with-NPM"
}
},
"Reference": {
"参考": {
"Animation": {
"动画": {
"AnimationAction": "api/zh/animation/AnimationAction",
"AnimationClip": "api/zh/animation/AnimationClip",
"AnimationMixer": "api/zh/animation/AnimationMixer",
......@@ -470,7 +471,7 @@ var list = {
"PropertyMixer": "api/zh/animation/PropertyMixer"
},
"Animation / Tracks": {
"动画 / 轨道": {
"BooleanKeyframeTrack": "api/zh/animation/tracks/BooleanKeyframeTrack",
"ColorKeyframeTrack": "api/zh/animation/tracks/ColorKeyframeTrack",
"NumberKeyframeTrack": "api/zh/animation/tracks/NumberKeyframeTrack",
......@@ -479,7 +480,7 @@ var list = {
"VectorKeyframeTrack": "api/zh/animation/tracks/VectorKeyframeTrack"
},
"Audio": {
"音频": {
"Audio": "api/zh/audio/Audio",
"AudioAnalyser": "api/zh/audio/AudioAnalyser",
"AudioContext": "api/zh/audio/AudioContext",
......@@ -487,7 +488,7 @@ var list = {
"PositionalAudio": "api/zh/audio/PositionalAudio"
},
"Cameras": {
"摄像机": {
"ArrayCamera": "api/zh/cameras/ArrayCamera",
"Camera": "api/zh/cameras/Camera",
"CubeCamera": "api/zh/cameras/CubeCamera",
......@@ -496,7 +497,7 @@ var list = {
"StereoCamera": "api/zh/cameras/StereoCamera"
},
"Constants": {
"常量": {
"Animation": "api/zh/constants/Animation",
"Core": "api/zh/constants/Core",
"CustomBlendingEquation": "api/zh/constants/CustomBlendingEquations",
......@@ -506,7 +507,7 @@ var list = {
"Textures": "api/zh/constants/Textures"
},
"Core": {
"核心": {
"BufferAttribute": "api/zh/core/BufferAttribute",
"BufferGeometry": "api/zh/core/BufferGeometry",
"Clock": "api/zh/core/Clock",
......@@ -525,20 +526,20 @@ var list = {
"Uniform": "api/zh/core/Uniform"
},
"Core / BufferAttributes": {
"核心 / BufferAttributes": {
"BufferAttribute Types": "api/zh/core/bufferAttributeTypes/BufferAttributeTypes"
},
"Deprecated": {
"弃用列表": {
"DeprecatedList": "api/zh/deprecated/DeprecatedList"
},
"Extras": {
"附件": {
"Earcut": "api/zh/extras/Earcut",
"ShapeUtils": "api/zh/extras/ShapeUtils"
},
"Extras / Core": {
"附件 / 核心": {
"Curve": "api/zh/extras/core/Curve",
"CurvePath": "api/zh/extras/core/CurvePath",
"Font": "api/zh/extras/core/Font",
......@@ -548,7 +549,7 @@ var list = {
"ShapePath": "api/zh/extras/core/ShapePath"
},
"Extras / Curves": {
"附件 / 曲线": {
"ArcCurve": "api/zh/extras/curves/ArcCurve",
"CatmullRomCurve3": "api/zh/extras/curves/CatmullRomCurve3",
"CubicBezierCurve": "api/zh/extras/curves/CubicBezierCurve",
......@@ -561,11 +562,11 @@ var list = {
"SplineCurve": "api/zh/extras/curves/SplineCurve"
},
"Extras / Objects": {
"附件 / 物体": {
"ImmediateRenderObject": "api/zh/extras/objects/ImmediateRenderObject",
},
"Geometries": {
"几何体": {
"BoxBufferGeometry": "api/zh/geometries/BoxBufferGeometry",
"BoxGeometry": "api/zh/geometries/BoxGeometry",
"CircleBufferGeometry": "api/zh/geometries/CircleBufferGeometry",
......@@ -610,7 +611,7 @@ var list = {
"WireframeGeometry": "api/zh/geometries/WireframeGeometry"
},
"Helpers": {
"辅助对象": {
"ArrowHelper": "api/zh/helpers/ArrowHelper",
"AxesHelper": "api/zh/helpers/AxesHelper",
"BoxHelper": "api/zh/helpers/BoxHelper",
......@@ -629,7 +630,7 @@ var list = {
"VertexNormalsHelper": "api/zh/helpers/VertexNormalsHelper"
},
"Lights": {
"灯光": {
"AmbientLight": "api/zh/lights/AmbientLight",
"DirectionalLight": "api/zh/lights/DirectionalLight",
"HemisphereLight": "api/zh/lights/HemisphereLight",
......@@ -639,13 +640,13 @@ var list = {
"SpotLight": "api/zh/lights/SpotLight"
},
"Lights / Shadows": {
"灯光 / 阴影": {
"DirectionalLightShadow": "api/zh/lights/shadows/DirectionalLightShadow",
"LightShadow": "api/zh/lights/shadows/LightShadow",
"SpotLightShadow": "api/zh/lights/shadows/SpotLightShadow"
},
"Loaders": {
"加载器": {
"AnimationLoader": "api/zh/loaders/AnimationLoader",
"AudioLoader": "api/zh/loaders/AudioLoader",
"BufferGeometryLoader": "api/zh/loaders/BufferGeometryLoader",
......@@ -665,12 +666,12 @@ var list = {
"TextureLoader": "api/zh/loaders/TextureLoader"
},
"Loaders / Managers": {
"加载器 / 管理器": {
"DefaultLoadingManager": "api/zh/loaders/managers/DefaultLoadingManager",
"LoadingManager": "api/zh/loaders/managers/LoadingManager"
},
"Materials": {
"材质": {
"LineBasicMaterial": "api/zh/materials/LineBasicMaterial",
"LineDashedMaterial": "api/zh/materials/LineDashedMaterial",
"Material": "api/zh/materials/Material",
......@@ -689,7 +690,7 @@ var list = {
"SpriteMaterial": "api/zh/materials/SpriteMaterial"
},
"Math": {
"数学库": {
"Box2": "api/zh/math/Box2",
"Box3": "api/zh/math/Box3",
"Color": "api/zh/math/Color",
......@@ -712,14 +713,14 @@ var list = {
"Vector4": "api/zh/math/Vector4"
},
"Math / Interpolants": {
"数学库 / 插值": {
"CubicInterpolant": "api/zh/math/interpolants/CubicInterpolant",
"DiscreteInterpolant": "api/zh/math/interpolants/DiscreteInterpolant",
"LinearInterpolant": "api/zh/math/interpolants/LinearInterpolant",
"QuaternionLinearInterpolant": "api/zh/math/interpolants/QuaternionLinearInterpolant"
},
"Objects": {
"物体": {
"Bone": "api/zh/objects/Bone",
"Group": "api/zh/objects/Group",
"Line": "api/zh/objects/Line",
......@@ -733,26 +734,26 @@ var list = {
"Sprite": "api/zh/objects/Sprite"
},
"Renderers": {
"渲染器": {
"WebGLRenderer": "api/zh/renderers/WebGLRenderer",
"WebGLRenderTarget": "api/zh/renderers/WebGLRenderTarget",
"WebGLRenderTargetCube": "api/zh/renderers/WebGLRenderTargetCube"
},
"Renderers / Shaders": {
"渲染器 / 着色器": {
"ShaderChunk": "api/zh/renderers/shaders/ShaderChunk",
"ShaderLib": "api/zh/renderers/shaders/ShaderLib",
"UniformsLib": "api/zh/renderers/shaders/UniformsLib",
"UniformsUtils": "api/zh/renderers/shaders/UniformsUtils"
},
"Scenes": {
"场景": {
"Fog": "api/zh/scenes/Fog",
"FogExp2": "api/zh/scenes/FogExp2",
"Scene": "api/zh/scenes/Scene"
},
"Textures": {
"纹理贴图": {
"CanvasTexture": "api/zh/textures/CanvasTexture",
"CompressedTexture": "api/zh/textures/CompressedTexture",
"CubeTexture": "api/zh/textures/CubeTexture",
......@@ -765,25 +766,25 @@ var list = {
},
"Examples": {
"示例": {
"Animations": {
"动画": {
"CCDIKSolver": "examples/animations/CCDIKSolver",
"MMDAnimationHelper": "examples/animations/MMDAnimationHelper",
"MMDPhysics": "examples/animations/MMDPhysics"
},
"Controls": {
"控制": {
"OrbitControls": "examples/controls/OrbitControls"
},
"Geometries": {
"几何体": {
"ConvexBufferGeometry": "examples/geometries/ConvexBufferGeometry",
"ConvexGeometry": "examples/geometries/ConvexGeometry",
"DecalGeometry": "examples/geometries/DecalGeometry"
},
"Loaders": {
"加载器": {
"BabylonLoader": "examples/loaders/BabylonLoader",
"GLTFLoader": "examples/loaders/GLTFLoader",
"MMDLoader": "examples/loaders/MMDLoader",
......@@ -798,16 +799,16 @@ var list = {
"PRWMLoader": "examples/loaders/PRWMLoader"
},
"Objects": {
"物体": {
"Lensflare": "examples/objects/Lensflare",
},
"Exporters": {
"导出器": {
"GLTFExporter": "examples/exporters/GLTFExporter",
"PLYExporter": "examples/exporters/PLYExporter"
},
"Plugins": {
"插件": {
"LookupTable": "examples/Lut",
},
......@@ -819,27 +820,27 @@ var list = {
"VertexList": "examples/quickhull/VertexList"
},
"Renderers": {
"渲染器": {
"CSS2DRenderer": "examples/renderers/CSS2DRenderer",
"CSS3DRenderer": "examples/renderers/CSS3DRenderer",
"SVGRenderer": "examples/renderers/SVGRenderer"
},
"Utils": {
"实用工具": {
"BufferGeometryUtils": "examples/utils/BufferGeometryUtils",
"SceneUtils": "examples/utils/SceneUtils"
}
},
"Developer Reference": {
"开发者参考": {
"Polyfills": {
"差异化支持": {
"Polyfills": "api/zh/Polyfills"
},
"WebGLRenderer": {
"WebGL渲染器": {
"WebGLProgram": "api/zh/renderers/webgl/WebGLProgram",
"WebGLShader": "api/zh/renderers/webgl/WebGLShader",
"WebGLState": "api/zh/renderers/webgl/WebGLState"
......
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<base href="../../../" />
<script src="list.js"></script>
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
<h1>如何创建VR内容([name])</h1>
<br />
<p>
本指南简要介绍了使用three.js来制作的基于Web的VR应用程序的基本组件。
</p>
<h2>工作流程</h2>
<p>
首先,你需要将[link:https://github.com/mrdoob/three.js/blob/master/examples/js/vr/WebVR.js WebVR.js]
包含到你的项目中。
</p>
<code>
&lt;script src="/path/to/WebVR.js"&gt;&lt;/script&gt;
</code>
<p>*WEBVR.createButton()*做了两件重要的事情:首先,它创建了一个按钮,指示了VR的兼容性;
此外,若用户激活了这个按钮,则它将开启一个VR会话。
你所要做的唯一一件事情,便是把下面的这一行代码加入到你的应用程序里。
</p>
<code>
document.body.appendChild( WEBVR.createButton( renderer ) );
</code>
<p>
接下来,你需要告诉你的*WebGLRenderer*实例来启用VR渲染。
</p>
<code>
renderer.vr.enabled = true;
</code>
<p>
最后,你需要调整你的动画循环,因为在这里我们不能使用我们所熟知的
*window.requestAnimationFrame()*函数来更新场景。对于VR项目来说,我们使用的是[page:WebGLRenderer.setAnimationLoop setAnimationLoop]。
简短的示例代码如下:
</p>
<code>
renderer.setAnimationLoop( function () {
renderer.render( scene, camera );
} );
</code>
<h2>接下来的步骤</h2>
<p>
请查看官方示例中与WebVR相关的示例,了解这一工作流程的实际使用、运行情况。
<br /><br />
[example:webvr_ballshooter WebVR / ballshoter]<br />
[example:webvr_cubes WebVR / cubes]<br />
[example:webvr_dragging WebVR / dragging]<br />
[example:webvr_lorenzattractor WebVR / lorenzattractor]<br />
[example:webvr_panorama WebVR / panorama]<br />
[example:webvr_paint WebVR / paint]<br />
[example:webvr_rollercoaster WebVR / rollercoaster]<br />
[example:webvr_sandbox WebVR / sandbox]<br />
[example:webvr_sculpt WebVR / sculpt]<br />
[example:webvr_vive_paint WebVR / vive / paint]<br />
[example:webvr_vive_sculpt WebVR / vive / sculpt]<br />
</p>
</body>
</html>
\ No newline at end of file
......@@ -10,20 +10,19 @@
</head>
<body>
<h1>[name]</h1>
<h1>如何使用WebGL 2([name])</h1>
<br />
<p>
Starting with three.js R95, the engine supports rendering with a WebGL 2 context. By default three.js always uses a
WebGL 1 context when creating an instance of *WebGLRenderer*. If you want use a WebGL 2 context, please have a look
at the following workflow.
从R95版本起,three.js便开始支持使用WebGL 2环境来进行渲染。默认情况下,当创建一个*WebGLRenderer*实例时,
three.js总是使用WebGL 1环境。如果你希望来使用WebGL 2环境,请参阅以下的工作流程。
</p>
<h2>Workflow</h2>
<h2>工作流程</h2>
<p>
Since WebGL 2 is not supported by all devices that support WebGL 1, it's important to check the respective availability.
To do so, please include [link:https://github.com/mrdoob/three.js/blob/master/examples/js/WebGL.js WebGL.js] into your project.
由于WebGL 2并不被所有支持WebGL 1的设备所支持,因此检查各种设备上WebGL 2的可用性是非常重要的。
要对其可用性进行检查,请将[link:https://github.com/mrdoob/three.js/blob/master/examples/js/WebGL.js WebGL.js]包含到你的项目中。
</p>
<code>
......@@ -31,7 +30,7 @@
</code>
<p>
Next, use a code similar to the following in order to perform the availability check.
接下来,使用和下列代码相似的代码来进行可用性检查。
</p>
<code>
......@@ -44,9 +43,8 @@ if ( WEBGL.isWebGL2Available() === false ) {
</code>
<p>
Now it's time to create the renderer by applying the HTML5 canvas element and the respective WebGL 2 context
to the constructor of *WebGLRenderer*. As a result, three.js will internally use the given context for rendering and
automatically convert the built-in material's shader code to GLSL ES 3.00.
现在,你就可以将由*WebGLRenderer*所构造的renderer,应用到HTML5 Canvas元素和对应的WebGL 2绘图环境上了。
最终,three.js将在内部使用所给定的绘图环境来渲染,并自动将内置的材质的着色器代码转化为GLSL ES 3.00。
</p>
<code>
......@@ -56,8 +54,8 @@ var renderer = new THREE.WebGLRenderer( { canvas: canvas, context: context } );
</code>
<p>
Sometimes it is necessary to write custom shader code. Use the following code template as a basis for your own
implementation. First, the GLSL ES 3.00 code.
有时候,写一些自定义着色器也是非常必要的。请使用下列的代码模板作为你自己来进行实现的基础。
首先是GLSL ES 3.00代码。
</p>
<code>
......@@ -85,7 +83,7 @@ void main() {
&lt;/script&gt;
</code>
<p>
Second, the corresponding material creation in JavaScript.
然后是使用JavaScript来创建的对应的材质。
</p>
<code>
var material = new THREE.ShaderMaterial( {
......@@ -94,20 +92,20 @@ var material = new THREE.ShaderMaterial( {
} );
</code>
<h2>Next Steps</h2>
<h2>接下来</h2>
<p>
Have a look at one of the official examples in order to see WebGL 2 features in action.<br /><br />
请参阅官方示例,来看一看WebGL 2各种特性的运行。<br /><br />
[example:webgl2_materials_texture3d WebGL2 / materials / texture3d]<br />
[example:webgl2_materials_texture3d_volume WebGL2 / materials / texture3d / volume]<br />
</p>
<h2>Supported features</h2>
<h2>支持的特性</h2>
<p>
Right now, the engine does only support a subset of all existing WebGL 2 features. The following list provides an
overview about what's already available in the latest version of three.js.
当前,three.js引擎仅支持所有现有的WebGL 2特性的一个子集。
下列列表展现了在最新版本three.js中,已可用的特性的概览。
<ul>
<li>3D Textures</li>
</ul>
......
......@@ -10,6 +10,7 @@ Sidebar.Geometry = function ( editor ) {
var container = new UI.Panel();
container.setBorderTop( '0' );
container.setDisplay( 'none' );
container.setPaddingTop( '20px' );
// Actions
......
......@@ -14,6 +14,7 @@ Sidebar.Material = function ( editor ) {
var container = new UI.Panel();
container.setBorderTop( '0' );
container.setDisplay( 'none' );
container.setPaddingTop( '20px' );
// New / Copy / Paste
......
......@@ -148,7 +148,7 @@ var Strings = function ( config ) {
'sidebar/geometry/sphere_geometry/philength': 'Phi length',
'sidebar/geometry/sphere_geometry/thetastart': 'Theta start',
'sidebar/geometry/sphere_geometry/thetalength': 'Theta length',
'sidebar/geometry/torus_geometry/radius': 'Radius',
'sidebar/geometry/torus_geometry/tube': 'Tube',
'sidebar/geometry/torus_geometry/radialsegments': 'Radial segments',
......@@ -161,7 +161,7 @@ var Strings = function ( config ) {
'sidebar/geometry/torusKnot_geometry/radialsegments': 'Radial segments',
'sidebar/geometry/torusKnot_geometry/p': 'P',
'sidebar/geometry/torusKnot_geometry/q': 'Q',
'sidebar/material/new': 'New',
'sidebar/material/copy': 'Copy',
'sidebar/material/paste': 'Paste',
......@@ -192,7 +192,7 @@ var Strings = function ( config ) {
'sidebar/material/displacemap': 'Displace Map',
'sidebar/material/roughmap': 'Rough. Map',
'sidebar/material/metalmap': 'Metal. Map',
'sidebar/material/specularmap': 'Specular. Map',
'sidebar/material/specularmap': 'Specular Map',
'sidebar/material/envmap': 'Env Map',
'sidebar/material/lightmap': 'Light Map',
'sidebar/material/aomap': 'AO Map',
......@@ -466,7 +466,7 @@ var Strings = function ( config ) {
'sidebar/material/transparent': '透明性',
'sidebar/material/alphatest': 'α测试',
'sidebar/material/wireframe': '线框',
'sidebar/script': '脚本',
'sidebar/script/new': '新建',
'sidebar/script/edit': '编辑',
......
......@@ -189,7 +189,6 @@ var files = {
"webgl_modifier_tessellation",
"webgl_morphtargets",
"webgl_morphtargets_horse",
"webgl_morphtargets_human",
"webgl_morphtargets_sphere",
"webgl_multiple_canvases_circle",
"webgl_multiple_canvases_complex",
......@@ -289,6 +288,7 @@ var files = {
"webgl_buffergeometry_instancing_lambert",
"webgl_buffergeometry_lines",
"webgl_buffergeometry_lines_indexed",
"webgl_buffergeometry_morphtargets",
"webgl_buffergeometry_points",
"webgl_buffergeometry_points_interleaved",
"webgl_buffergeometry_rawshader",
......@@ -354,9 +354,7 @@ var files = {
"misc_exporter_obj",
"misc_exporter_stl",
"misc_fps",
"misc_lights_test",
"misc_lookat",
"misc_ubiquity_test2",
"misc_uv_tests"
],
"css3d": [
......
THREE.UCSCharacter = function () {
var scope = this;
var mesh;
this.scale = 1;
this.root = new THREE.Object3D();
this.numSkins = undefined;
this.numMorphs = undefined;
this.skins = [];
this.materials = [];
this.morphs = [];
this.mixer = new THREE.AnimationMixer( this.root );
this.onLoadComplete = function () {};
this.loadCounter = 0;
this.loadParts = function ( config ) {
this.numSkins = config.skins.length;
this.numMorphs = config.morphs.length;
// Character geometry + number of skins
this.loadCounter = 1 + config.skins.length;
// SKINS
this.skins = loadTextures( config.baseUrl + "skins/", config.skins );
this.materials = createMaterials( this.skins );
// MORPHS
this.morphs = config.morphs;
// CHARACTER
var loader = new THREE.JSONLoader();
console.log( config.baseUrl + config.character );
loader.load( config.baseUrl + config.character, function ( geometry ) {
geometry.computeBoundingBox();
geometry.computeVertexNormals();
mesh = new THREE.SkinnedMesh( geometry, [] );
mesh.name = config.character;
scope.root.add( mesh );
var bb = geometry.boundingBox;
scope.root.scale.set( config.s, config.s, config.s );
scope.root.position.set( config.x, config.y - bb.min.y * config.s, config.z );
mesh.castShadow = true;
mesh.receiveShadow = true;
scope.mixer.clipAction( geometry.animations[ 0 ], mesh ).play();
scope.setSkin( 0 );
scope.checkLoadComplete();
} );
};
this.setSkin = function ( index ) {
if ( mesh && scope.materials ) {
mesh.material = scope.materials[ index ];
}
};
this.updateMorphs = function ( influences ) {
if ( mesh ) {
for ( var i = 0; i < scope.numMorphs; i ++ ) {
mesh.morphTargetInfluences[ i ] = influences[ scope.morphs[ i ] ] / 100;
}
}
};
function loadTextures( baseUrl, textureUrls ) {
var textureLoader = new THREE.TextureLoader();
var textures = [];
for ( var i = 0; i < textureUrls.length; i ++ ) {
textures[ i ] = textureLoader.load( baseUrl + textureUrls[ i ], scope.checkLoadComplete );
textures[ i ].mapping = THREE.UVMapping;
textures[ i ].name = textureUrls[ i ];
}
return textures;
}
function createMaterials( skins ) {
var materials = [];
for ( var i = 0; i < skins.length; i ++ ) {
materials[ i ] = new THREE.MeshLambertMaterial( {
color: 0xeeeeee,
specular: 10.0,
map: skins[ i ],
skinning: true,
morphTargets: true
} );
}
return materials;
}
this.checkLoadComplete = function () {
scope.loadCounter -= 1;
if ( scope.loadCounter === 0 ) {
scope.onLoadComplete();
}
};
};
......@@ -11,7 +11,7 @@
// Unlike TrackballControls, it maintains the "up" direction object.up (+Y by default).
// This is very similar to OrbitControls, another set of touch behavior
//
// Orbit - right mouse, or left mouse + ctrl/metaKey / touch: two-finger rotate
// Orbit - right mouse, or left mouse + ctrl/meta/shiftKey / touch: two-finger rotate
// Zoom - middle mouse, or mousewheel / touch: two-finger spread or squish
// Pan - left mouse, or arrow keys / touch: one-finger move
......@@ -777,7 +777,7 @@ THREE.MapControls = function ( object, domElement ) {
case scope.mouseButtons.LEFT:
if ( event.ctrlKey || event.metaKey ) {
if ( event.ctrlKey || event.metaKey || event.shiftKey ) {
if ( scope.enableRotate === false ) return;
......
......@@ -11,7 +11,7 @@
//
// Orbit - left mouse / touch: one-finger move
// Zoom - middle mouse, or mousewheel / touch: two-finger spread or squish
// Pan - right mouse, or left mouse + ctrl/metaKey, or arrow keys / touch: two-finger move
// Pan - right mouse, or left mouse + ctrl/meta/shiftKey, or arrow keys / touch: two-finger move
THREE.OrbitControls = function ( object, domElement ) {
......@@ -679,7 +679,7 @@ THREE.OrbitControls = function ( object, domElement ) {
case scope.mouseButtons.LEFT:
if ( event.ctrlKey || event.metaKey ) {
if ( event.ctrlKey || event.metaKey || event.shiftKey ) {
if ( scope.enablePan === false ) return;
......
......@@ -15,17 +15,18 @@
* @param v2 Corner index +X, +Z.
* @param v3 Corner index +X, -Z.
*/
function hilbert2D( center, size, iterations, v0, v1, v2, v3 ) {
// Default Vars
var center = undefined !== center ? center : new THREE.Vector3( 0, 0, 0 ),
size = undefined !== size ? size : 10,
var center = center !== undefined ? center : new THREE.Vector3( 0, 0, 0 ),
size = size !== undefined ? size : 10,
half = size / 2,
iterations = undefined !== iterations ? iterations : 1,
v0 = undefined !== v0 ? v0 : 0,
v1 = undefined !== v1 ? v1 : 1,
v2 = undefined !== v2 ? v2 : 2,
v3 = undefined !== v3 ? v3 : 3
iterations = iterations !== undefined ? iterations : 1,
v0 = v0 !== undefined ? v0 : 0,
v1 = v1 !== undefined ? v1 : 1,
v2 = v2 !== undefined ? v2 : 2,
v3 = v3 !== undefined ? v3 : 3
;
var vec_s = [
......
......@@ -7,11 +7,6 @@
* @author Thomas Diewald
* @link http://www.openprocessing.org/visuals/?visualID=15599
*
* Based on `examples/canvas_lines_colors.html`:
* @author OpenShift guest
* @link https://github.com/mrdoob/three.js/blob/8413a860aa95ed29c79cbb7f857c97d7880d260f/examples/canvas_lines_colors.html
* @see Line 149 - 186
*
* @param center Center of Hilbert curve.
* @param size Total width of Hilbert curve.
* @param iterations Number of subdivisions.
......@@ -24,21 +19,22 @@
* @param v6 Corner index +X, +Y, +Z.
* @param v7 Corner index +X, +Y, -Z.
*/
function hilbert3D( center, size, iterations, v0, v1, v2, v3, v4, v5, v6, v7 ) {
// Default Vars
var center = undefined !== center ? center : new THREE.Vector3( 0, 0, 0 ),
size = undefined !== size ? size : 10,
var center = center !== undefined ? center : new THREE.Vector3( 0, 0, 0 ),
size = size !== undefined ? size : 10,
half = size / 2,
iterations = undefined !== iterations ? iterations : 1,
v0 = undefined !== v0 ? v0 : 0,
v1 = undefined !== v1 ? v1 : 1,
v2 = undefined !== v2 ? v2 : 2,
v3 = undefined !== v3 ? v3 : 3,
v4 = undefined !== v4 ? v4 : 4,
v5 = undefined !== v5 ? v5 : 5,
v6 = undefined !== v6 ? v6 : 6,
v7 = undefined !== v7 ? v7 : 7
iterations = iterations !== undefined ? iterations : 1,
v0 = v0 !== undefined ? v0 : 0,
v1 = v1 !== undefined ? v1 : 1,
v2 = v2 !== undefined ? v2 : 2,
v3 = v3 !== undefined ? v3 : 3,
v4 = v4 !== undefined ? v4 : 4,
v5 = v5 !== undefined ? v5 : 5,
v6 = v6 !== undefined ? v6 : 6,
v7 = v7 !== undefined ? v7 : 7
;
var vec_s = [
......
......@@ -84,18 +84,19 @@ THREE.DRACOLoader.prototype = {
},
/**
* |attributeUniqueIdMap| specifies attribute unique id for an attribute in
* the geometry to be decoded. The name of the attribute must be one of the
* supported attribute type in Three.JS, including:
* 'position',
* 'color',
* 'normal',
* 'uv',
* 'uv2',
* 'skinIndex',
* 'skinWeight'.
* The format is:
* attributeUniqueIdMap[attributeName] = attributeId
* Decompresses a Draco buffer. Names of attributes (for ID and type maps)
* must be one of the supported three.js types, including: position, color,
* normal, uv, uv2, skinIndex, skinWeight.
*
* @param {ArrayBuffer} rawBuffer
* @param {Function} callback
* @param {Object|undefined} attributeUniqueIdMap Provides a pre-defined ID
* for each attribute in the geometry to be decoded. If given,
* `attributeTypeMap` is required and `nativeAttributeMap` will be
* ignored.
* @param {Object|undefined} attributeTypeMap Provides a predefined data
* type (as a typed array constructor) for each attribute in the
* geometry to be decoded.
*/
decodeDracoFile: function(rawBuffer, callback, attributeUniqueIdMap,
attributeTypeMap) {
......@@ -103,7 +104,7 @@ THREE.DRACOLoader.prototype = {
THREE.DRACOLoader.getDecoderModule()
.then( function ( module ) {
scope.decodeDracoFileInternal( rawBuffer, module.decoder, callback,
attributeUniqueIdMap || {}, attributeTypeMap || {});
attributeUniqueIdMap, attributeTypeMap);
});
},
......@@ -231,6 +232,7 @@ THREE.DRACOLoader.prototype = {
convertDracoGeometryTo3JS: function(dracoDecoder, decoder, geometryType,
buffer, attributeUniqueIdMap,
attributeTypeMap) {
// TODO: Should not assume native Draco attribute IDs apply.
if (this.getAttributeOptions('position').skipDequantization === true) {
decoder.SkipAttributeTransform(dracoDecoder.POSITION);
}
......@@ -278,6 +280,7 @@ THREE.DRACOLoader.prototype = {
}
// Verify if there is position attribute.
// TODO: Should not assume native Draco attribute IDs apply.
var posAttId = decoder.GetAttributeId(dracoGeometry,
dracoDecoder.POSITION);
if (posAttId == -1) {
......@@ -294,11 +297,23 @@ THREE.DRACOLoader.prototype = {
// Import data to Three JS geometry.
var geometry = new THREE.BufferGeometry();
// Add native Draco attribute type to geometry.
for (var attributeName in this.nativeAttributeMap) {
// The native attribute type is only used when no unique Id is
// provided. For example, loading .drc files.
if (attributeUniqueIdMap[attributeName] === undefined) {
// Do not use both the native attribute map and a provided (e.g. glTF) map.
if ( attributeUniqueIdMap ) {
// Add attributes of user specified unique id. E.g. GLTF models.
for (var attributeName in attributeUniqueIdMap) {
var attributeType = attributeTypeMap[attributeName];
var attributeId = attributeUniqueIdMap[attributeName];
var attribute = decoder.GetAttributeByUniqueId(dracoGeometry,
attributeId);
this.addAttributeToGeometry(dracoDecoder, decoder, dracoGeometry,
attributeName, attributeType, attribute, geometry, geometryBuffer);
}
} else {
// Add native Draco attribute type to geometry.
for (var attributeName in this.nativeAttributeMap) {
var attId = decoder.GetAttributeId(dracoGeometry,
dracoDecoder[this.nativeAttributeMap[attributeName]]);
if (attId !== -1) {
......@@ -310,16 +325,7 @@ THREE.DRACOLoader.prototype = {
attributeName, Float32Array, attribute, geometry, geometryBuffer);
}
}
}
// Add attributes of user specified unique id. E.g. GLTF models.
for (var attributeName in attributeUniqueIdMap) {
var attributeType = attributeTypeMap[attributeName] || Float32Array;
var attributeId = attributeUniqueIdMap[attributeName];
var attribute = decoder.GetAttributeByUniqueId(dracoGeometry,
attributeId);
this.addAttributeToGeometry(dracoDecoder, decoder, dracoGeometry,
attributeName, attributeType, attribute, geometry, geometryBuffer);
}
// For mesh, we need to generate the faces.
......@@ -354,6 +360,9 @@ THREE.DRACOLoader.prototype = {
THREE.Uint32BufferAttribute : THREE.Uint16BufferAttribute)
(geometryBuffer.indices, 1));
}
// TODO: Should not assume native Draco attribute IDs apply.
// TODO: Can other attribute types be quantized?
var posTransform = new dracoDecoder.AttributeQuantizationTransform();
if (posTransform.InitFromAttribute(posAttribute)) {
// Quantized attribute. Store the quantization parameters into the
......
......@@ -58,8 +58,8 @@ THREE.GLTFLoader = ( function () {
}
scope.manager.itemEnd( url );
scope.manager.itemError( url );
scope.manager.itemEnd( url );
};
......@@ -508,6 +508,7 @@ THREE.GLTFLoader = ( function () {
this.name = EXTENSIONS.KHR_DRACO_MESH_COMPRESSION;
this.json = json;
this.dracoLoader = dracoLoader;
THREE.DRACOLoader.getDecoderModule();
}
......@@ -1186,16 +1187,10 @@ THREE.GLTFLoader = ( function () {
POSITION: 'position',
NORMAL: 'normal',
TEXCOORD_0: 'uv',
TEXCOORD0: 'uv', // deprecated
TEXCOORD: 'uv', // deprecated
TEXCOORD_1: 'uv2',
COLOR_0: 'color',
COLOR0: 'color', // deprecated
COLOR: 'color', // deprecated
WEIGHTS_0: 'skinWeight',
WEIGHT: 'skinWeight', // deprecated
JOINTS_0: 'skinIndex',
JOINT: 'skinIndex' // deprecated
};
var PATH_PROPERTIES = {
......@@ -1346,6 +1341,7 @@ THREE.GLTFLoader = ( function () {
if ( hasMorphPosition ) {
// TODO: Error-prone use of a callback inside a loop.
var accessor = target.POSITION !== undefined
? parser.getDependency( 'accessor', target.POSITION )
.then( function ( accessor ) {
......@@ -1360,6 +1356,7 @@ THREE.GLTFLoader = ( function () {
if ( hasMorphNormal ) {
// TODO: Error-prone use of a callback inside a loop.
var accessor = target.NORMAL !== undefined
? parser.getDependency( 'accessor', target.NORMAL )
.then( function ( accessor ) {
......@@ -1504,6 +1501,17 @@ THREE.GLTFLoader = ( function () {
function isPrimitiveEqual( a, b ) {
var dracoExtA = a.extensions ? a.extensions[ EXTENSIONS.KHR_DRACO_MESH_COMPRESSION ] : undefined;
var dracoExtB = b.extensions ? b.extensions[ EXTENSIONS.KHR_DRACO_MESH_COMPRESSION ] : undefined;
if ( dracoExtA && dracoExtB ) {
if ( dracoExtA.bufferView !== dracoExtB.bufferView ) return false;
return isObjectEqual( dracoExtA.attributes, dracoExtB.attributes );
}
if ( a.indices !== b.indices ) {
return false;
......@@ -1632,6 +1640,7 @@ THREE.GLTFLoader = ( function () {
if ( primitive0.mode !== primitive.mode ) return false;
if ( primitive.indices === undefined ) return false;
if ( primitive.extensions && primitive.extensions[ EXTENSIONS.KHR_DRACO_MESH_COMPRESSION ] ) return false;
if ( ! isObjectEqual( primitive0.attributes, primitive.attributes ) ) return false;
var targets = primitive.targets || [];
......@@ -1886,6 +1895,7 @@ THREE.GLTFLoader = ( function () {
var type = types[ i ];
var value = this.getDependencies( type );
// TODO: Error-prone use of a callback inside a loop.
value = value.then( function ( key, value ) {
results[ key ] = value;
......@@ -1977,7 +1987,7 @@ THREE.GLTFLoader = ( function () {
// Ignore empty accessors, which may be used to declare runtime
// information about attributes coming from another source (e.g. Draco
// compression extension).
return null;
return Promise.resolve( null );
}
......@@ -2486,6 +2496,18 @@ THREE.GLTFLoader = ( function () {
}
function createDracoPrimitive( primitive ) {
return extensions[ EXTENSIONS.KHR_DRACO_MESH_COMPRESSION ]
.decodePrimitive( primitive, parser )
.then( function ( geometry ) {
return addPrimitiveAttributes( geometry, primitive, parser );
} );
}
var pending = [];
for ( var i = 0, il = primitives.length; i < il; i ++ ) {
......@@ -2507,13 +2529,7 @@ THREE.GLTFLoader = ( function () {
if ( primitive.extensions && primitive.extensions[ EXTENSIONS.KHR_DRACO_MESH_COMPRESSION ] ) {
// Use DRACO geometry if available
geometryPromise = extensions[ EXTENSIONS.KHR_DRACO_MESH_COMPRESSION ]
.decodePrimitive( primitive, parser )
.then( function ( geometry ) {
return addPrimitiveAttributes( geometry, primitive, parser );
} );
geometryPromise = createDracoPrimitive( primitive );
} else {
......
......@@ -147,11 +147,11 @@ THREE.HDRCubeTextureLoader.prototype.load = function ( type, urls, onLoad, onPro
}
if ( undefined !== texData.image ) {
if ( texData.image !== undefined ) {
texture[ i ].images = texData.image;
} else if ( undefined !== texData.data ) {
} else if ( texData.data !== undefined ) {
var dataTexture = new THREE.DataTexture( texData.data, texData.width, texData.height );
dataTexture.format = texture.format;
......
......@@ -626,7 +626,7 @@ THREE.VRMLLoader.prototype = {
parent.geometry = defines[ defineKey ].clone();
// the solid property is not cloned with clone(), is only needed for VRML loading, so we need to transfer it
if ( undefined !== defines[ defineKey ].solid && defines[ defineKey ].solid === false ) {
if ( defines[ defineKey ].solid !== undefined && defines[ defineKey ].solid === false ) {
parent.geometry.solid = false;
parent.material.side = THREE.DoubleSide;
......
......@@ -27,9 +27,14 @@ THREE.SMAAPass = function ( width, height ) {
this.weightsRT.texture.name = "SMAAPass.weights";
// textures
var scope = this;
var areaTextureImage = new Image();
areaTextureImage.src = this.getAreaTexture();
areaTextureImage.onload = function() {
// assigning data to HTMLImageElement.src is asynchronous (see #15162)
scope.areaTexture.needsUpdate = true;
};
this.areaTexture = new THREE.Texture();
this.areaTexture.name = "SMAAPass.area";
......@@ -37,11 +42,14 @@ THREE.SMAAPass = function ( width, height ) {
this.areaTexture.format = THREE.RGBFormat;
this.areaTexture.minFilter = THREE.LinearFilter;
this.areaTexture.generateMipmaps = false;
this.areaTexture.needsUpdate = true;
this.areaTexture.flipY = false;
var searchTextureImage = new Image();
searchTextureImage.src = this.getSearchTexture();
searchTextureImage.onload = function() {
// assigning data to HTMLImageElement.src is asynchronous (see #15162)
scope.searchTexture.needsUpdate = true;
};
this.searchTexture = new THREE.Texture();
this.searchTexture.name = "SMAAPass.search";
......@@ -49,7 +57,6 @@ THREE.SMAAPass = function ( width, height ) {
this.searchTexture.magFilter = THREE.NearestFilter;
this.searchTexture.minFilter = THREE.NearestFilter;
this.searchTexture.generateMipmaps = false;
this.searchTexture.needsUpdate = true;
this.searchTexture.flipY = false;
// materials - pass 1
......
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js misc - lights - point + directional</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
background:#fff;
padding:0;
margin:0;
overflow:hidden;
font-family:georgia;
text-align:center;
}
a { color:skyblue }
canvas { pointer-events:none; z-index:10; }
#d { text-align:center; margin:1em 0 -11.4em 0; z-index:0; position:relative; display:block }
.button { background:#000; color:#fff; padding:0.2em 0.5em; cursor:pointer }
.inactive { background:#999; color:#eee }
</style>
</head>
<body>
<script src="../build/three.js"></script>
<script src="js/libs/stats.min.js"></script>
<script>
var SCREEN_WIDTH = window.innerWidth / 2;
var SCREEN_HEIGHT = window.innerHeight;
var container, stats;
var camera, scene, webglRenderer;
var mesh, geometry, material;
var directionalLight, pointLight;
var mouseX = 0, mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
var clock = new THREE.Clock();
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 100000 );
camera.position.z = 500;
scene = new THREE.Scene();
scene.background = new THREE.Color( 0xffffff );
// Spheres
geometry = new THREE.SphereBufferGeometry( 100, 16, 8 );
material = new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true, shininess: 0 } );
for ( var i = 0; i < 30; i ++ ) {
mesh = new THREE.Mesh( geometry, material );
mesh.position.x = 500 * ( Math.random() - 0.5 );
mesh.position.y = 500 * ( Math.random() - 0.5 );
mesh.position.z = 500 * ( Math.random() - 0.5 );
mesh.scale.x = mesh.scale.y = mesh.scale.z = 0.25 * ( Math.random() + 0.5 );
scene.add( mesh );
}
// Torus
geometry = new THREE.TorusBufferGeometry( 100, 25, 15, 30 );
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
// Lights
var ambient = new THREE.AmbientLight( 0x101010 );
scene.add( ambient );
directionalLight = new THREE.DirectionalLight( 0xffffff );
directionalLight.position.set( 0, - 70, 100 ).normalize();
setTimeout( function () {
scene.add( directionalLight );
}, 3000 );
pointLight = new THREE.PointLight( 0xffaa00 );
scene.add( pointLight );
geometry = new THREE.SphereBufferGeometry( 100, 8, 4 );
material = new THREE.MeshBasicMaterial( { color: 0xffaa00 } );
mesh = new THREE.Mesh( geometry, material );
mesh.scale.set( 0.05, 0.05, 0.05 );
pointLight.add( mesh );
webglRenderer = new THREE.WebGLRenderer();
webglRenderer.setPixelRatio( window.devicePixelRatio );
webglRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
webglRenderer.domElement.style.position = "relative";
container.appendChild( webglRenderer.domElement );
stats = new Stats();
container.appendChild( stats.dom );
//
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
SCREEN_WIDTH = window.innerWidth / 2;
SCREEN_HEIGHT = window.innerHeight;
camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
camera.updateProjectionMatrix();
webglRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
}
function onDocumentMouseMove( event ) {
mouseX = ( event.clientX - windowHalfX );
mouseY = ( event.clientY - windowHalfY );
}
//
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
var delta = clock.getDelta();
camera.position.x += ( mouseX - camera.position.x ) * 0.05;
camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
camera.lookAt( scene.position );
for ( var i = 0, l = scene.children.length; i < l; i ++ ) {
var object = scene.children[ i ];
if ( object instanceof THREE.Mesh ) {
if ( i % 3 == 1 )
object.rotation.z += 1.5 * delta;
else if ( i % 3 == 2 )
object.rotation.y += 1.5 * delta;
else if ( i % 3 == 0 )
object.rotation.x += 1.5 * delta;
}
}
var r = clock.getElapsedTime();
pointLight.position.x = 200 * Math.cos( r );
pointLight.position.z = 200 * Math.sin( r );
webglRenderer.render( scene, camera );
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js misc - ubiquity - test2</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
background-color: #000;
margin: 0px;
overflow: hidden;
}
</style>
</head>
<body>
<script src="../build/three.js"></script>
<script src="js/renderers/Projector.js"></script>
<script src="js/libs/stats.min.js"></script>
<div id='container1' style='float: left '></div>
<div id='container2' style='float: right'></div>
<script>
var stats;
var camera, scene;
var webglRenderer;
var mesh;
var texture, texture1, texture2, texture3;
init();
animate();
function init() {
var width = window.innerWidth / 2 - 2;
var height = window.innerHeight;
camera = new THREE.PerspectiveCamera( 70, width / height, 1, 4000 );
camera.position.z = 2000;
scene = new THREE.Scene();
scene.background = new THREE.Color( 0xf0f0f0 );
var textureLoader = new THREE.TextureLoader();
// MESH - Repeat Pattern
texture = textureLoader.load( 'textures/UV_Grid_Sm.jpg' );
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
var geometry = new THREE.BoxBufferGeometry( 150, 150, 150, 4, 4, 4 );
var material = new THREE.MeshBasicMaterial( { map: texture } );
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
// SPRITES - from Sprite Sheet
texture1 = textureLoader.load( 'textures/UV_Grid_Sm.jpg', function () {
texture1.wrapS = THREE.ClampToEdgeWrapping;
texture1.wrapT = THREE.ClampToEdgeWrapping;
for ( var i = 0; i < 20; i ++ ) {
var tex = texture1.clone();
tex.needsUpdate = true; // cloning does not set this
tex.offset.x = 0.1 * THREE.Math.randInt( 0, 7 );
tex.offset.y = 0.1 * THREE.Math.randInt( 0, 7 );
tex.repeat.x = 0.1 * THREE.Math.randInt( 1, 3 );
tex.repeat.y = 0.1 * THREE.Math.randInt( 1, 3 );
var material = new THREE.SpriteMaterial( { map: tex } );
material.rotation = 0.5 * Math.PI * ( Math.random() - 0.5 );
var sprite = new THREE.Sprite( material );
sprite.position.x = Math.random() * 1000 - 500;
sprite.position.y = Math.random() * 1000 - 500;
sprite.position.z = Math.random() * 1000 - 500;
sprite.scale.set( 96, 96, 1 );
scene.add( sprite );
}
} );
// SPRITES - Repeat Pattern
texture2 = textureLoader.load( 'textures/sprite0.jpg' );
texture2.wrapS = THREE.RepeatWrapping;
texture2.wrapT = THREE.RepeatWrapping;
for ( var i = 0; i < 20; i ++ ) {
var material = new THREE.SpriteMaterial( { map: texture2, opacity: 0.7 } );
var sprite = new THREE.Sprite( material );
sprite.material.rotation = 0.5 * Math.PI * ( Math.random() - 0.5 );
sprite.position.x = Math.random() * 1000 - 500;
sprite.position.y = Math.random() * 1000 - 500;
sprite.position.z = Math.random() * 1000 - 500;
sprite.scale.set( 64, 64, 1 );
scene.add( sprite );
}
// SPRITES - PNG
texture3 = textureLoader.load( 'textures/sprite1.png' );
texture3.wrapS = THREE.ClampToEdgeWrapping;
texture3.wrapT = THREE.ClampToEdgeWrapping;
for ( var i = 0; i < 20; i ++ ) {
var material = new THREE.SpriteMaterial( { map: texture3 } );
material.rotation = 2 * Math.PI * ( Math.random() - 0.5 );
var sprite = new THREE.Sprite( material );
sprite.position.x = Math.random() * 1000 - 500;
sprite.position.y = Math.random() * 1000 - 500;
sprite.position.z = Math.random() * 1000 - 500;
sprite.scale.set( 64, 64, 1 );
scene.add( sprite );
}
//
webglRenderer = new THREE.WebGLRenderer( { antialias: true } );
webglRenderer.setPixelRatio( window.devicePixelRatio );
webglRenderer.setSize( width, height );
var container2 = document.getElementById( 'container2' );
container2.appendChild( webglRenderer.domElement );
stats = new Stats();
document.body.appendChild( stats.dom );
//
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
var width = window.innerWidth / 2 - 2;
var height = window.innerHeight;
camera.aspect = width / height;
camera.updateProjectionMatrix();
webglRenderer.setSize( width, height );
}
//
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
var time = performance.now() * 0.0001;
camera.position.x = Math.sin( time ) * 500;
camera.position.z = Math.cos( time ) * 500;
camera.lookAt( scene.position );
//
texture.repeat.x = Math.sin( time ) * 0.5 + 1.0;
texture.repeat.y = Math.cos( time ) * 0.5 + 1.0;
texture.offset.x = Math.sin( time ) * 0.5 + 0.5;
texture.offset.y = Math.cos( time ) * 0.5 + 0.5;
mesh.rotation.x = time * 2;
mesh.rotation.y = time * 4;
//
texture2.repeat.x = Math.sin( time ) + 1.25;
texture2.repeat.y = Math.sin( time ) + 1.25;
texture2.offset.x = Math.sin( time );
texture2.offset.y = Math.cos( time );
//
webglRenderer.render( scene, camera );
}
</script>
</body>
</html>
此差异已折叠。
{
"baseUrl": "models/skinned/UCS/",
"character": "umich_ucs.js",
"skins": ["Asian_Male.jpg", "Black_Female.jpg", "Caucasion_Female.jpg", "Caucasion_Male.jpg", "Highlighted_Muscles.jpg", "Indian_Male.jpg"],
"morphs": ["Obesity", "Femininity", "Musculature", "Age", "Skinniness"],
"x": 0,
"y": -500,
"z": -300,
"s": 30
}
......@@ -158,7 +158,7 @@
} );
// Mesh
var geometry = new THREE.BoxGeometry( volume.xLength, volume.yLength, volume.zLength );
var geometry = new THREE.BoxBufferGeometry( volume.xLength, volume.yLength, volume.zLength );
geometry.translate( volume.xLength / 2 - 0.5, volume.yLength / 2 - 0.5, volume.zLength / 2 - 0.5 );
var mesh = new THREE.Mesh( geometry, material );
......
......@@ -158,7 +158,7 @@
}
geometry.addAttribute( 'translate', new THREE.InstancedBufferAttribute( translateArray, 3, 1 ) );
geometry.addAttribute( 'translate', new THREE.InstancedBufferAttribute( translateArray, 3 ) );
material = new THREE.RawShaderMaterial( {
uniforms: {
......
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - buffergeometry - morph targets</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
font-family: Monospace;
font-size: 13px;
margin: 0px;
overflow: hidden;
text-align: center;
}
#info {
color: #fff;
position: absolute;
top: 10px;
width: 100%;
}
</style>
</head>
<body>
<div id="container"></div>
<div id="info">
<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - buffergeometry - morph targets
</div>
<script src="../build/three.js"></script>
<script src="js/controls/OrbitControls.js"></script>
<script src="js/WebGL.js"></script>
<script src="js/libs/dat.gui.min.js"></script>
<script>
var container, camera, scene, renderer, mesh;
function init() {
if ( WEBGL.isWebGLAvailable() === false ) {
document.body.appendChild( WEBGL.getWebGLErrorMessage() );
return false;
}
scene = new THREE.Scene();
scene.background = new THREE.Color( 0x8FBCD4 );
scene.add( new THREE.AmbientLight( 0x8FBCD4, 0.4 ) );
container = document.getElementById( 'container' );
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 20 );
camera.position.z = 8;
scene.add( camera );
var controls = new THREE.OrbitControls( camera, container );
var pointLight = new THREE.PointLight( 0xffffff, 1 );
camera.add( pointLight );
var geometry = createGeometry();
var material = new THREE.MeshPhongMaterial( {
color: 0xff0000,
flatShading: true,
morphTargets: true
} );
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
initGUI();
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setAnimationLoop( function () {
renderer.render( scene, camera );
} );
container.appendChild( renderer.domElement );
window.addEventListener( 'resize', onWindowResize, false );
}
function createGeometry() {
var geometry = new THREE.BoxBufferGeometry( 2, 2, 2, 32, 32, 32 );
// create an empty array to hold targets for the attribute we want to morph
// morphing positions and normals is supported
geometry.morphAttributes.position = [];
// the original positions of the cube's vertices
var positions = geometry.attributes.position.array;
// for the first morph target we'll move the cube's vertices onto the surface of a sphere
var spherePositions = [];
// for the second morph target, we'll twist the cubes vertices
var twistPositions = [];
var direction = new THREE.Vector3( 1, 0, 0 ).normalize();
var vertex = new THREE.Vector3();
for ( var i = 0; i < positions.length; i += 3 ) {
var x = positions[ i ];
var y = positions[ i + 1 ];
var z = positions[ i + 2 ];
spherePositions.push(
x * Math.sqrt( 1 - ( y * y / 2 ) - ( z * z / 2 ) + ( y * y * z * z / 3 ) ),
y * Math.sqrt( 1 - ( z * z / 2 ) - ( x * x / 2 ) + ( z * z * x * x / 3 ) ),
z * Math.sqrt( 1 - ( x * x / 2 ) - ( y * y / 2 ) + ( x * x * y * y / 3 ) )
);
// stretch along the x-axis so we can see the twist better
vertex.set( x * 2, y, z );
vertex.applyAxisAngle( direction, Math.PI * x / 2 ).toArray( twistPositions, twistPositions.length );
}
// add the spherical positions as the first morph target
geometry.morphAttributes.position[ 0 ] = new THREE.Float32BufferAttribute( spherePositions, 3 );
// add the twisted positions as the second morph target
geometry.morphAttributes.position[ 1 ] = new THREE.Float32BufferAttribute( twistPositions, 3 );
return geometry;
}
function initGUI() {
// Set up dat.GUI to control targets
var params = {
Spherify: 0,
Twist: 0,
};
var gui = new dat.GUI();
var folder = gui.addFolder( 'Morph Targets' );
folder.add( params, 'Spherify', 0, 1 ).step( 0.01 ).onChange( function ( value ) {
mesh.morphTargetInfluences[ 0 ] = value;
} );
folder.add( params, 'Twist', 0, 1 ).step( 0.01 ).onChange( function ( value ) {
mesh.morphTargetInfluences[ 1 ] = value;
} );
folder.open();
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
init();
</script>
</body>
</html>
......@@ -18,8 +18,7 @@
#info {
position: absolute;
top: 0px; width: 100%;
padding: 5px;
top: 5px; width: 100%;
z-index: 100;
}
......
......@@ -15,7 +15,7 @@
#info {
position: absolute;
top: 0px; width: 100%;
color: #000000;
color: #ffffff;
padding: 5px;
font-family:Monospace;
font-size:13px;
......@@ -66,7 +66,6 @@
controls = new THREE.TrackballControls( camera );
scene = new THREE.Scene();
scene.background = new THREE.Color( 0xf0f0f0 );
var light = new THREE.PointLight( 0xffffff );
light.position.set( 500, 500, 500 );
......@@ -76,7 +75,7 @@
light.position.set( - 500, - 500, - 500 );
scene.add( light );
sphere = new THREE.Mesh( new THREE.SphereBufferGeometry( 200, 20, 10 ), new THREE.MeshLambertMaterial() );
sphere = new THREE.Mesh( new THREE.SphereBufferGeometry( 200, 20, 10 ), new THREE.MeshPhongMaterial( { flatShading: true }) );
scene.add( sphere );
// Plane
......@@ -86,11 +85,13 @@
plane.rotation.x = - Math.PI / 2;
scene.add( plane );
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
effect = new THREE.AsciiEffect( renderer );
effect = new THREE.AsciiEffect( renderer, ' .:-+*=%@#', { invert: true } );
effect.setSize( window.innerWidth, window.innerHeight );
effect.domElement.style.color = 'white';
effect.domElement.style.backgroundColor = 'black';
// Special case: append effect.domElement, instead of renderer.domElement.
// AsciiEffect creates a custom domElement (a div container) where the ASCII elements are placed.
......
......@@ -857,19 +857,19 @@
igeo.addAttribute( 'position', vertices );
// var matrices = new THREE.InstancedBufferAttribute(
// new Float32Array( instanceCount * 16 ), 16, 1
// new Float32Array( instanceCount * 16 ), 16
// );
var mcol0 = new THREE.InstancedBufferAttribute(
new Float32Array( instanceCount * 3 ), 3, 1
new Float32Array( instanceCount * 3 ), 3
);
var mcol1 = new THREE.InstancedBufferAttribute(
new Float32Array( instanceCount * 3 ), 3, 1
new Float32Array( instanceCount * 3 ), 3
);
var mcol2 = new THREE.InstancedBufferAttribute(
new Float32Array( instanceCount * 3 ), 3, 1
new Float32Array( instanceCount * 3 ), 3
);
var mcol3 = new THREE.InstancedBufferAttribute(
new Float32Array( instanceCount * 3 ), 3, 1
new Float32Array( instanceCount * 3 ), 3
);
var matrix = new THREE.Matrix4();
var me = matrix.elements;
......@@ -899,7 +899,7 @@
};
var colors = new THREE.InstancedBufferAttribute(
new Float32Array( instanceCount * 3 ), 3, 1
new Float32Array( instanceCount * 3 ), 3
);
for ( var i = 0, ul = colors.count; i < ul; i ++ ) {
......@@ -910,7 +910,7 @@
var col = new THREE.Color();
var pickingColors = new THREE.InstancedBufferAttribute(
new Float32Array( instanceCount * 3 ), 3, 1
new Float32Array( instanceCount * 3 ), 3
);
for ( var i = 0, ul = pickingColors.count; i < ul; i ++ ) {
......
......@@ -427,7 +427,7 @@
var helper = new THREE.GridHelper( 1200, 60, 0xFF4444, 0x404040 );
this.scene.add( helper );
var geometry = new THREE.BoxGeometry( 10, 10, 10 );
var geometry = new THREE.BoxBufferGeometry( 10, 10, 10 );
var material = new THREE.MeshNormalMaterial();
this.cube = new THREE.Mesh( geometry, material );
this.cube.position.set( 0, 0, 0 );
......
......@@ -141,7 +141,7 @@
var helper = new THREE.GridHelper( 1200, 60, 0xFF4444, 0x404040 );
this.scene.add( helper );
var geometry = new THREE.BoxGeometry( 10, 10, 10 );
var geometry = new THREE.BoxBufferGeometry( 10, 10, 10 );
var material = new THREE.MeshNormalMaterial();
this.cube = new THREE.Mesh( geometry, material );
this.cube.position.set( 0, 0, 0 );
......
......@@ -64,8 +64,6 @@
};
init();
render();
function init() {
......@@ -88,20 +86,25 @@
var geometry = new THREE.BoxBufferGeometry( 10, 10, 10 );
var loader = new THREE.TextureLoader();
var texture = loader.load( 'textures/UV_Grid_Sm.jpg', render );
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
new THREE.TextureLoader().load( 'textures/UV_Grid_Sm.jpg', function ( texture ) {
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
texture.anisotropy = renderer.capabilities.getMaxAnisotropy();
//texture.matrixAutoUpdate = false; // default true; set to false to update texture.matrix manually
var material = new THREE.MeshBasicMaterial( { map: texture } );
texture.matrixAutoUpdate = false; // set this to false to update texture.matrix manually
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
var material = new THREE.MeshBasicMaterial( { map: texture } );
updateUvTransform();
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
initGui();
updateUvTransform();
render();
initGui();
} );
window.addEventListener( 'resize', onWindowResize, false );
......
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - morph target - human</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
color: #000;
font-family:Monospace;
font-size:13px;
text-align:center;
background-color: #fff;
margin: 0px;
overflow: hidden;
}
#info {
position: absolute;
top: 0px; width: 100%;
padding: 5px;
}
a {
color: #0af;
}
</style>
</head>
<body>
<div id="container"></div>
<div id="info">
<a href="http://github.com/mrdoob/three.js" target="_blank" rel="noopener">three.js</a> webgl - morph targets - human
</div>
<script src="../build/three.js"></script>
<script src="js/UCSCharacter.js"></script>
<script src="js/WebGL.js"></script>
<script src='js/libs/dat.gui.min.js'></script>
<script src="js/controls/OrbitControls.js"></script>
<script>
var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;
var container;
var camera, scene, renderer;
var character, controls;
var clock = new THREE.Clock();
var gui, skinConfig, morphConfig;
init();
animate();
function init() {
container = document.getElementById( 'container' );
camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 100000 );
camera.position.set( 2000, 5000, 5000 );
scene = new THREE.Scene();
scene.background = new THREE.Color( 0xffffff );
// LIGHTS
var light = new THREE.DirectionalLight( 0xffffff, 1 );
light.position.set( 0, 140, 500 );
light.position.multiplyScalar( 1.1 );
light.color.setHSL( 0.6, 0.075, 1 );
scene.add( light );
//
var light = new THREE.DirectionalLight( 0xffffff, 1 );
light.position.set( 0, - 1, 0 );
scene.add( light );
// RENDERER
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
container.appendChild( renderer.domElement );
// CHARACTER
character = new THREE.UCSCharacter();
character.onLoadComplete = function () {
console.log( "Load Complete" );
console.log( character.numSkins + " skins and " + character.numMorphs + " morphtargets loaded." );
gui = new dat.GUI();
setupSkinsGUI();
setupMorphsGUI();
gui.width = 300;
gui.open();
};
var loader = new THREE.FileLoader();
loader.load( 'models/skinned/UCS_config.json', function ( text ) {
var config = JSON.parse( text );
character.loadParts( config );
scene.add( character.root );
} );
window.addEventListener( 'resize', onWindowResize, false );
controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.target.set( 0, 3000, 0 );
controls.update();
controls.addEventListener( 'change', render );
}
function setupSkinsGUI() {
var skinGui = gui.addFolder( "Skins" );
skinConfig = {
wireframe: false
};
var skinCallback = function ( index ) {
return function () {
character.setSkin( index );
};
};
for ( var i = 0; i < character.numSkins; i ++ ) {
var name = character.skins[ i ].name;
skinConfig[ name ] = skinCallback( i );
}
for ( var i = 0; i < character.numSkins; i ++ ) {
skinGui.add( skinConfig, character.skins[ i ].name );
}
skinGui.open();
}
function setupMorphsGUI() {
var morphGui = gui.addFolder( "Morphs" );
morphConfig = {
};
var morphCallback = function () {
return function () {
character.updateMorphs( morphConfig );
};
};
for ( var i = 0; i < character.numMorphs; i ++ ) {
var morphName = character.morphs[ i ];
morphConfig[ morphName ] = 0;
}
for ( var i = 0; i < character.numMorphs; i ++ ) {
morphGui.add( morphConfig, character.morphs[ i ] ).min( 0 ).max( 100 ).onChange( morphCallback( i ) );
}
morphGui.open();
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
//
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
var delta = 0.75 * clock.getDelta();
// update skinning
character.mixer.update( delta );
renderer.render( scene, camera );
}
</script>
</body>
</html>
......@@ -40,6 +40,36 @@
<script src="js/WebGL.js"></script>
<script src="js/libs/stats.min.js"></script>
<script type="x-shader/x-vertex" id="vertexshader">
attribute float scale;
void main() {
vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
gl_PointSize = scale * ( 300.0 / - mvPosition.z );
gl_Position = projectionMatrix * mvPosition;
}
</script>
<script type="x-shader/x-fragment" id="fragmentshader">
uniform vec3 color;
void main() {
if ( length( gl_PointCoord - vec2( 0.5, 0.5 ) ) > 0.475 ) discard;
gl_FragColor = vec4( color, 1.0 );
}
</script>
<script>
if ( WEBGL.isWebGLAvailable() === false ) {
......@@ -53,7 +83,7 @@
var container, stats;
var camera, scene, renderer;
var particles, particle, count = 0;
var particles, count = 0;
var mouseX = 0, mouseY = 0;
......@@ -73,30 +103,54 @@
scene = new THREE.Scene();
particles = new Array();
var material = new THREE.SpriteMaterial( {
//
map: new THREE.TextureLoader().load( 'textures/sprites/circle.png' ),
var numParticles = AMOUNTX * AMOUNTY;
} );
var positions = new Float32Array( numParticles * 3 );
var scales = new Float32Array( numParticles );
var i = 0;
var i = 0, j = 0;
for ( var ix = 0; ix < AMOUNTX; ix ++ ) {
for ( var iy = 0; iy < AMOUNTY; iy ++ ) {
particle = particles[ i ++ ] = new THREE.Sprite( material );
particle.position.x = ix * SEPARATION - ( ( AMOUNTX * SEPARATION ) / 2 );
particle.position.z = iy * SEPARATION - ( ( AMOUNTY * SEPARATION ) / 2 );
scene.add( particle );
positions[ i ] = ix * SEPARATION - ( ( AMOUNTX * SEPARATION ) / 2 ); // x
positions[ i + 1 ] = 0; // y
positions[ i + 2 ] = iy * SEPARATION - ( ( AMOUNTY * SEPARATION ) / 2 ); // z
scales[ j ] = 1;
i += 3;
j ++;
}
}
renderer = new THREE.WebGLRenderer();
var geometry = new THREE.BufferGeometry();
geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
geometry.addAttribute( 'scale', new THREE.BufferAttribute( scales, 1 ) );
var material = new THREE.ShaderMaterial( {
uniforms: {
color: { value: new THREE.Color( 0xffffff ) },
},
vertexShader: document.getElementById( 'vertexshader' ).textContent,
fragmentShader: document.getElementById( 'fragmentshader' ).textContent
} );
//
particles = new THREE.Points( geometry, material );
scene.add( particles );
//
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
......@@ -178,22 +232,31 @@
camera.position.y += ( - mouseY - camera.position.y ) * .05;
camera.lookAt( scene.position );
var i = 0;
var positions = particles.geometry.attributes.position.array;
var scales = particles.geometry.attributes.scale.array;
var i = 0, j = 0;
for ( var ix = 0; ix < AMOUNTX; ix ++ ) {
for ( var iy = 0; iy < AMOUNTY; iy ++ ) {
particle = particles[ i ++ ];
particle.position.y = ( Math.sin( ( ix + count ) * 0.3 ) * 50 ) +
( Math.sin( ( iy + count ) * 0.5 ) * 50 );
particle.scale.x = particle.scale.y = ( Math.sin( ( ix + count ) * 0.3 ) + 1 ) * 4 +
( Math.sin( ( iy + count ) * 0.5 ) + 1 ) * 4;
positions[ i + 1 ] = ( Math.sin( ( ix + count ) * 0.3 ) * 50 ) +
( Math.sin( ( iy + count ) * 0.5 ) * 50 );
scales[ j ] = ( Math.sin( ( ix + count ) * 0.3 ) + 1 ) * 8 +
( Math.sin( ( iy + count ) * 0.5 ) + 1 ) * 8;
i += 3;
j ++;
}
}
particles.geometry.attributes.position.needsUpdate = true;
particles.geometry.attributes.scale.needsUpdate = true;
renderer.render( scene, camera );
count += 0.1;
......
......@@ -191,7 +191,7 @@
//
var delta = clock.getDelta();
var delta = clock.getDelta() * 0.8; // slow down simulation
var range = 3 - radius;
......
......@@ -165,7 +165,7 @@
pivot.rotation.x = Math.PI / 5.5;
controller.add( pivot );
var range = new THREE.Mesh( new THREE.IcosahedronGeometry( 0.03, 3 ), new THREE.MeshBasicMaterial( { opacity: 0.25, transparent: true } ) );
var range = new THREE.Mesh( new THREE.IcosahedronBufferGeometry( 0.03, 3 ), new THREE.MeshBasicMaterial( { opacity: 0.25, transparent: true } ) );
pivot.add( range );
controller1.add( controller.clone() );
......
{
"name": "three",
"version": "0.97.0",
"version": "0.98.0",
"description": "JavaScript 3D library",
"main": "build/three.js",
"repository": "mrdoob/three.js",
......
......@@ -11,6 +11,7 @@ function Audio( listener ) {
this.type = 'Audio';
this.listener = listener;
this.context = listener.context;
this.gain = this.context.createGain();
......
......@@ -4,6 +4,7 @@
import { Vector3 } from '../math/Vector3.js';
import { Quaternion } from '../math/Quaternion.js';
import { Clock } from '../core/Clock.js';
import { Object3D } from '../core/Object3D.js';
import { AudioContext } from './AudioContext.js';
......@@ -20,6 +21,8 @@ function AudioListener() {
this.filter = null;
this.timeDelta = 0;
}
AudioListener.prototype = Object.assign( Object.create( Object3D.prototype ), {
......@@ -95,6 +98,7 @@ AudioListener.prototype = Object.assign( Object.create( Object3D.prototype ), {
var scale = new Vector3();
var orientation = new Vector3();
var clock = new Clock();
return function updateMatrixWorld( force ) {
......@@ -103,21 +107,27 @@ AudioListener.prototype = Object.assign( Object.create( Object3D.prototype ), {
var listener = this.context.listener;
var up = this.up;
this.timeDelta = clock.getDelta();
this.matrixWorld.decompose( position, quaternion, scale );
orientation.set( 0, 0, - 1 ).applyQuaternion( quaternion );
if ( listener.positionX ) {
listener.positionX.setValueAtTime( position.x, this.context.currentTime );
listener.positionY.setValueAtTime( position.y, this.context.currentTime );
listener.positionZ.setValueAtTime( position.z, this.context.currentTime );
listener.forwardX.setValueAtTime( orientation.x, this.context.currentTime );
listener.forwardY.setValueAtTime( orientation.y, this.context.currentTime );
listener.forwardZ.setValueAtTime( orientation.z, this.context.currentTime );
listener.upX.setValueAtTime( up.x, this.context.currentTime );
listener.upY.setValueAtTime( up.y, this.context.currentTime );
listener.upZ.setValueAtTime( up.z, this.context.currentTime );
// code path for Chrome (see #14393)
var endTime = this.context.currentTime + this.timeDelta;
listener.positionX.linearRampToValueAtTime( position.x, endTime );
listener.positionY.linearRampToValueAtTime( position.y, endTime );
listener.positionZ.linearRampToValueAtTime( position.z, endTime );
listener.forwardX.linearRampToValueAtTime( orientation.x, endTime );
listener.forwardY.linearRampToValueAtTime( orientation.y, endTime );
listener.forwardZ.linearRampToValueAtTime( orientation.z, endTime );
listener.upX.linearRampToValueAtTime( up.x, endTime );
listener.upY.linearRampToValueAtTime( up.y, endTime );
listener.upZ.linearRampToValueAtTime( up.z, endTime );
} else {
......
......@@ -109,8 +109,25 @@ PositionalAudio.prototype = Object.assign( Object.create( Audio.prototype ), {
orientation.set( 0, 0, 1 ).applyQuaternion( quaternion );
panner.setPosition( position.x, position.y, position.z );
panner.setOrientation( orientation.x, orientation.y, orientation.z );
if ( panner.positionX ) {
// code path for Chrome and Firefox (see #14393)
var endTime = this.context.currentTime + this.listener.timeDelta;
panner.positionX.linearRampToValueAtTime( position.x, endTime );
panner.positionY.linearRampToValueAtTime( position.y, endTime );
panner.positionZ.linearRampToValueAtTime( position.z, endTime );
panner.orientationX.linearRampToValueAtTime( orientation.x, endTime );
panner.orientationY.linearRampToValueAtTime( orientation.y, endTime );
panner.orientationZ.linearRampToValueAtTime( orientation.z, endTime );
} else {
panner.setPosition( position.x, position.y, position.z );
panner.setOrientation( orientation.x, orientation.y, orientation.z );
}
};
......
export var REVISION = '98dev';
export var REVISION = '98';
export var MOUSE = { LEFT: 0, MIDDLE: 1, RIGHT: 2 };
export var CullFaceNone = 0;
export var CullFaceBack = 1;
......
......@@ -26,7 +26,7 @@ function PointLightHelper( light, sphereSize, color ) {
/*
var distanceGeometry = new THREE.IcosahedronGeometry( 1, 2 );
var distanceGeometry = new THREE.IcosahedronBufferGeometry( 1, 2 );
var distanceMaterial = new THREE.MeshBasicMaterial( { color: hexColor, fog: false, wireframe: true, opacity: 0.1, transparent: true } );
this.lightSphere = new THREE.Mesh( bulbGeometry, bulbMaterial );
......
......@@ -35,11 +35,11 @@ Object.assign( DataTextureLoader.prototype, {
if ( ! texData ) return;
if ( undefined !== texData.image ) {
if ( texData.image !== undefined ) {
texture.image = texData.image;
} else if ( undefined !== texData.data ) {
} else if ( texData.data !== undefined ) {
texture.image.width = texData.width;
texture.image.height = texData.height;
......@@ -47,32 +47,32 @@ Object.assign( DataTextureLoader.prototype, {
}
texture.wrapS = undefined !== texData.wrapS ? texData.wrapS : ClampToEdgeWrapping;
texture.wrapT = undefined !== texData.wrapT ? texData.wrapT : ClampToEdgeWrapping;
texture.wrapS = texData.wrapS !== undefined ? texData.wrapS : ClampToEdgeWrapping;
texture.wrapT = texData.wrapT !== undefined ? texData.wrapT : ClampToEdgeWrapping;
texture.magFilter = undefined !== texData.magFilter ? texData.magFilter : LinearFilter;
texture.minFilter = undefined !== texData.minFilter ? texData.minFilter : LinearMipMapLinearFilter;
texture.magFilter = texData.magFilter !== undefined ? texData.magFilter : LinearFilter;
texture.minFilter = texData.minFilter !== undefined ? texData.minFilter : LinearMipMapLinearFilter;
texture.anisotropy = undefined !== texData.anisotropy ? texData.anisotropy : 1;
texture.anisotropy = texData.anisotropy !== undefined ? texData.anisotropy : 1;
if ( undefined !== texData.format ) {
if ( texData.format !== undefined ) {
texture.format = texData.format;
}
if ( undefined !== texData.type ) {
if ( texData.type !== undefined ) {
texture.type = texData.type;
}
if ( undefined !== texData.mipmaps ) {
if ( texData.mipmaps !== undefined ) {
texture.mipmaps = texData.mipmaps;
}
if ( 1 === texData.mipmapCount ) {
if ( texData.mipmapCount === 1 ) {
texture.minFilter = LinearFilter;
......
......@@ -141,8 +141,8 @@ Object.assign( FileLoader.prototype, {
if ( onError ) onError( error );
scope.manager.itemEnd( url );
scope.manager.itemError( url );
scope.manager.itemEnd( url );
}, 0 );
......@@ -201,8 +201,8 @@ Object.assign( FileLoader.prototype, {
}
scope.manager.itemEnd( url );
scope.manager.itemError( url );
scope.manager.itemEnd( url );
}
......@@ -234,8 +234,8 @@ Object.assign( FileLoader.prototype, {
}
scope.manager.itemEnd( url );
scope.manager.itemError( url );
scope.manager.itemEnd( url );
}, false );
......@@ -252,8 +252,8 @@ Object.assign( FileLoader.prototype, {
}
scope.manager.itemEnd( url );
scope.manager.itemError( url );
scope.manager.itemEnd( url );
}, false );
......
......@@ -85,8 +85,8 @@ ImageBitmapLoader.prototype = {
if ( onError ) onError( e );
scope.manager.itemEnd( url );
scope.manager.itemError( url );
scope.manager.itemEnd( url );
} );
......
......@@ -66,8 +66,8 @@ Object.assign( ImageLoader.prototype, {
if ( onError ) onError( event );
scope.manager.itemEnd( url );
scope.manager.itemError( url );
scope.manager.itemEnd( url );
}
......
......@@ -453,6 +453,7 @@ Object.assign( ObjectLoader.prototype, {
parseMaterials: function ( json, textures ) {
var cache = {}; // MultiMaterial
var materials = {};
if ( json !== undefined ) {
......@@ -472,7 +473,15 @@ Object.assign( ObjectLoader.prototype, {
for ( var j = 0; j < data.materials.length; j ++ ) {
array.push( loader.parse( data.materials[ j ] ) );
var material = data.materials[ j ];
if ( cache[ material.uuid ] === undefined ) {
cache[ material.uuid ] = loader.parse( material );
}
array.push( cache[ material.uuid ] );
}
......@@ -481,6 +490,7 @@ Object.assign( ObjectLoader.prototype, {
} else {
materials[ data.uuid ] = loader.parse( data );
cache[ data.uuid ] = materials[ data.uuid ];
}
......@@ -527,8 +537,8 @@ Object.assign( ObjectLoader.prototype, {
}, undefined, function () {
scope.manager.itemEnd( url );
scope.manager.itemError( url );
scope.manager.itemEnd( url );
} );
......
......@@ -3,6 +3,7 @@ import { UniformsUtils } from './UniformsUtils.js';
import { Vector3 } from '../../math/Vector3.js';
import { UniformsLib } from './UniformsLib.js';
import { Color } from '../../math/Color.js';
import { Matrix3 } from '../../math/Matrix3.js';
/**
* @author alteredq / http://alteredqualia.com/
......@@ -195,6 +196,7 @@ var ShaderLib = {
background: {
uniforms: {
uvTransform: { value: new Matrix3() },
t2D: { value: null },
},
......
varying vec2 vUv;
uniform mat3 uvTransform;
void main() {
vUv = uv;
vUv = ( uvTransform * vec3( uv, 1 ) ).xy;
gl_Position = vec4( position, 1.0 );
gl_Position.z = 1.0;
......
......@@ -47,6 +47,7 @@ function WebGLBackground( renderer, state, objects, premultipliedAlpha ) {
boxMesh = new Mesh(
new BoxBufferGeometry( 1, 1, 1 ),
new ShaderMaterial( {
type: 'BackgroundCubeMaterial',
uniforms: UniformsUtils.clone( ShaderLib.cube.uniforms ),
vertexShader: ShaderLib.cube.vertexShader,
fragmentShader: ShaderLib.cube.fragmentShader,
......@@ -83,6 +84,7 @@ function WebGLBackground( renderer, state, objects, premultipliedAlpha ) {
planeMesh = new Mesh(
new PlaneBufferGeometry( 2, 2 ),
new ShaderMaterial( {
type: 'BackgroundMaterial',
uniforms: UniformsUtils.clone( ShaderLib.background.uniforms ),
vertexShader: ShaderLib.background.vertexShader,
fragmentShader: ShaderLib.background.fragmentShader,
......@@ -101,6 +103,14 @@ function WebGLBackground( renderer, state, objects, premultipliedAlpha ) {
planeMesh.material.uniforms.t2D.value = background;
if ( background.matrixAutoUpdate === true ) {
background.updateMatrix();
}
planeMesh.material.uniforms.uvTransform.value.copy( background.matrix );
// push to the pre-sorted opaque render list
renderList.push( planeMesh, planeMesh.geometry, planeMesh.material, 0, null );
......
......@@ -5,8 +5,17 @@
*/
import { EventDispatcher } from '../core/EventDispatcher.js';
import { UVMapping } from '../constants.js';
import { MirroredRepeatWrapping, ClampToEdgeWrapping, RepeatWrapping, LinearEncoding, UnsignedByteType, RGBAFormat, LinearMipMapLinearFilter, LinearFilter } from '../constants.js';
import {
MirroredRepeatWrapping,
ClampToEdgeWrapping,
RepeatWrapping,
LinearEncoding,
UnsignedByteType,
RGBAFormat,
LinearMipMapLinearFilter,
LinearFilter,
UVMapping
} from '../constants.js';
import { _Math } from '../math/Math.js';
import { Vector2 } from '../math/Vector2.js';
import { Matrix3 } from '../math/Matrix3.js';
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册