Skip to content

T
three.js

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

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

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

提交 c553f340 编写于 作者: L Lewy Blue
浏览文件
操作

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

上级 18efee3e 270f9db8
隐藏空白更改
内联 并排
Showing with 707 addition and 285 deletion
docs/api/cameras/OrthographicCamera.html
浏览文件 @ c553f340
......@@ -25,7 +25,6 @@
<h2>Example</h2>
<div>[example:canvas_camera_orthographic camera / orthographic ]</div>
<div>[example:canvas_camera_orthographic2 camera / orthographic2 ]</div>
<div>[example:webgl_camera camera ]</div>
<div>[example:webgl_interactive_cubes_ortho interactive / cubes / ortho ]</div>
<div>[example:webgl_materials_cubemap_dynamic materials / cubemap / dynamic ]</div>
......
docs/api/core/BufferGeometry.html
浏览文件 @ c553f340
......@@ -176,9 +176,6 @@
You should not change this, as it used internally for optimisation.
</div>
<h3>[property:Integer MaxIndex]</h3>
<div>Maximum number of vertices allowed, set to *65535*.</div>
<h3>[property:Object morphAttributes]</h3>
<div>
Hashmap of [page:BufferAttribute]s holding details of the geometry's [page:Geometry.morphTargets morphTargets].
......
docs/api/math/Frustum.html
浏览文件 @ c553f340
......@@ -98,7 +98,7 @@
<div>
[page:Matrix4 matrix] - [page:Matrix4] used to set the [page:.planes planes]<br /><br />
This is used by the [page:WebGLRenderer] to set up the Frustum from a [page:Camera Camera's]
This is used by the [page:WebGLRenderer] to set up the Frustum from a [page:Camera Camera]'s
[page:Camera.projectionMatrix projectionMatrix] and [page:Camera.matrixWorldInverse matrixWorldInverse].
</div>
......
docs/api/math/Vector4.html
浏览文件 @ c553f340
......@@ -231,13 +231,13 @@ var d = a.dot( b );
<h3>[method:Vector4 max]( [page:Vector4 v] )</h3>
<div>
If this vector's x, y, z or w value is less than [page:Vector4 v's] x, y, z or w value, replace
If this vector's x, y, z or w value is less than [page:Vector4 v]'s x, y, z or w value, replace
that value with the corresponding max value.
</div>
<h3>[method:Vector4 min]( [page:Vector4 v] )</h3>
<div>
If this vector's x, y, z or w value is greater than [page:Vector4 v's] x, y, z or w value, replace
If this vector's x, y, z or w value is greater than [page:Vector4 v]'s x, y, z or w value, replace
that value with the corresponding min value.
</div>
......
examples/css3d_periodictable.html
浏览文件 @ c553f340
......@@ -228,12 +228,12 @@
"Ds", "Darmstadium", "(281)", 10, 7,
"Rg", "Roentgenium", "(280)", 11, 7,
"Cn", "Copernicium", "(285)", 12, 7,
"Uut", "Unutrium", "(284)", 13, 7,
"Nh", "Nihonium", "(286)", 13, 7,
"Fl", "Flerovium", "(289)", 14, 7,
"Uup", "Ununpentium", "(288)", 15, 7,
"Mc", "Moscovium", "(290)", 15, 7,
"Lv", "Livermorium", "(293)", 16, 7,
"Uus", "Ununseptium", "(294)", 17, 7,
"Uuo", "Ununoctium", "(294)", 18, 7
"Ts", "Tennessine", "(294)", 17, 7,
"Og", "Oganesson", "(294)", 18, 7
];
var camera, scene, renderer;
......
examples/files.js
浏览文件 @ c553f340
......@@ -340,7 +340,6 @@ var files = {
"canvas": [
"canvas_ascii_effect",
"canvas_camera_orthographic",
"canvas_camera_orthographic2",
"canvas_geometry_birds",
"canvas_geometry_cube",
"canvas_geometry_earth",
......
examples/js/loaders/FBXLoader.js
浏览文件 @ c553f340
......@@ -112,7 +112,7 @@
}
console.log( FBXTree );
// console.log( FBXTree );
var connections = parseConnections( FBXTree );
var images = parseImages( FBXTree );
......@@ -1377,83 +1377,105 @@
switch ( node.attrType ) {
case 'Mesh':
/**
* @type {?THREE.BufferGeometry}
*/
var geometry = null;
/**
* @type {THREE.MultiMaterial|THREE.Material}
*/
var material = null;
/**
* @type {Array.<THREE.Material>}
*/
var materials = [];
case 'Camera':
/* ***********
* Supported light types:
* PerspectiveCamera
* OrthographicCamera
*
* TODO: Support targets via camera.lookAt
************** */
var cameraAttribute;
for ( var childrenIndex = 0, childrenLength = conns.children.length; childrenIndex < childrenLength; ++ childrenIndex ) {
var child = conns.children[ childrenIndex ];
var childID = conns.children[ childrenIndex ].ID;
if ( geometryMap.has( child.ID ) ) {
var attr = FBXTree.Objects.subNodes.NodeAttribute[ childID ];
geometry = geometryMap.get( child.ID );
if ( attr !== undefined && attr.properties !== undefined ) {
cameraAttribute = attr.properties;
}
if ( materialMap.has( child.ID ) ) {
}
materials.push( materialMap.get( child.ID ) );
if ( cameraAttribute === undefined ) {
model = new THREE.Object3D();
} else {
var type = 0;
if ( cameraAttribute.CameraProjectionType !== undefined && ( cameraAttribute.CameraProjectionType.value === '1' || cameraAttribute.CameraProjectionType.value === 1 ) ) {
type = 1;
}
}
if ( materials.length > 1 ) {
var nearClippingPlane = 1;
if ( cameraAttribute.NearPlane !== undefined ) {
material = materials;
nearClippingPlane = cameraAttribute.NearPlane.value / 1000;
} else if ( materials.length > 0 ) {
}
material = materials[ 0 ];
var farClippingPlane = 1000;
if ( cameraAttribute.FarPlane !== undefined ) {
} else {
farClippingPlane = cameraAttribute.FarPlane.value / 1000;
material = new THREE.MeshStandardMaterial( { color: 0x3300ff } );
materials.push( material );
}
}
if ( 'color' in geometry.attributes ) {
for ( var materialIndex = 0, numMaterials = materials.length; materialIndex < numMaterials; ++ materialIndex ) {
var width = window.innerWidth;
var height = window.innerHeight;
materials[ materialIndex ].vertexColors = THREE.VertexColors;
if ( cameraAttribute.AspectWidth !== undefined && cameraAttribute.AspectHeight !== undefined ) {
width = parseFloat( cameraAttribute.AspectWidth.value );
height = parseFloat( cameraAttribute.AspectHeight.value );
}
}
if ( geometry.FBX_Deformer ) {
var aspect = width / height;
for ( var materialsIndex = 0, materialsLength = materials.length; materialsIndex < materialsLength; ++ materialsIndex ) {
var fov = 45;
if ( cameraAttribute.FieldOfView !== undefined ) {
materials[ materialsIndex ].skinning = true;
fov = parseFloat( cameraAttribute.FieldOfView.value );
}
model = new THREE.SkinnedMesh( geometry, material );
} else {
switch ( type ) {
model = new THREE.Mesh( geometry, material );
case '0': // Perspective
case 0:
model = new THREE.PerspectiveCamera( fov, aspect, nearClippingPlane, farClippingPlane );
break;
case '1': // Orthographic
case 1:
model = new THREE.OrthographicCamera( - width / 2, width / 2, height / 2, - height / 2, nearClippingPlane, farClippingPlane );
break;
default:
console.warn( 'THREE.FBXLoader: Unknown camera type ' + type + '.' );
model = new THREE.Object3D();
break;
}
}
break;
case 'Light':
/* ***********
* Supported light types:
* DirectionalLight
* PointLight
* PointLight
* SpotLight
*
* TODO: Support DirectionalLight and SpotLight targets
......@@ -1481,14 +1503,12 @@
} else {
console.log( lightAttribute );
var type;
// LightType is undefined for Point lights
// LightType can be undefined for Point lights
if ( lightAttribute.LightType === undefined ) {
type = '0';
type = 0;
} else {
......@@ -1502,9 +1522,9 @@
var temp = lightAttribute.Color.value.split( ',' );
var r = parseInt( temp[ 0 ], 10 );
var g = parseInt( temp[ 1 ], 10 );
var b = parseInt( temp[ 1 ], 10 );
var r = parseFloat( temp[ 0 ] );
var g = parseFloat( temp[ 1 ] );
var b = parseFloat( temp[ 1 ] );
color = new THREE.Color( r, g, b );
......@@ -1513,7 +1533,7 @@
var intensity = ( lightAttribute.Intensity === undefined ) ? 1 : lightAttribute.Intensity.value / 100;
// light disabled
if ( lightAttribute.CastLightOnObject !== undefined && lightAttribute.CastLightOnObject.value === '0' ) {
if ( lightAttribute.CastLightOnObject !== undefined && ( lightAttribute.CastLightOnObject.value === '0' || lightAttribute.CastLightOnObject.value === 0 ) ) {
intensity = 0;
......@@ -1522,11 +1542,11 @@
var distance = 0;
if ( lightAttribute.FarAttenuationEnd !== undefined ) {
if ( lightAttribute.EnableFarAttenuation !== undefined && lightAttribute.EnableFarAttenuation.value === '0' ) {
if ( lightAttribute.EnableFarAttenuation !== undefined && ( lightAttribute.EnableFarAttenuation.value === '0' || lightAttribute.EnableFarAttenuation.value === 0 ) ) {
distance = 0;
} else {
} else {
distance = lightAttribute.FarAttenuationEnd.value / 1000;
......@@ -1535,20 +1555,23 @@
}
// TODO
// could be calculated linearly from FarAttenuationStart to FarAttenuationEnd ?
// could be calculated linearly from FarAttenuationStart to FarAttenuationEnd?
var decay = 1;
switch ( type ) {
case '0': // Point
case 0:
model = new THREE.PointLight( color, intensity, distance, decay );
break;
case '1': // Directional
case 1:
model = new THREE.DirectionalLight( color, intensity );
break;
case '2': // Spot
case 2:
var angle = Math.PI / 3;
if ( lightAttribute.InnerAngle !== undefined ) {
......@@ -1557,10 +1580,10 @@
}
var penumbra = 0; // Falloff / Field
var penumbra = 0;
if ( lightAttribute.OuterAngle !== undefined ) {
// note: this is not correct - FBX calculates outer and inner angle in degrees
// TODO: this is not correct - FBX calculates outer and inner angle in degrees
// with OuterAngle > InnerAngle && OuterAngle <= Math.PI
// while three.js uses a penumbra between (0, 1) to attenuate the inner angle
penumbra = THREE.Math.degToRad( lightAttribute.OuterAngle.value );
......@@ -1572,13 +1595,13 @@
break;
default:
console.warn( 'THREE.FBXLoader: Unknown light type ' + lightAttribute.LightType + ', defaulting to a THREE.PointLight.' );
console.warn( 'THREE.FBXLoader: Unknown light type ' + lightAttribute.LightType.value + ', defaulting to a THREE.PointLight.' );
model = new THREE.PointLight( color, intensity );
break;
}
if ( lightAttribute.CastShadows !== undefined && lightAttribute.CastShadows.value === '1' ) {
if ( lightAttribute.CastShadows !== undefined && ( lightAttribute.CastShadows.value === '1' || lightAttribute.CastShadows.value === 1 ) ) {
model.castShadow = true;
......@@ -1588,6 +1611,78 @@
break;
case 'Mesh':
/**
* @type {?THREE.BufferGeometry}
*/
var geometry = null;
/**
* @type {THREE.MultiMaterial|THREE.Material}
*/
var material = null;
/**
* @type {Array.<THREE.Material>}
*/
var materials = [];
for ( var childrenIndex = 0, childrenLength = conns.children.length; childrenIndex < childrenLength; ++ childrenIndex ) {
var child = conns.children[ childrenIndex ];
if ( geometryMap.has( child.ID ) ) {
geometry = geometryMap.get( child.ID );
}
if ( materialMap.has( child.ID ) ) {
materials.push( materialMap.get( child.ID ) );
}
}
if ( materials.length > 1 ) {
material = materials;
} else if ( materials.length > 0 ) {
material = materials[ 0 ];
} else {
material = new THREE.MeshStandardMaterial( { color: 0x3300ff } );
materials.push( material );
}
if ( 'color' in geometry.attributes ) {
for ( var materialIndex = 0, numMaterials = materials.length; materialIndex < numMaterials; ++ materialIndex ) {
materials[ materialIndex ].vertexColors = THREE.VertexColors;
}
}
if ( geometry.FBX_Deformer ) {
for ( var materialsIndex = 0, materialsLength = materials.length; materialsIndex < materialsLength; ++ materialsIndex ) {
materials[ materialsIndex ].skinning = true;
}
model = new THREE.SkinnedMesh( geometry, material );
} else {
model = new THREE.Mesh( geometry, material );
}
break;
case 'NurbsCurve':
var geometry = null;
......@@ -4896,6 +4991,9 @@
}
// Manage UTF8 encoding
s = decodeURIComponent( escape( s ) );
this.skip( size );
return s;
......
examples/js/loaders/VRMLLoader.js
浏览文件 @ c553f340
......@@ -633,14 +633,14 @@ THREE.VRMLLoader.prototype = {
}
if ( 'AmbientLight' === data.nodeType ) {
if ( data.nodeType === 'AmbientLight' ) {
object = new THREE.AmbientLight( l_color, l_intensity );
object.visible = l_visible;
parent.add( object );
} else if ( 'PointLight' === data.nodeType ) {
} else if ( data.nodeType === 'PointLight' ) {
var l_distance = 0;
......@@ -655,7 +655,7 @@ THREE.VRMLLoader.prototype = {
parent.add( object );
} else if ( 'SpotLight' === data.nodeType ) {
} else if ( data.nodeType === 'SpotLight' ) {
var l_intensity = 1;
var l_distance = 0;
......@@ -680,7 +680,7 @@ THREE.VRMLLoader.prototype = {
parent.add( object );
} else if ( 'Transform' === data.nodeType || 'Group' === data.nodeType ) {
} else if ( data.nodeType === 'Transform' || data.nodeType === 'Group' ) {
object = new THREE.Object3D();
......@@ -691,7 +691,7 @@ THREE.VRMLLoader.prototype = {
}
if ( undefined !== data[ 'translation' ] ) {
if ( data.translation !== undefined ) {
var t = data.translation;
......@@ -699,7 +699,7 @@ THREE.VRMLLoader.prototype = {
}
if ( undefined !== data.rotation ) {
if ( data.rotation !== undefined ) {
var r = data.rotation;
......@@ -707,7 +707,7 @@ THREE.VRMLLoader.prototype = {
}
if ( undefined !== data.scale ) {
if ( data.scale !== undefined ) {
var s = data.scale;
......@@ -717,7 +717,7 @@ THREE.VRMLLoader.prototype = {
parent.add( object );
} else if ( 'Shape' === data.nodeType ) {
} else if ( data.nodeType === 'Shape' ) {
object = new THREE.Mesh();
......@@ -731,7 +731,7 @@ THREE.VRMLLoader.prototype = {
parent.add( object );
} else if ( 'Background' === data.nodeType ) {
} else if ( data.nodeType === 'Background' ) {
var segments = 20;
......@@ -774,25 +774,25 @@ THREE.VRMLLoader.prototype = {
} else if ( /geometry/.exec( data.string ) ) {
if ( 'Box' === data.nodeType ) {
if ( data.nodeType === 'Box' ) {
var s = data.size;
parent.geometry = new THREE.BoxBufferGeometry( s.x, s.y, s.z );
} else if ( 'Cylinder' === data.nodeType ) {
} else if ( data.nodeType === 'Cylinder' ) {
parent.geometry = new THREE.CylinderBufferGeometry( data.radius, data.radius, data.height );
} else if ( 'Cone' === data.nodeType ) {
} else if ( data.nodeType === 'Cone' ) {
parent.geometry = new THREE.CylinderBufferGeometry( data.topRadius, data.bottomRadius, data.height );
} else if ( 'Sphere' === data.nodeType ) {
} else if ( data.nodeType === 'Sphere' ) {
parent.geometry = new THREE.SphereBufferGeometry( data.radius );
} else if ( 'IndexedFaceSet' === data.nodeType ) {
} else if ( data.nodeType === 'IndexedFaceSet' ) {
var geometry = new THREE.BufferGeometry();
......@@ -809,7 +809,7 @@ THREE.VRMLLoader.prototype = {
// uvs
if ( 'TextureCoordinate' === child.nodeType ) {
if ( child.nodeType === 'TextureCoordinate' ) {
if ( child.points ) {
......@@ -826,7 +826,7 @@ THREE.VRMLLoader.prototype = {
// positions
if ( 'Coordinate' === child.nodeType ) {
if ( child.nodeType === 'Coordinate' ) {
if ( child.points ) {
......@@ -881,6 +881,8 @@ THREE.VRMLLoader.prototype = {
while ( indexes.length >= 3 && skip < ( indexes.length - 2 ) ) {
if ( data.ccw === undefined ) data.ccw = true; // ccw is true by default
var i1 = indexes[ 0 ];
var i2 = indexes[ skip + ( data.ccw ? 1 : 2 ) ];
var i3 = indexes[ skip + ( data.ccw ? 2 : 1 ) ];
......@@ -959,11 +961,11 @@ THREE.VRMLLoader.prototype = {
var child = data.children[ i ];
if ( 'Material' === child.nodeType ) {
if ( child.nodeType === 'Material' ) {
var material = new THREE.MeshPhongMaterial();
if ( undefined !== child.diffuseColor ) {
if ( child.diffuseColor !== undefined ) {
var d = child.diffuseColor;
......@@ -971,7 +973,7 @@ THREE.VRMLLoader.prototype = {
}
if ( undefined !== child.emissiveColor ) {
if ( child.emissiveColor !== undefined ) {
var e = child.emissiveColor;
......@@ -979,7 +981,7 @@ THREE.VRMLLoader.prototype = {
}
if ( undefined !== child.specularColor ) {
if ( child.specularColor !== undefined ) {
var s = child.specularColor;
......@@ -987,7 +989,7 @@ THREE.VRMLLoader.prototype = {
}
if ( undefined !== child.transparency ) {
if ( child.transparency !== undefined ) {
var t = child.transparency;
......@@ -1010,7 +1012,7 @@ THREE.VRMLLoader.prototype = {
}
if ( 'ImageTexture' === child.nodeType ) {
if ( child.nodeType === 'ImageTexture' ) {
var textureName = /"([^"]+)"/.exec( child.children[ 0 ] );
......@@ -1047,41 +1049,49 @@ THREE.VRMLLoader.prototype = {
var lines = data.split( '\n' );
// some lines do not have breaks
for ( var i = lines.length - 1; i > - 1; i -- ) {
var line = lines[ i ];
// split lines with {..{ or {..[ - some have both
if ( /{.*[{\[]/.test( lines[ i ] ) ) {
if ( /{.*[{\[]/.test( line ) ) {
var parts = lines[ i ].split( '{' ).join( '{\n' ).split( '\n' );
var parts = line.split( '{' ).join( '{\n' ).split( '\n' );
parts.unshift( 1 );
parts.unshift( i );
lines.splice.apply( lines, parts );
} else if ( /\].*}/.test( lines[ i ] ) ) {
} else if ( /\].*}/.test( line ) ) {
// split lines with ]..}
var parts = lines[ i ].split( ']' ).join( ']\n' ).split( '\n' );
var parts = line.split( ']' ).join( ']\n' ).split( '\n' );
parts.unshift( 1 );
parts.unshift( i );
lines.splice.apply( lines, parts );
}
if ( /}.*}/.test( lines[ i ] ) ) {
if ( /}.*}/.test( line ) ) {
// split lines with }..}
var parts = lines[ i ].split( '}' ).join( '}\n' ).split( '\n' );
var parts = line.split( '}' ).join( '}\n' ).split( '\n' );
parts.unshift( 1 );
parts.unshift( i );
lines.splice.apply( lines, parts );
}
// force the parser to create Coordinate node for empty coords
// coord USE something -> coord USE something Coordinate {}
if ( /^\b[^\s]+\b$/.test( line.trim() ) ) {
// prevent lines with single words like "coord" or "geometry", see #12209
lines[ i + 1 ] = line + ' ' + lines[ i + 1 ].trim();
lines.splice( i, 1 );
} else if ( ( line.indexOf( 'coord' ) > - 1 ) && ( line.indexOf( '[' ) < 0 ) && ( line.indexOf( '{' ) < 0 ) ) {
if ( ( lines[ i ].indexOf( 'coord' ) > - 1 ) && ( lines[ i ].indexOf( '[' ) < 0 ) && ( lines[ i ].indexOf( '{' ) < 0 ) ) {
// force the parser to create Coordinate node for empty coords
// coord USE something -> coord USE something Coordinate {}
lines[ i ] += ' Coordinate {}';
......
examples/js/Mirror.js → examples/js/objects/Mirror.js
浏览文件 @ c553f340
......@@ -239,3 +239,4 @@ THREE.Mirror = function ( width, height, options ) {
};
THREE.Mirror.prototype = Object.create( THREE.Mesh.prototype );
THREE.Mirror.prototype.constructor = THREE.Mirror;
examples/js/SkyShader.js → examples/js/objects/Sky.js
浏览文件 @ c553f340
......@@ -16,26 +16,21 @@
THREE.Sky = function () {
var skyShader = THREE.Sky.SkyShader;
var shader = THREE.Sky.SkyShader;
var skyUniforms = THREE.UniformsUtils.clone( skyShader.uniforms );
var skyMat = new THREE.ShaderMaterial( {
fragmentShader: skyShader.fragmentShader,
vertexShader: skyShader.vertexShader,
uniforms: skyUniforms,
var material = new THREE.ShaderMaterial( {
fragmentShader: shader.fragmentShader,
vertexShader: shader.vertexShader,
uniforms: THREE.UniformsUtils.clone( shader.uniforms ),
side: THREE.BackSide
} );
var skyGeo = new THREE.SphereBufferGeometry( 450000, 32, 15 );
var skyMesh = new THREE.Mesh( skyGeo, skyMat );
// Expose variables
this.mesh = skyMesh;
this.uniforms = skyUniforms;
THREE.Mesh.call( this, new THREE.SphereBufferGeometry( 1, 32, 15 ), material );
};
THREE.Sky.prototype = Object.create( THREE.Mesh.prototype );
THREE.Sky.SkyShader = {
uniforms: {
......
examples/js/WaterShader.js → examples/js/objects/Water.js
浏览文件 @ c553f340
......@@ -7,72 +7,73 @@
* @author Jonas Wagner / http://29a.ch/ && http://29a.ch/slides/2012/webglwater/ : Water shader explanations in WebGL
*/
THREE.Water = function ( renderer, camera, scene, options ) {
THREE.Water = function ( width, height, options ) {
THREE.Object3D.call( this );
this.name = 'water_' + this.id;
THREE.Mesh.call( this, new THREE.PlaneBufferGeometry( width, height ) );
function optionalParameter( value, defaultValue ) {
var scope = this;
return value !== undefined ? value : defaultValue;
options = options || {};
}
var textureWidth = options.textureWidth !== undefined ? options.textureWidth : 512;
var textureHeight = options.textureHeight !== undefined ? options.textureHeight : 512;
var clipBias = options.clipBias !== undefined ? options.clipBias : 0.0;
var alpha = options.alpha !== undefined ? options.alpha : 1.0;
var time = options.time !== undefined ? options.time : 0.0;
var normalSampler = options.waterNormals !== undefined ? options.waterNormals : null;
var sunDirection = options.sunDirection !== undefined ? options.sunDirection : new THREE.Vector3( 0.70707, 0.70707, 0.0 );
var sunColor = new THREE.Color( options.sunColor !== undefined ? options.sunColor : 0xffffff );
var waterColor = new THREE.Color( options.waterColor !== undefined ? options.waterColor : 0x7F7F7F );
var eye = options.eye !== undefined ? options.eye : new THREE.Vector3( 0, 0, 0 );
var distortionScale = options.distortionScale !== undefined ? options.distortionScale : 20.0;
var side = options.side !== undefined ? options.side : THREE.FrontSide;
var fog = options.fog !== undefined ? options.fog : false;
//
var mirrorPlane = new THREE.Plane();
var normal = new THREE.Vector3();
var mirrorWorldPosition = new THREE.Vector3();
var cameraWorldPosition = new THREE.Vector3();
var rotationMatrix = new THREE.Matrix4();
var lookAtPosition = new THREE.Vector3( 0, 0, - 1 );
var clipPlane = new THREE.Vector4();
var view = new THREE.Vector3();
var target = new THREE.Vector3();
var q = new THREE.Vector4();
options = options || {};
var textureMatrix = new THREE.Matrix4();
this.matrixNeedsUpdate = true;
var width = optionalParameter( options.textureWidth, 512 );
var height = optionalParameter( options.textureHeight, 512 );
this.clipBias = optionalParameter( options.clipBias, 0.0 );
this.alpha = optionalParameter( options.alpha, 1.0 );
this.time = optionalParameter( options.time, 0.0 );
this.normalSampler = optionalParameter( options.waterNormals, null );
this.sunDirection = optionalParameter( options.sunDirection, new THREE.Vector3( 0.70707, 0.70707, 0.0 ) );
this.sunColor = new THREE.Color( optionalParameter( options.sunColor, 0xffffff ) );
this.waterColor = new THREE.Color( optionalParameter( options.waterColor, 0x7F7F7F ) );
this.eye = optionalParameter( options.eye, new THREE.Vector3( 0, 0, 0 ) );
this.distortionScale = optionalParameter( options.distortionScale, 20.0 );
this.side = optionalParameter( options.side, THREE.FrontSide );
this.fog = optionalParameter( options.fog, false );
this.renderer = renderer;
this.scene = scene;
this.mirrorPlane = new THREE.Plane();
this.normal = new THREE.Vector3( 0, 0, 1 );
this.mirrorWorldPosition = new THREE.Vector3();
this.cameraWorldPosition = new THREE.Vector3();
this.rotationMatrix = new THREE.Matrix4();
this.lookAtPosition = new THREE.Vector3( 0, 0, - 1 );
this.clipPlane = new THREE.Vector4();
if ( camera instanceof THREE.PerspectiveCamera ) {
this.camera = camera;
} else {
this.camera = new THREE.PerspectiveCamera();
console.log( this.name + ': camera is not a Perspective Camera!' );
var mirrorCamera = new THREE.PerspectiveCamera();
}
var parameters = {
minFilter: THREE.LinearFilter,
magFilter: THREE.LinearFilter,
format: THREE.RGBFormat,
stencilBuffer: false
};
var renderTarget = new THREE.WebGLRenderTarget( textureWidth, textureHeight, parameters );
this.textureMatrix = new THREE.Matrix4();
if ( ! THREE.Math.isPowerOfTwo( textureWidth ) || ! THREE.Math.isPowerOfTwo( textureHeight ) ) {
this.mirrorCamera = this.camera.clone();
renderTarget.texture.generateMipmaps = false;
this.renderTarget = new THREE.WebGLRenderTarget( width, height );
this.renderTarget2 = new THREE.WebGLRenderTarget( width, height );
}
var mirrorShader = {
uniforms: THREE.UniformsUtils.merge( [
THREE.UniformsLib[ 'fog' ],
THREE.UniformsLib[ 'lights' ],
{
normalSampler: { value: null },
mirrorSampler: { value: null },
alpha: { value: 1.0 },
time: { value: 0.0 },
size: { value: 1.0 },
distortionScale: { value: 20.0 },
noiseScale: { value: 1.0 },
textureMatrix: { value: new THREE.Matrix4() },
......@@ -88,28 +89,29 @@ THREE.Water = function ( renderer, camera, scene, options ) {
'uniform float time;',
'varying vec4 mirrorCoord;',
'varying vec3 worldPosition;',
'varying vec4 worldPosition;',
THREE.ShaderChunk[ 'fog_pars_vertex' ],
THREE.ShaderChunk[ 'shadowmap_pars_vertex' ],
'void main() {',
' mirrorCoord = modelMatrix * vec4( position, 1.0 );',
' worldPosition = mirrorCoord.xyz;',
' worldPosition = mirrorCoord.xyzw;',
' mirrorCoord = textureMatrix * mirrorCoord;',
' vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );',
' gl_Position = projectionMatrix * mvPosition;',
THREE.ShaderChunk[ 'fog_vertex' ],
THREE.ShaderChunk[ 'shadowmap_vertex' ],
'}'
].join( '\n' ),
fragmentShader: [
'precision highp float;',
'uniform sampler2D mirrorSampler;',
'uniform float alpha;',
'uniform float time;',
'uniform float size;',
'uniform float distortionScale;',
'uniform sampler2D normalSampler;',
'uniform vec3 sunColor;',
......@@ -118,7 +120,7 @@ THREE.Water = function ( renderer, camera, scene, options ) {
'uniform vec3 waterColor;',
'varying vec4 mirrorCoord;',
'varying vec3 worldPosition;',
'varying vec4 worldPosition;',
'vec4 getNoise( vec2 uv ) {',
' vec2 uv0 = ( uv / 103.0 ) + vec2(time / 17.0, time / 29.0);',
......@@ -140,16 +142,21 @@ THREE.Water = function ( renderer, camera, scene, options ) {
'}',
THREE.ShaderChunk[ 'common' ],
THREE.ShaderChunk[ 'packing' ],
THREE.ShaderChunk[ 'bsdfs' ],
THREE.ShaderChunk[ 'fog_pars_fragment' ],
THREE.ShaderChunk[ 'lights_pars' ],
THREE.ShaderChunk[ 'shadowmap_pars_fragment' ],
THREE.ShaderChunk[ 'shadowmask_pars_fragment' ],
'void main() {',
' vec4 noise = getNoise( worldPosition.xz );',
' vec4 noise = getNoise( worldPosition.xz * size );',
' vec3 surfaceNormal = normalize( noise.xzy * vec3( 1.5, 1.0, 1.5 ) );',
' vec3 diffuseLight = vec3(0.0);',
' vec3 specularLight = vec3(0.0);',
' vec3 worldToEye = eye-worldPosition;',
' vec3 worldToEye = eye-worldPosition.xyz;',
' vec3 eyeDirection = normalize( worldToEye );',
' sunLight( surfaceNormal, eyeDirection, 100.0, 2.0, 0.5, diffuseLight, specularLight );',
......@@ -162,10 +169,11 @@ THREE.Water = function ( renderer, camera, scene, options ) {
' float rf0 = 0.3;',
' float reflectance = rf0 + ( 1.0 - rf0 ) * pow( ( 1.0 - theta ), 5.0 );',
' vec3 scatter = max( 0.0, dot( surfaceNormal, eyeDirection ) ) * waterColor;',
' vec3 albedo = mix( sunColor * diffuseLight * 0.3 + scatter, ( vec3( 0.1 ) + reflectionSample * 0.9 + reflectionSample * specularLight ), reflectance );',
' vec3 albedo = mix( ( sunColor * diffuseLight * 0.3 + scatter ) * getShadowMask(), ( vec3( 0.1 ) + reflectionSample * 0.9 + reflectionSample * specularLight ), reflectance);',
' vec3 outgoingLight = albedo;',
' gl_FragColor = vec4( outgoingLight, alpha );',
THREE.ShaderChunk[ 'tonemapping_fragment' ],
THREE.ShaderChunk[ 'fog_fragment' ],
'}'
......@@ -173,150 +181,129 @@ THREE.Water = function ( renderer, camera, scene, options ) {
};
var mirrorUniforms = THREE.UniformsUtils.clone( mirrorShader.uniforms );
this.material = new THREE.ShaderMaterial( {
var material = new THREE.ShaderMaterial( {
fragmentShader: mirrorShader.fragmentShader,
vertexShader: mirrorShader.vertexShader,
uniforms: mirrorUniforms,
uniforms: THREE.UniformsUtils.clone( mirrorShader.uniforms ),
transparent: true,
side: this.side,
fog: this.fog
lights: true,
side: side,
fog: fog
} );
this.material.uniforms.mirrorSampler.value = this.renderTarget.texture;
this.material.uniforms.textureMatrix.value = this.textureMatrix;
this.material.uniforms.alpha.value = this.alpha;
this.material.uniforms.time.value = this.time;
this.material.uniforms.normalSampler.value = this.normalSampler;
this.material.uniforms.sunColor.value = this.sunColor;
this.material.uniforms.waterColor.value = this.waterColor;
this.material.uniforms.sunDirection.value = this.sunDirection;
this.material.uniforms.distortionScale.value = this.distortionScale;
material.uniforms.mirrorSampler.value = renderTarget.texture;
material.uniforms.textureMatrix.value = textureMatrix;
material.uniforms.alpha.value = alpha;
material.uniforms.time.value = time;
material.uniforms.normalSampler.value = normalSampler;
material.uniforms.sunColor.value = sunColor;
material.uniforms.waterColor.value = waterColor;
material.uniforms.sunDirection.value = sunDirection;
material.uniforms.distortionScale.value = distortionScale;
this.material.uniforms.eye.value = this.eye;
material.uniforms.eye.value = eye;
if ( ! THREE.Math.isPowerOfTwo( width ) || ! THREE.Math.isPowerOfTwo( height ) ) {
scope.material = material;
this.renderTarget.texture.generateMipmaps = false;
this.renderTarget.texture.minFilter = THREE.LinearFilter;
this.renderTarget2.texture.generateMipmaps = false;
this.renderTarget2.texture.minFilter = THREE.LinearFilter;
scope.onBeforeRender = function ( renderer, scene, camera ) {
}
mirrorWorldPosition.setFromMatrixPosition( scope.matrixWorld );
cameraWorldPosition.setFromMatrixPosition( camera.matrixWorld );
this.updateTextureMatrix();
this.render();
rotationMatrix.extractRotation( scope.matrixWorld );
};
normal.set( 0, 0, 1 );
normal.applyMatrix4( rotationMatrix );
THREE.Water.prototype = Object.create( THREE.Object3D.prototype );
THREE.Water.prototype.constructor = THREE.Water;
view.subVectors( mirrorWorldPosition, cameraWorldPosition );
THREE.Water.prototype.render = function () {
// Avoid rendering when mirror is facing away
if ( this.matrixNeedsUpdate ) this.updateTextureMatrix();
if ( view.dot( normal ) > 0 ) return;
this.matrixNeedsUpdate = true;
view.reflect( normal ).negate();
view.add( mirrorWorldPosition );
// Render the mirrored view of the current scene into the target texture
var scene = this;
rotationMatrix.extractRotation( camera.matrixWorld );
while ( scene.parent !== null ) {
lookAtPosition.set( 0, 0, - 1 );
lookAtPosition.applyMatrix4( rotationMatrix );
lookAtPosition.add( cameraWorldPosition );
scene = scene.parent;
target.subVectors( mirrorWorldPosition, lookAtPosition );
target.reflect( normal ).negate();
target.add( mirrorWorldPosition );
}
mirrorCamera.position.copy( view );
mirrorCamera.up.set( 0, 1, 0 );
mirrorCamera.up.applyMatrix4( rotationMatrix );
mirrorCamera.up.reflect( normal );
mirrorCamera.lookAt( target );
if ( scene !== undefined && scene instanceof THREE.Scene ) {
mirrorCamera.far = camera.far; // Used in WebGLBackground
this.material.visible = false;
mirrorCamera.updateMatrixWorld();
mirrorCamera.projectionMatrix.copy( camera.projectionMatrix );
this.renderer.render( scene, this.mirrorCamera, this.renderTarget, true );
// Update the texture matrix
textureMatrix.set(
0.5, 0.0, 0.0, 0.5,
0.0, 0.5, 0.0, 0.5,
0.0, 0.0, 0.5, 0.5,
0.0, 0.0, 0.0, 1.0
);
textureMatrix.multiply( mirrorCamera.projectionMatrix );
textureMatrix.multiply( mirrorCamera.matrixWorldInverse );
this.material.visible = true;
}
};
// Now update projection matrix with new clip plane, implementing code from: http://www.terathon.com/code/oblique.html
// Paper explaining this technique: http://www.terathon.com/lengyel/Lengyel-Oblique.pdf
mirrorPlane.setFromNormalAndCoplanarPoint( normal, mirrorWorldPosition );
mirrorPlane.applyMatrix4( mirrorCamera.matrixWorldInverse );
clipPlane.set( mirrorPlane.normal.x, mirrorPlane.normal.y, mirrorPlane.normal.z, mirrorPlane.constant );
THREE.Water.prototype.updateTextureMatrix = function () {
var projectionMatrix = mirrorCamera.projectionMatrix;
this.updateMatrixWorld();
this.camera.updateMatrixWorld();
q.x = ( Math.sign( clipPlane.x ) + projectionMatrix.elements[ 8 ] ) / projectionMatrix.elements[ 0 ];
q.y = ( Math.sign( clipPlane.y ) + projectionMatrix.elements[ 9 ] ) / projectionMatrix.elements[ 5 ];
q.z = - 1.0;
q.w = ( 1.0 + projectionMatrix.elements[ 10 ] ) / projectionMatrix.elements[ 14 ];
this.mirrorWorldPosition.setFromMatrixPosition( this.matrixWorld );
this.cameraWorldPosition.setFromMatrixPosition( this.camera.matrixWorld );
// Calculate the scaled plane vector
clipPlane.multiplyScalar( 2.0 / clipPlane.dot( q ) );
this.rotationMatrix.extractRotation( this.matrixWorld );
// Replacing the third row of the projection matrix
projectionMatrix.elements[ 2 ] = clipPlane.x;
projectionMatrix.elements[ 6 ] = clipPlane.y;
projectionMatrix.elements[ 10 ] = clipPlane.z + 1.0 - clipBias;
projectionMatrix.elements[ 14 ] = clipPlane.w;
this.normal.set( 0, 0, 1 );
this.normal.applyMatrix4( this.rotationMatrix );
eye.setFromMatrixPosition( camera.matrixWorld );
var view = this.mirrorWorldPosition.clone().sub( this.cameraWorldPosition );
view.reflect( this.normal ).negate();
view.add( this.mirrorWorldPosition );
//
this.rotationMatrix.extractRotation( this.camera.matrixWorld );
var currentRenderTarget = renderer.getRenderTarget();
this.lookAtPosition.set( 0, 0, - 1 );
this.lookAtPosition.applyMatrix4( this.rotationMatrix );
this.lookAtPosition.add( this.cameraWorldPosition );
var currentVrEnabled = renderer.vr.enabled;
var currentShadowAutoUpdate = renderer.shadowMap.autoUpdate;
var target = this.mirrorWorldPosition.clone().sub( this.lookAtPosition );
target.reflect( this.normal ).negate();
target.add( this.mirrorWorldPosition );
scope.visible = false;
this.up.set( 0, - 1, 0 );
this.up.applyMatrix4( this.rotationMatrix );
this.up.reflect( this.normal ).negate();
renderer.vr.enabled = false; // Avoid camera modification and recursion
renderer.shadowMap.autoUpdate = false; // Avoid re-computing shadows
this.mirrorCamera.position.copy( view );
this.mirrorCamera.up = this.up;
this.mirrorCamera.lookAt( target );
this.mirrorCamera.aspect = this.camera.aspect;
renderer.render( scene, mirrorCamera, renderTarget, true );
this.mirrorCamera.updateProjectionMatrix();
this.mirrorCamera.updateMatrixWorld();
scope.visible = true;
// Update the texture matrix
this.textureMatrix.set(
0.5, 0.0, 0.0, 0.5,
0.0, 0.5, 0.0, 0.5,
0.0, 0.0, 0.5, 0.5,
0.0, 0.0, 0.0, 1.0
);
this.textureMatrix.multiply( this.mirrorCamera.projectionMatrix );
this.textureMatrix.multiply( this.mirrorCamera.matrixWorldInverse );
renderer.vr.enabled = currentVrEnabled;
renderer.shadowMap.autoUpdate = currentShadowAutoUpdate;
// Now update projection matrix with new clip plane, implementing code from: http://www.terathon.com/code/oblique.html
// Paper explaining this technique: http://www.terathon.com/lengyel/Lengyel-Oblique.pdf
this.mirrorPlane.setFromNormalAndCoplanarPoint( this.normal, this.mirrorWorldPosition );
this.mirrorPlane.applyMatrix4( this.mirrorCamera.matrixWorldInverse );
this.clipPlane.set( this.mirrorPlane.normal.x, this.mirrorPlane.normal.y, this.mirrorPlane.normal.z, this.mirrorPlane.constant );
var q = new THREE.Vector4();
var projectionMatrix = this.mirrorCamera.projectionMatrix;
renderer.setRenderTarget( currentRenderTarget );
q.x = ( Math.sign( this.clipPlane.x ) + projectionMatrix.elements[ 8 ] ) / projectionMatrix.elements[ 0 ];
q.y = ( Math.sign( this.clipPlane.y ) + projectionMatrix.elements[ 9 ] ) / projectionMatrix.elements[ 5 ];
q.z = - 1.0;
q.w = ( 1.0 + projectionMatrix.elements[ 10 ] ) / projectionMatrix.elements[ 14 ];
// Calculate the scaled plane vector
var c = this.clipPlane.multiplyScalar( 2.0 / this.clipPlane.dot( q ) );
// Replacing the third row of the projection matrix
projectionMatrix.elements[ 2 ] = c.x;
projectionMatrix.elements[ 6 ] = c.y;
projectionMatrix.elements[ 10 ] = c.z + 1.0 - this.clipBias;
projectionMatrix.elements[ 14 ] = c.w;
var worldCoordinates = new THREE.Vector3();
worldCoordinates.setFromMatrixPosition( this.camera.matrixWorld );
this.eye = worldCoordinates;
this.material.uniforms.eye.value = this.eye;
};
};
THREE.Water.prototype = Object.create( THREE.Mesh.prototype );
THREE.Water.prototype.constructor = THREE.Water;
examples/js/postprocessing/EffectComposer.js
浏览文件 @ c553f340
......@@ -15,7 +15,7 @@ THREE.EffectComposer = function ( renderer, renderTarget ) {
stencilBuffer: false
};
var size = renderer.getSize();
var size = renderer.getDrawingBufferSize();
renderTarget = new THREE.WebGLRenderTarget( size.width, size.height, parameters );
renderTarget.texture.name = 'EffectComposer.rt1';
......@@ -62,7 +62,7 @@ Object.assign( THREE.EffectComposer.prototype, {
this.passes.push( pass );
var size = this.renderer.getSize();
var size = this.renderer.getDrawingBufferSize();
pass.setSize( size.width, size.height );
},
......@@ -127,7 +127,7 @@ Object.assign( THREE.EffectComposer.prototype, {
if ( renderTarget === undefined ) {
var size = this.renderer.getSize();
var size = this.renderer.getDrawingBufferSize();
renderTarget = this.renderTarget1.clone();
renderTarget.setSize( size.width, size.height );
......
examples/js/postprocessing/OutlinePass.js
浏览文件 @ c553f340
......@@ -15,6 +15,7 @@ THREE.OutlinePass = function ( resolution, scene, camera, selectedObjects ) {
this.edgeStrength = 3.0;
this.downSampleRatio = 2;
this.pulsePeriod = 0;
this.renderToScreen = false;
THREE.Pass.call( this );
......@@ -321,6 +322,8 @@ THREE.OutlinePass.prototype = Object.assign( Object.create( THREE.Pass.prototype
this.overlayMaterial.uniforms[ "edgeStrength" ].value = this.edgeStrength;
this.overlayMaterial.uniforms[ "edgeGlow" ].value = this.edgeGlow;
this.overlayMaterial.uniforms[ "usePatternTexture" ].value = this.usePatternTexture;
this.overlayMaterial.uniforms[ "visibleEdgeColor" ].value = this.tempPulseColor1;
this.overlayMaterial.uniforms[ "hiddenEdgeColor" ].value = this.tempPulseColor2;
if ( maskActive ) renderer.context.enable( renderer.context.STENCIL_TEST );
......@@ -367,7 +370,7 @@ THREE.OutlinePass.prototype = Object.assign( Object.create( THREE.Pass.prototype
float depth = unpackRGBAToDepth(texture2DProj( depthTexture, projTexCoord ));\
float viewZ = -perspectiveDepthToViewZ( depth, cameraNearFar.x, cameraNearFar.y );\
float depthTest = (-vPosition.z > viewZ) ? 1.0 : 0.0;\
gl_FragColor = vec4(0.0, depthTest, 1.0, 1.0);\
gl_FragColor = vec4(0.0, depthTest, 1.0, 0.0);\
}"
} );
......@@ -411,7 +414,7 @@ THREE.OutlinePass.prototype = Object.assign( Object.create( THREE.Pass.prototype
float a1 = min(c1.g, c2.g);\
float a2 = min(c3.g, c4.g);\
float visibilityFactor = min(a1, a2);\
vec3 edgeColor = 1.0 - visibilityFactor > 0.001 ? visibleEdgeColor : hiddenEdgeColor;\
vec3 edgeColor = 1.0 - visibilityFactor > 0.001 ? vec3(1,0,0) : vec3(0,1,0);\
gl_FragColor = vec4(edgeColor, 1.0) * vec4(d);\
}"
} );
......@@ -482,7 +485,9 @@ THREE.OutlinePass.prototype = Object.assign( Object.create( THREE.Pass.prototype
"patternTexture": { value: null },
"edgeStrength": { value: 1.0 },
"edgeGlow": { value: 1.0 },
"usePatternTexture": { value: 0.0 }
"usePatternTexture": { value: 0.0 },
"visibleEdgeColor": { value: new THREE.Vector3( 1.0, 1.0, 1.0 ) },
"hiddenEdgeColor": { value: new THREE.Vector3( 1.0, 1.0, 1.0 ) },
},
vertexShader:
......@@ -501,6 +506,8 @@ THREE.OutlinePass.prototype = Object.assign( Object.create( THREE.Pass.prototype
uniform float edgeStrength;\
uniform float edgeGlow;\
uniform bool usePatternTexture;\
uniform vec3 visibleEdgeColor;\
uniform vec3 hiddenEdgeColor;\
\
void main() {\
vec4 edgeValue1 = texture2D(edgeTexture1, vUv);\
......@@ -508,16 +515,18 @@ THREE.OutlinePass.prototype = Object.assign( Object.create( THREE.Pass.prototype
vec4 maskColor = texture2D(maskTexture, vUv);\
vec4 patternColor = texture2D(patternTexture, 6.0 * vUv);\
float visibilityFactor = 1.0 - maskColor.g > 0.0 ? 1.0 : 0.5;\
vec4 edgeValue = edgeValue1 + edgeValue2 * edgeGlow;\
vec4 finalColor = edgeStrength * maskColor.r * edgeValue;\
vec4 edgeValue = edgeStrength * (edgeValue1 + edgeValue2 * edgeGlow);\
edgeValue.a = max(edgeValue.r, edgeValue.g);\
vec3 edgeColor = edgeValue.r * visibleEdgeColor + edgeValue.g * hiddenEdgeColor;\
vec4 finalColor = vec4(edgeColor, edgeValue.a*1.0);\
if(usePatternTexture)\
finalColor += + visibilityFactor * (1.0 - maskColor.r) * (1.0 - patternColor.r);\
gl_FragColor = finalColor;\
}",
blending: THREE.AdditiveBlending,
blending: THREE.NormalBlending,
depthTest: false,
depthWrite: false,
transparent: true
transparent: true,
} );
}
......
examples/webgl_animation_cloth.html
浏览文件 @ c553f340
......@@ -44,40 +44,6 @@
<script src="js/Cloth.js"></script>
<script type="x-shader/x-fragment" id="fragmentShaderDepth">
#include <packing>
uniform sampler2D texture;
varying vec2 vUV;
void main() {
vec4 pixel = texture2D( texture, vUV );
if ( pixel.a < 0.5 ) discard;
gl_FragData[ 0 ] = packDepthToRGBA( gl_FragCoord.z );
}
</script>
<script type="x-shader/x-vertex" id="vertexShaderDepth">
varying vec2 vUV;
void main() {
vUV = 0.75 * uv;
vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
gl_Position = projectionMatrix * mvPosition;
}
</script>
<script>
/* testing cloth simulation */
......@@ -134,10 +100,7 @@
// camera
camera = new THREE.PerspectiveCamera( 30, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.x = 1000;
camera.position.y = 50;
camera.position.z = 1500;
scene.add( camera );
camera.position.set( 1000, 50, 1500 );
// lights
......@@ -145,7 +108,7 @@
scene.add( new THREE.AmbientLight( 0x666666 ) );
light = new THREE.DirectionalLight( 0xdfebff, 1.75 );
light = new THREE.DirectionalLight( 0xdfebff, 1 );
light.position.set( 50, 200, 100 );
light.position.multiplyScalar( 1.3 );
......@@ -170,6 +133,8 @@
var loader = new THREE.TextureLoader();
var clothTexture = loader.load( 'textures/patterns/circuit_pattern.png' );
clothTexture.wrapS = clothTexture.wrapT = THREE.RepeatWrapping;
clothTexture.offset.set( 0.1, 0.1 );
clothTexture.repeat.set( 0.5, 0.5 );
clothTexture.anisotropy = 16;
var clothMaterial = new THREE.MeshPhongMaterial( {
......@@ -180,12 +145,8 @@
} );
// cloth geometry
clothGeometry = new THREE.ParametricGeometry( clothFunction, cloth.w, cloth.h );
clothGeometry.dynamic = true;
var uniforms = { texture: { value: clothTexture } };
var vertexShader = document.getElementById( 'vertexShaderDepth' ).textContent;
var fragmentShader = document.getElementById( 'fragmentShaderDepth' ).textContent;
clothGeometry = new THREE.ParametricGeometry( clothFunction, cloth.w, cloth.h );
// cloth mesh
......@@ -194,16 +155,17 @@
object.castShadow = true;
scene.add( object );
object.customDepthMaterial = new THREE.ShaderMaterial( {
uniforms: uniforms,
vertexShader: vertexShader,
fragmentShader: fragmentShader,
side: THREE.DoubleSide
object.customDepthMaterial = new THREE.MeshDepthMaterial( {
depthPacking: THREE.RGBADepthPacking,
map: clothTexture,
alphaTest: 0.5
} );
// sphere
var ballGeo = new THREE.SphereGeometry( ballSize, 20, 20 );
var ballGeo = new THREE.SphereBufferGeometry( ballSize, 32, 16 );
var ballMaterial = new THREE.MeshPhongMaterial( { color: 0xaaaaaa } );
sphere = new THREE.Mesh( ballGeo, ballMaterial );
......@@ -228,7 +190,7 @@
// poles
var poleGeo = new THREE.BoxGeometry( 5, 375, 5 );
var poleGeo = new THREE.BoxBufferGeometry( 5, 375, 5 );
var poleMat = new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0x111111, shininess: 100 } );
var mesh = new THREE.Mesh( poleGeo, poleMat );
......@@ -245,14 +207,14 @@
mesh.castShadow = true;
scene.add( mesh );
var mesh = new THREE.Mesh( new THREE.BoxGeometry( 255, 5, 5 ), poleMat );
var mesh = new THREE.Mesh( new THREE.BoxBufferGeometry( 255, 5, 5 ), poleMat );
mesh.position.y = - 250 + ( 750 / 2 );
mesh.position.x = 0;
mesh.receiveShadow = true;
mesh.castShadow = true;
scene.add( mesh );
var gg = new THREE.BoxGeometry( 10, 10, 10 );
var gg = new THREE.BoxBufferGeometry( 10, 10, 10 );
var mesh = new THREE.Mesh( gg, poleMat );
mesh.position.y = - 250;
mesh.position.x = 125;
......@@ -285,7 +247,7 @@
var controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.maxPolarAngle = Math.PI * 0.5;
controls.minDistance = 1000;
controls.maxDistance = 7500;
controls.maxDistance = 5000;
// performance monitor
......@@ -341,16 +303,13 @@
}
clothGeometry.verticesNeedUpdate = true;
clothGeometry.computeFaceNormals();
clothGeometry.computeVertexNormals();
clothGeometry.normalsNeedUpdate = true;
clothGeometry.verticesNeedUpdate = true;
sphere.position.copy( ballPosition );
camera.lookAt( scene.position );
renderer.render( scene, camera );
}
......
examples/webgl_mirror.html
浏览文件 @ c553f340
......@@ -35,7 +35,7 @@
</div>
<script src="../build/three.js"></script>
<script src="js/Mirror.js"></script>
<script src="js/objects/Mirror.js"></script>
<script src="js/controls/OrbitControls.js"></script>
<script>
......
examples/webgl_mirror_nodes.html
浏览文件 @ c553f340
......@@ -36,8 +36,8 @@
<script src="../build/three.js"></script>
<script src="js/libs/dat.gui.min.js"></script>
<script src="js/Mirror.js"></script>
<script src="js/MirrorRTT.js"></script>
<script src="js/objects/Mirror.js"></script>
<script src="js/objects/MirrorRTT.js"></script>
<script src="js/controls/OrbitControls.js"></script>
<!-- NodeLibrary -->
......
examples/webgl_postprocessing_nodes.html
浏览文件 @ c553f340
......@@ -465,12 +465,12 @@
} );
break;
case 'blur':
// PASS
var size = renderer.getSize();
var size = renderer.getDrawingBufferSize();
var blurScreen = new THREE.BlurNode( new THREE.ScreenNode() );
blurScreen.size = new THREE.Vector2( size.width, size.height );
......
examples/webgl_shaders_ocean.html
浏览文件 @ c553f340
......@@ -33,10 +33,11 @@
<script src="../build/three.js"></script>
<script src="js/controls/OrbitControls.js"></script>
<script src="js/WaterShader.js"></script>
<script src="js/objects/Water.js"></script>
<script src="js/Detector.js"></script>
<script src="js/libs/stats.min.js"></script>
<script src="js/libs/dat.gui.min.js"></script>
<script>
......@@ -48,17 +49,14 @@
}
var container, stats;
var camera, scene, renderer;
var controls, water, sphere;
var camera, scene, renderer, light;
var controls, water, sphere, cubeMap;
var parameters = {
width: 2000,
height: 2000,
widthSegments: 250,
heightSegments: 250,
depth: 1500,
param: 4,
filterparam: 1
oceanSide: 2000,
size: 1.0,
distortionScale: 3.7,
alpha: 1.0
};
var waterNormals;
......@@ -80,61 +78,103 @@
//
scene = new THREE.Scene();
scene.fog = new THREE.FogExp2( 0xaabbbb, 0.0001 );
scene.fog = new THREE.FogExp2( 0xaabbbb, 0.001 );
//
camera = new THREE.PerspectiveCamera( 55, window.innerWidth / window.innerHeight, 0.5, 3000000 );
camera.position.set( 2000, 750, 2000 );
camera = new THREE.PerspectiveCamera( 55, window.innerWidth / window.innerHeight, 1, 20000 );
camera.position.set( 30, 30, 100 );
//
controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.enablePan = false;
controls.minDistance = 1000.0;
controls.maxDistance = 5000.0;
controls.maxPolarAngle = Math.PI * 0.495;
controls.target.set( 0, 500, 0 );
controls.update();
controls.target.set( 0, 10, 0 );
controls.enablePan = false;
controls.minDistance = 40.0;
controls.maxDistance = 200.0;
camera.lookAt( controls.target );
setLighting();
//
scene.add( new THREE.AmbientLight( 0x444444 ) );
setWater();
//
var light = new THREE.DirectionalLight( 0xffffbb, 1 );
light.position.set( - 1, 1, - 1 );
scene.add( light );
setSkybox();
//
waterNormals = new THREE.TextureLoader().load( 'textures/waternormals.jpg' );
waterNormals.wrapS = waterNormals.wrapT = THREE.RepeatWrapping;
water = new THREE.Water( renderer, camera, scene, {
textureWidth: 512,
textureHeight: 512,
waterNormals: waterNormals,
alpha: 1.0,
sunDirection: light.position.clone().normalize(),
sunColor: 0xffffff,
waterColor: 0x001e0f,
distortionScale: 50.0,
fog: scene.fog != undefined
var geometry = new THREE.IcosahedronGeometry( 20, 2 );
for ( var i = 0, j = geometry.faces.length; i < j; i ++ ) {
geometry.faces[ i ].color.setHex( Math.random() * 0xffffff );
}
var material = new THREE.MeshPhongMaterial( {
vertexColors: THREE.FaceColors,
shininess: 10,
envMap: cubeMap,
side: THREE.DoubleSide
} );
sphere = new THREE.Mesh( geometry, material );
sphere.castShadow = true;
scene.add( sphere );
//
stats = new Stats();
container.appendChild( stats.dom );
//
gui = new dat.GUI();
gui.add( parameters, 'distortionScale', 0, 8, 0.1 );
gui.add( parameters, 'size', 0.1, 10, 0.1 );
gui.add( parameters, 'alpha', 0.9, 1, .001 );
//
window.addEventListener( 'resize', onWindowResize, false );
var mirrorMesh = new THREE.Mesh(
new THREE.PlaneBufferGeometry( parameters.width * 500, parameters.height * 500 ),
water.material
}
function setWater() {
water = new THREE.Water(
parameters.oceanSide * 5,
parameters.oceanSide * 5,
{
textureWidth: 512,
textureHeight: 512,
waterNormals: new THREE.TextureLoader().load( 'textures/waternormals.jpg', function ( texture ) {
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
}),
alpha: parameters.alpha,
sunDirection: light.position.clone().normalize(),
sunColor: 0xffffff,
waterColor: 0x001e0f,
distortionScale: parameters.distortionScale,
fog: scene.fog != undefined
}
);
mirrorMesh.add( water );
mirrorMesh.rotation.x = - Math.PI * 0.5;
scene.add( mirrorMesh );
water.rotation.x = - Math.PI / 2;
water.receiveShadow = true;
// skybox
scene.add( water );
}
var cubeMap = new THREE.CubeTexture( [] );
function setSkybox() {
cubeMap = new THREE.CubeTexture( [] );
cubeMap.format = THREE.RGBFormat;
var loader = new THREE.ImageLoader();
......@@ -172,44 +212,32 @@
fragmentShader: cubeShader.fragmentShader,
vertexShader: cubeShader.vertexShader,
uniforms: cubeShader.uniforms,
depthWrite: false,
side: THREE.BackSide
} );
var skyBox = new THREE.Mesh(
new THREE.BoxGeometry( 1000000, 1000000, 1000000 ),
new THREE.BoxGeometry( parameters.oceanSide * 5 + 100, parameters.oceanSide * 5 + 100, parameters.oceanSide * 5 + 100 ),
skyBoxMaterial
);
scene.add( skyBox );
//
var geometry = new THREE.IcosahedronGeometry( 400, 4 );
for ( var i = 0, j = geometry.faces.length; i < j; i ++ ) {
geometry.faces[ i ].color.setHex( Math.random() * 0xffffff );
}
var material = new THREE.MeshPhongMaterial( {
vertexColors: THREE.FaceColors,
shininess: 100,
envMap: cubeMap
} );
sphere = new THREE.Mesh( geometry, material );
scene.add( sphere );
}
//
function setLighting() {
stats = new Stats();
container.appendChild( stats.dom );
renderer.shadowMap.enabled = true;
//
light = new THREE.DirectionalLight( 0xffffbb, 1 );
light.position.set( - 30, 30, - 30 );
light.castShadow = true;
light.shadow.camera.top = 45;
light.shadow.camera.right = 40;
light.shadow.camera.left = light.shadow.camera.bottom = -40;
light.shadow.camera.near = 1;
light.shadow.camera.far = 200;
window.addEventListener( 'resize', onWindowResize, false );
scene.add( light, new THREE.AmbientLight( 0x888888 ) );
}
......@@ -222,8 +250,6 @@
}
//
function animate() {
requestAnimationFrame( animate );
......@@ -236,12 +262,15 @@
var time = performance.now() * 0.001;
sphere.position.y = Math.sin( time ) * 500 + 250;
sphere.position.y = Math.sin( time ) * 20 + 5;
sphere.rotation.x = time * 0.5;
sphere.rotation.z = time * 0.51;
water.material.uniforms.time.value += 1.0 / 60.0;
water.render();
water.material.uniforms.size.value = parameters.size;
water.material.uniforms.distortionScale.value = parameters.distortionScale;
water.material.uniforms.alpha.value = parameters.alpha;
renderer.render( scene, camera );
}
......
examples/webgl_shaders_sky.html
浏览文件 @ c553f340
......@@ -44,7 +44,7 @@
<script src="../build/three.js"></script>
<script src="js/controls/OrbitControls.js"></script>
<script src="js/SkyShader.js"></script>
<script src="js/objects/Sky.js"></script>
<script src="js/Detector.js"></script>
<script src="js/libs/dat.gui.min.js"></script>
......@@ -65,9 +65,10 @@
function initSky() {
// Add Sky Mesh
// Add Sky
sky = new THREE.Sky();
scene.add( sky.mesh );
sky.scale.setScalar( 450000 );
scene.add( sky );
// Add Sun Helper
sunSphere = new THREE.Mesh(
......@@ -95,7 +96,7 @@
function guiChanged() {
var uniforms = sky.uniforms;
var uniforms = sky.material.uniforms;
uniforms.turbidity.value = effectController.turbidity;
uniforms.rayleigh.value = effectController.rayleigh;
uniforms.luminance.value = effectController.luminance;
......@@ -111,7 +112,7 @@
sunSphere.visible = effectController.sun;
sky.uniforms.sunPosition.value.copy( sunSphere.position );
uniforms.sunPosition.value.copy( sunSphere.position );
renderer.render( scene, camera );
......
examples/webvr_sandbox.html
浏览文件 @ c553f340
......@@ -19,7 +19,7 @@
<script src="js/vr/WebVR.js"></script>
<script src="js/Mirror.js"></script>
<script src="js/objects/Mirror.js"></script>
<script>
......
src/core/BufferGeometry.js
浏览文件 @ c553f340
......@@ -39,8 +39,6 @@ function BufferGeometry() {
}
BufferGeometry.MaxIndex = 65535;
Object.assign( BufferGeometry.prototype, EventDispatcher.prototype, {
isBufferGeometry: true,
......
src/core/Object3D.js
浏览文件 @ c553f340
......@@ -591,8 +591,8 @@ Object.assign( Object3D.prototype, EventDispatcher.prototype, {
toJSON: function ( meta ) {
// meta is '' when called from JSON.stringify
var isRootObject = ( meta === undefined || meta === '' );
// meta is a string when called from JSON.stringify
var isRootObject = ( meta === undefined || typeof meta === 'string' );
var output = {};
......
src/loaders/MaterialLoader.js
浏览文件 @ c553f340
......@@ -82,6 +82,13 @@ Object.assign( MaterialLoader.prototype, {
if ( json.wireframeLinecap !== undefined ) material.wireframeLinecap = json.wireframeLinecap;
if ( json.wireframeLinejoin !== undefined ) material.wireframeLinejoin = json.wireframeLinejoin;
if ( json.rotation !== undefined ) material.rotation = json.rotation;
if ( json.linewidth !== 1 ) material.linewidth = json.linewidth;
if ( json.dashSize !== undefined ) material.dashSize = json.dashSize;
if ( json.gapSize !== undefined ) material.gapSize = json.gapSize;
if ( json.scale !== undefined ) material.scale = json.scale;
if ( json.skinning !== undefined ) material.skinning = json.skinning;
if ( json.morphTargets !== undefined ) material.morphTargets = json.morphTargets;
if ( json.dithering !== undefined ) material.dithering = json.dithering;
......
src/materials/Material.js
浏览文件 @ c553f340
......@@ -131,7 +131,7 @@ Object.assign( Material.prototype, EventDispatcher.prototype, {
toJSON: function ( meta ) {
var isRoot = meta === undefined;
var isRoot = ( meta === undefined || typeof meta === 'string' );
if ( isRoot ) {
......@@ -162,6 +162,8 @@ Object.assign( Material.prototype, EventDispatcher.prototype, {
if ( this.metalness !== undefined ) data.metalness = this.metalness;
if ( this.emissive && this.emissive.isColor ) data.emissive = this.emissive.getHex();
if ( this.emissiveIntensity !== 1) data.emissiveIntensity = this.emissiveIntensity;
if ( this.specular && this.specular.isColor ) data.specular = this.specular.getHex();
if ( this.shininess !== undefined ) data.shininess = this.shininess;
if ( this.clearCoat !== undefined ) data.clearCoat = this.clearCoat;
......@@ -223,6 +225,14 @@ Object.assign( Material.prototype, EventDispatcher.prototype, {
data.depthTest = this.depthTest;
data.depthWrite = this.depthWrite;
// rotation (SpriteMaterial)
if ( this.rotation !== 0 ) data.rotation = this.rotation;
if ( this.linewidth !== 1 ) data.linewidth = this.linewidth;
if ( this.dashSize !== undefined ) data.dashSize = this.dashSize;
if ( this.gapSize !== undefined ) data.gapSize = this.gapSize;
if ( this.scale !== undefined ) data.scale = this.scale;
if ( this.dithering === true ) data.dithering = true;
if ( this.alphaTest > 0 ) data.alphaTest = this.alphaTest;
......
src/renderers/WebGLRenderer.js
浏览文件 @ c553f340
......@@ -24,7 +24,6 @@ import { WebGLProperties } from './webgl/WebGLProperties.js';
import { WebGLState } from './webgl/WebGLState.js';
import { WebGLCapabilities } from './webgl/WebGLCapabilities.js';
import { WebVRManager } from './webvr/WebVRManager.js';
import { BufferGeometry } from '../core/BufferGeometry.js';
import { WebGLExtensions } from './webgl/WebGLExtensions.js';
import { Vector3 } from '../math/Vector3.js';
import { WebGLClipping } from './webgl/WebGLClipping.js';
......@@ -258,14 +257,9 @@ function WebGLRenderer( parameters ) {
extensions.get( 'OES_texture_half_float' );
extensions.get( 'OES_texture_half_float_linear' );
extensions.get( 'OES_standard_derivatives' );
extensions.get( 'OES_element_index_uint' );
extensions.get( 'ANGLE_instanced_arrays' );
if ( extensions.get( 'OES_element_index_uint' ) ) {
BufferGeometry.MaxIndex = 4294967296;
}
utils = new WebGLUtils( _gl, extensions );
capabilities = new WebGLCapabilities( _gl, extensions, parameters );
......
src/renderers/shaders/ShaderChunk/bsdfs.glsl
浏览文件 @ c553f340
......@@ -191,7 +191,7 @@ vec3 LTC_Evaluate( const in vec3 N, const in vec3 V, const in vec3 P, const in m
T2 = - cross( N, T1 ); // negated from paper; possibly due to a different assumed handedness of world coordinate system
// compute transform
mat3 mat = mInv * transpose( mat3( T1, T2, N ) );
mat3 mat = mInv * transposeMat3( mat3( T1, T2, N ) );
// transform rect
vec3 coords[ 4 ];
......
src/renderers/shaders/ShaderChunk/common.glsl
浏览文件 @ c553f340
......@@ -73,12 +73,13 @@ vec3 linePlaneIntersect( in vec3 pointOnLine, in vec3 lineDirection, in vec3 poi
}
mat3 transpose( const in mat3 v ) {
mat3 transposeMat3( const in mat3 m ) {
mat3 tmp;
tmp[0] = vec3(v[0].x, v[1].x, v[2].x);
tmp[1] = vec3(v[0].y, v[1].y, v[2].y);
tmp[2] = vec3(v[0].z, v[1].z, v[2].z);
tmp[ 0 ] = vec3( m[ 0 ].x, m[ 1 ].x, m[ 2 ].x );
tmp[ 1 ] = vec3( m[ 0 ].y, m[ 1 ].y, m[ 2 ].y );
tmp[ 2 ] = vec3( m[ 0 ].z, m[ 1 ].z, m[ 2 ].z );
return tmp;
......
src/textures/Texture.js
浏览文件 @ c553f340
......@@ -126,7 +126,9 @@ Object.assign( Texture.prototype, EventDispatcher.prototype, {
toJSON: function ( meta ) {
if ( meta.textures[ this.uuid ] !== undefined ) {
var isRootObject = ( meta === undefined || typeof meta === 'string' );
if ( ! isRootObject && meta.textures[ this.uuid ] !== undefined ) {
return meta.textures[ this.uuid ];
......@@ -210,7 +212,7 @@ Object.assign( Texture.prototype, EventDispatcher.prototype, {
}
if ( meta.images[ image.uuid ] === undefined ) {
if ( ! isRootObject && meta.images[ image.uuid ] === undefined ) {
meta.images[ image.uuid ] = {
uuid: image.uuid,
......@@ -223,7 +225,11 @@ Object.assign( Texture.prototype, EventDispatcher.prototype, {
}
meta.textures[ this.uuid ] = output;
if ( ! isRootObject ) {
meta.textures[ this.uuid ] = output;
}
return output;
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或