Skip to content

T
three.js

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

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

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

提交 9841cb2b 编写于 作者: D Daniel
浏览文件
操作

Merge remote-tracking branch 'mrdoob/dev' into dev

上级 9c0f3460 4024d52d
展开全部 隐藏空白更改
内联 并排
Showing with 741 addition and 127 deletion
build/three.js
浏览文件 @ 9841cb2b
此差异已折叠。
build/three.min.js
浏览文件 @ 9841cb2b
此差异已折叠。
docs/api/extras/ImageUtils.html 已删除 100644 → 0
浏览文件 @ 9c0f3460
<!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>[name]</h1>
<div class="desc">A Helper class to ease the loading of images of different types.</div>
<h2>Properties</h2>
<h3>[property:string crossOrigin]</h3>
<div>
The crossOrigin string to implement CORS for loading the image from a different domain that allows CORS.
</div>
<h2>Methods</h2>
<h3>[method:DataTexture generateDataTexture]([page:Number width], [page:Number height], [page:Number color])</h3>
<div>
width -- The width of the texture. <br />
height -- The height of the texture. <br />
color -- The hexadecimal value of the color.
</div>
<div>
Generates a texture of a single color. It is a DataTexture with format, RGBFormat.
</div>
<h3>[method:CompressedTexture parseDDS]([page:String buffer], [page:boolean loadMipmaps])</h3>
<div>
buffer -- A string containing the data of the dds. <br />
loadMipmaps -- A boolean to indicate if you need to load the mipmaps. Default is True.
</div>
<div>
Parses a DDS Image from the string into a CompressedTexture.
</div>
<h3>[method:Texture loadTexture]([page:String url], [page:UVMapping mapping], [page:Function onLoad], [page:Function onError])</h3>
<div>
url -- the url of the texture<br />
mapping -- Can be an instance of [page:UVMapping THREE.UVMapping], [page:CubeReflectionMapping THREE.CubeReflectionMapping] or [page:SphericalReflectionMapping THREE.SphericalReflectionMapping]. Describes how the image is applied to the object.<br />Use undefined instead of null as a default value. See mapping property of [page:Texture texture] for more details. <br/>
onLoad -- callback function<br />
onError -- callback function
</div>
<div>
A helper function to generates a [page:Texture THREE.Texture] from an image URL. Provides a load and error
callback.
</div>
<h3>[method:canvas getNormalMap]([page:Image image], [page:Float depth])</h3>
<div>
image -- A loaded image element <br />
depth -- The depth of the normal map. Defaults to between -1 and 1.
</div>
<div>
Translates an image element into a normal map with the range (-1, -1, -1) to (1, 1, 1) multiplied by the depth.
Returns a canvas element.
</div>
<h3>[method:CubeTexture loadTextureCube]([page:Array array], [page:Textures mapping], [page:function onLoad], [page:function onError])</h3>
<div>
array -- An array of 6 images <br />
mapping -- Either [page:Textures THREE.CubeReflectionMapping] or [page:Textures THREE.CubeRefractionMapping]<br />
onLoad -- callback <br />
onError -- callback
</div>
<div>
Creates a [page:CubeTexture] from 6 images.<br /><br />
The images are loaded in the following order where p is positiive and n is negative: [ px, nx, py, ny, pz, nz ].
See [page:CubeTexture] for an example in code.
</div>
<h2>Source</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
</html>
docs/api/textures/CubeTexture.html
浏览文件 @ 9841cb2b
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta charset="utf-8" />
<base href="../../" />
<script src="list.js"></script>
<script src="page.js"></script>
......@@ -17,15 +17,15 @@
<h2>Example</h2>
<code>
var path = "textures/cube/pisa/";
var format = '.png';
var urls = [
path + 'px' + format, path + 'nx' + format,
path + 'py' + format, path + 'ny' + format,
path + 'pz' + format, path + 'nz' + format
];
var textureCube = THREE.ImageUtils.loadTextureCube( urls );
var loader = new THREE.CubeTextureLoader();
loader.setPath( 'textures/cube/pisa/' );
var textureCube = loader.load( [
'px.png', 'nx.png',
'py.png', 'ny.png',
'pz.png', 'nz.png'
] );
var material = new THREE.MeshBasicMaterial( { color: 0xffffff, envMap: textureCube } );
</code>
......@@ -37,9 +37,7 @@
<div>
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]<br />
<br />
Generally [page:ImageUtils.loadTextureCube] is used instead of using CubeTexture directly.
[page:Textures THREE.CubeReflectionMapping] (default) or [page:Textures THREE.CubeRefractionMapping]
</div>
......
docs/list.js
浏览文件 @ 9841cb2b
......@@ -159,7 +159,6 @@ var list = {
"Extras": [
[ "FontUtils", "api/extras/FontUtils" ],
[ "GeometryUtils", "api/extras/GeometryUtils" ],
[ "ImageUtils", "api/extras/ImageUtils" ],
[ "SceneUtils", "api/extras/SceneUtils" ]
],
......
editor/index.html
浏览文件 @ 9841cb2b
......@@ -23,6 +23,7 @@
<script src="../examples/js/loaders/KMZLoader.js"></script>
<script src="../examples/js/loaders/MD2Loader.js"></script>
<script src="../examples/js/loaders/OBJLoader.js"></script>
<script src="../examples/js/loaders/PlayCanvasLoader.js"></script>
<script src="../examples/js/loaders/PLYLoader.js"></script>
<script src="../examples/js/loaders/STLLoader.js"></script>
<script src="../examples/js/loaders/UTF8Loader.js"></script>
......@@ -288,7 +289,7 @@
if ( parent !== null ) editor.execute( new CmdRemoveObject( object ) );
break;
case 90: // Register Ctrl-Z for Undo, Ctrl-Shift-Z for Redo
if ( event.ctrlKey && event.shiftKey ) {
......
editor/js/Loader.js
浏览文件 @ 9841cb2b
......@@ -252,6 +252,24 @@ var Loader = function ( editor ) {
break;
case 'playcanvas':
var reader = new FileReader();
reader.addEventListener( 'load', function ( event ) {
var contents = event.target.result;
var json = JSON.parse( contents );
var loader = new THREE.PlayCanvasLoader();
var object = loader.parse( json );
editor.execute( new CmdAddObject( object ) );
}, false );
reader.readAsText( file );
break;
case 'ply':
var reader = new FileReader();
......
examples/js/loaders/BabylonLoader.js
浏览文件 @ 9841cb2b
......@@ -10,7 +10,7 @@ THREE.BabylonLoader = function ( manager ) {
THREE.BabylonLoader.prototype = {
constructor: THREE.ObjectLoader,
constructor: THREE.BabylonLoader,
load: function ( url, onLoad, onProgress, onError ) {
......
examples/js/loaders/PlayCanvasLoader.js 0 → 100644
浏览文件 @ 9841cb2b
/**
* @author mrdoob / http://mrdoob.com/
*/
THREE.PlayCanvasLoader = function ( manager ) {
this.manager = ( manager !== undefined ) ? manager : THREE.DefaultLoadingManager;
};
THREE.PlayCanvasLoader.prototype = {
constructor: THREE.PlayCanvasLoader,
load: function ( url, onLoad, onProgress, onError ) {
var scope = this;
var loader = new THREE.XHRLoader( scope.manager );
loader.setCrossOrigin( this.crossOrigin );
loader.load( url, function ( text ) {
onLoad( scope.parse( JSON.parse( text ) ) );
}, onProgress, onError );
},
parse: function ( json ) {
function parseVertices( data ) {
var attributes = {};
for ( var name in data ) {
var attribute = data[ name ];
var type = attribute.type;
var size = attribute.components;
var array;
if ( type === 'float32' ) array = new Float32Array( attribute.data );
if ( array === undefined ) console.log( 'PlayCanvasLoader: TODO', type );
attributes[ name ] = new THREE.BufferAttribute( array, size );
}
data._attributes = attributes;
}
function parseMeshes( data ) {
var geometry = new THREE.BufferGeometry();
geometry.setIndex( new THREE.Uint16Attribute( data.indices, 1 ) );
var attributes = model.vertices[ data.vertices ]._attributes;
for ( var name in attributes ) {
var attribute = attributes[ name ];
if ( name === 'texCoord0' ) name = 'uv';
geometry.addAttribute( name, attribute );
}
data._geometry = geometry;
}
function parseMeshInstances( data ) {
var node = model.nodes[ data.node ];
var mesh = model.meshes[ data.mesh ];
if ( node._geometries === undefined ) {
node._geometries = [];
}
node._geometries.push( mesh._geometry );
}
function parseNodes( data ) {
var object = new THREE.Group();
object.name = data.name;
if ( data._geometries !== undefined ) {
var material = new THREE.MeshPhongMaterial();
for ( var i = 0; i < data._geometries.length; i ++ ) {
var geometry = data._geometries[ i ];
object.add( new THREE.Mesh( geometry, material ) );
}
}
for ( var i = 0; i < data.rotation.length; i ++ ) {
data.rotation[ i ] *= Math.PI / 180;
}
object.position.fromArray( data.position );
object.rotation.fromArray( data.rotation );
object.scale.fromArray( data.scale );
data._object = object;
}
//
console.log( json );
var model = json.model;
for ( var i = 0; i < model.vertices.length; i ++ ) {
parseVertices( model.vertices[ i ] );
}
for ( var i = 0; i < model.meshes.length; i ++ ) {
parseMeshes( model.meshes[ i ] );
}
for ( var i = 0; i < model.meshInstances.length; i ++ ) {
parseMeshInstances( model.meshInstances[ i ] );
}
for ( var i = 0; i < model.nodes.length; i ++ ) {
parseNodes( model.nodes[ i ] );
}
for ( var i = 0; i < model.parents.length; i ++ ) {
var parent = model.parents[ i ];
if ( parent === -1 ) continue;
model.nodes[ parent ]._object.add( model.nodes[ i ]._object );
}
return model.nodes[ 0 ]._object;
},
setCrossOrigin: function ( value ) {
this.crossOrigin = value;
}
};
examples/webgl_materials_basic_variations.html 0 → 100644
浏览文件 @ 9841cb2b
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - materials</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: #fff;
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;
}
</style>
</head>
<body>
<div id="container"></div>
<div id="info"><a href="http://threejs.org" target="_blank">three.js</a> - Basic Material Variantions by <a href="http://clara.io/" target="_blank">Ben Houston</a>.</div>
<script src="../build/three.min.js"></script>
<script src="js/controls/OrbitControls.js"></script>
<script src="js/geometries/TextGeometry.js"></script>
<script src="js/utils/FontUtils.js"></script>
<script src="fonts/gentilis_regular.typeface.js"></script>
<script src="js/Detector.js"></script>
<script src="js/libs/stats.min.js"></script>
<script>
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var container, stats;
var camera, scene, renderer, controls, objects = [];
var particleLight;
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.set( 0.0, 400, 400 * 3.5 );
scene = new THREE.Scene();
// Materials
var imgTexture = THREE.ImageUtils.loadTexture( "textures/planets/moon_1024.jpg" );
imgTexture.wrapS = imgTexture.wrapT = THREE.RepeatWrapping;
imgTexture.anisotropy = 16;
imgTexture = null;
var shininess = 50, specular = 0x333333, shading = THREE.SmoothShading;
var materials = [];
var path = "textures/cube/SwedishRoyalCastle/";
var format = '.jpg';
var urls = [
path + 'px' + format, path + 'nx' + format,
path + 'py' + format, path + 'ny' + format,
path + 'pz' + format, path + 'nz' + format
];
var reflectionCube = THREE.ImageUtils.loadTextureCube( urls );
reflectionCube.format = THREE.RGBFormat;
var cubeWidth = 400;
var numberOfSphersPerSide = 5;
var sphereRadius = ( cubeWidth / numberOfSphersPerSide ) * 0.8 * 0.5;
var stepSize = 1.0 / numberOfSphersPerSide;
var geometry = new THREE.SphereBufferGeometry( sphereRadius, 32, 16 );
for( var alpha = 0; alpha <= 1.0; alpha += stepSize ) {
var baseColor = new THREE.Color().setHSL( alpha, 0.5, 0.5 );
if( alpha >= 0.5 ) {
reflectionCube = null;
}
for( var beta = 0; beta <= 1.0; beta += stepSize ) {
var reflectivity = beta;
for( var gamma = 0; gamma <= 1.0; gamma += stepSize ) {
var diffuseColor = baseColor.clone().multiplyScalar( gamma );
var material = new THREE.MeshBasicMaterial( { map: imgTexture, color: diffuseColor, reflectivity: reflectivity, shading: THREE.SmoothShading, envMap: reflectionCube } )
var mesh = new THREE.Mesh( geometry, material );
mesh.position.x = alpha * 400 - 200;
mesh.position.y = beta * 400 - 200;
mesh.position.z = gamma * 400 - 200;
objects.push( mesh );
scene.add( mesh );
}
}
}
function addLabel( name, location ) {
var textGeo = new THREE.TextGeometry( name, {
size: 20,
height: 5,
curveSegments: 10,
font: 'gentilis',
weight: 'normal',
style: 'normal',
material: 0,
extrudeMaterial: 1
});
var textMaterial = new THREE.MeshBasicMaterial( { color: 0xffffff } );
var textMesh = new THREE.Mesh( textGeo, textMaterial );
textMesh.position.copy( location );
scene.add( textMesh );
}
addLabel( "+hue", new THREE.Vector3( -350, 0, 0 ) );
addLabel( "-hue", new THREE.Vector3( 350, 0, 0 ) );
addLabel( "-reflectivity", new THREE.Vector3( 0, -300, 0 ) );
addLabel( "+reflectivity", new THREE.Vector3( 0, 300, 0 ) );
addLabel( "-diffuse", new THREE.Vector3( 0, 0, -300 ) );
addLabel( "+diffuse", new THREE.Vector3( 0, 0, 300 ) );
addLabel( "envMap", new THREE.Vector3( -350, 300, 0 ) );
addLabel( "no envMap", new THREE.Vector3( 350, 300, 0 ) );
particleLight = new THREE.Mesh( new THREE.SphereBufferGeometry( 4, 8, 8 ), new THREE.MeshBasicMaterial( { color: 0xffffff } ) );
scene.add( particleLight );
// Lights
scene.add( new THREE.AmbientLight( 0x222222 ) );
var directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
directionalLight.position.set( 1, 1, 1 ).normalize();
scene.add( directionalLight );
var pointLight = new THREE.PointLight( 0xffffff, 2, 800 );
particleLight.add( pointLight );
//
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setClearColor( 0x0a0a0a );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.sortObjects = true;
container.appendChild( renderer.domElement );
renderer.gammaInput = true;
renderer.gammaOutput = true;
//
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
container.appendChild( stats.domElement );
controls = new THREE.OrbitControls( camera );
controls.target.set( 0, 0, 0 );
controls.update();
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
//
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
var timer = Date.now() * 0.00025;
//camera.position.x = Math.cos( timer ) * 800;
//camera.position.z = Math.sin( timer ) * 800;
camera.lookAt( scene.position );
for ( var i = 0, l = objects.length; i < l; i ++ ) {
var object = objects[ i ];
object.rotation.y += 0.005;
}
particleLight.position.x = Math.sin( timer * 7 ) * 300;
particleLight.position.y = Math.cos( timer * 5 ) * 400;
particleLight.position.z = Math.cos( timer * 3 ) * 300;
renderer.render( scene, camera );
}
</script>
</body>
</html>
examples/webgl_materials_lambert_variations.html 0 → 100644
浏览文件 @ 9841cb2b
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - materials</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: #fff;
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;
}
</style>
</head>
<body>
<div id="container"></div>
<div id="info"><a href="http://threejs.org" target="_blank">three.js</a> - Lambert Material Variantions by <a href="http://clara.io/" target="_blank">Ben Houston</a>.</div>
<script src="../build/three.min.js"></script>
<script src="js/controls/OrbitControls.js"></script>
<script src="js/geometries/TextGeometry.js"></script>
<script src="js/utils/FontUtils.js"></script>
<script src="fonts/gentilis_regular.typeface.js"></script>
<script src="js/Detector.js"></script>
<script src="js/libs/stats.min.js"></script>
<script>
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var container, stats;
var camera, scene, renderer, controls, objects = [];
var particleLight;
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.set( 0.0, 400, 400 * 3.5 );
scene = new THREE.Scene();
// Materials
var imgTexture = THREE.ImageUtils.loadTexture( "textures/planets/moon_1024.jpg" );
imgTexture.wrapS = imgTexture.wrapT = THREE.RepeatWrapping;
imgTexture.anisotropy = 16;
imgTexture = null;
var shininess = 50, specular = 0x333333, shading = THREE.SmoothShading;
var materials = [];
var path = "textures/cube/SwedishRoyalCastle/";
var format = '.jpg';
var urls = [
path + 'px' + format, path + 'nx' + format,
path + 'py' + format, path + 'ny' + format,
path + 'pz' + format, path + 'nz' + format
];
var reflectionCube = THREE.ImageUtils.loadTextureCube( urls );
reflectionCube.format = THREE.RGBFormat;
var cubeWidth = 400;
var numberOfSphersPerSide = 5;
var sphereRadius = ( cubeWidth / numberOfSphersPerSide ) * 0.8 * 0.5;
var stepSize = 1.0 / numberOfSphersPerSide;
var geometry = new THREE.SphereBufferGeometry( sphereRadius, 32, 16 );
for( var alpha = 0; alpha <= 1.0; alpha += stepSize ) {
var baseColor = new THREE.Color().setHSL( alpha, 0.5, 0.5 );
if( alpha >= 0.5 ) {
reflectionCube = null;
}
for( var beta = 0; beta <= 1.0; beta += stepSize ) {
var reflectivity = beta;
for( var gamma = 0; gamma <= 1.0; gamma += stepSize ) {
var diffuseColor = baseColor.clone().multiplyScalar( gamma );
var material = new THREE.MeshLambertMaterial( { map: imgTexture, color: diffuseColor, reflectivity: reflectivity, shading: THREE.SmoothShading, envMap: reflectionCube } )
var mesh = new THREE.Mesh( geometry, material );
mesh.position.x = alpha * 400 - 200;
mesh.position.y = beta * 400 - 200;
mesh.position.z = gamma * 400 - 200;
objects.push( mesh );
scene.add( mesh );
}
}
}
function addLabel( name, location ) {
var textGeo = new THREE.TextGeometry( name, {
size: 20,
height: 5,
curveSegments: 10,
font: 'gentilis',
weight: 'normal',
style: 'normal',
material: 0,
extrudeMaterial: 1
});
var textMaterial = new THREE.MeshBasicMaterial( { color: 0xffffff } );
var textMesh = new THREE.Mesh( textGeo, textMaterial );
textMesh.position.copy( location );
scene.add( textMesh );
}
addLabel( "+hue", new THREE.Vector3( -350, 0, 0 ) );
addLabel( "-hue", new THREE.Vector3( 350, 0, 0 ) );
addLabel( "-reflectivity", new THREE.Vector3( 0, -300, 0 ) );
addLabel( "+reflectivity", new THREE.Vector3( 0, 300, 0 ) );
addLabel( "-diffuse", new THREE.Vector3( 0, 0, -300 ) );
addLabel( "+diffuse", new THREE.Vector3( 0, 0, 300 ) );
addLabel( "envMap", new THREE.Vector3( -350, 300, 0 ) );
addLabel( "no envMap", new THREE.Vector3( 350, 300, 0 ) );
particleLight = new THREE.Mesh( new THREE.SphereBufferGeometry( 4, 8, 8 ), new THREE.MeshBasicMaterial( { color: 0xffffff } ) );
scene.add( particleLight );
// Lights
scene.add( new THREE.AmbientLight( 0x222222 ) );
var directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
directionalLight.position.set( 1, 1, 1 ).normalize();
scene.add( directionalLight );
var pointLight = new THREE.PointLight( 0xffffff, 2, 800 );
particleLight.add( pointLight );
//
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setClearColor( 0x0a0a0a );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.sortObjects = true;
container.appendChild( renderer.domElement );
renderer.gammaInput = true;
renderer.gammaOutput = true;
//
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
container.appendChild( stats.domElement );
controls = new THREE.OrbitControls( camera );
controls.target.set( 0, 0, 0 );
controls.update();
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
//
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
var timer = Date.now() * 0.00025;
//camera.position.x = Math.cos( timer ) * 800;
//camera.position.z = Math.sin( timer ) * 800;
camera.lookAt( scene.position );
for ( var i = 0, l = objects.length; i < l; i ++ ) {
var object = objects[ i ];
object.rotation.y += 0.005;
}
particleLight.position.x = Math.sin( timer * 7 ) * 300;
particleLight.position.y = Math.cos( timer * 5 ) * 400;
particleLight.position.z = Math.cos( timer * 3 ) * 300;
renderer.render( scene, camera );
}
</script>
</body>
</html>
examples/webgl_materials_phong_variations.html
浏览文件 @ 9841cb2b
......@@ -81,8 +81,7 @@
var reflectionCube = THREE.ImageUtils.loadTextureCube( urls );
reflectionCube.format = THREE.RGBFormat;
reflectionCube = null;
var cubeWidth = 400;
var numberOfSphersPerSide = 5;
var sphereRadius = ( cubeWidth / numberOfSphersPerSide ) * 0.8 * 0.5;
......@@ -91,20 +90,30 @@
var geometry = new THREE.SphereBufferGeometry( sphereRadius, 32, 16 );
for( var alpha = 0; alpha <= 1.0; alpha += stepSize ) {
var localReflectionCube;
for( var alpha = 0, alphaIndex = 0; alpha <= 1.0; alpha += stepSize, alphaIndex ++ ) {
if( alphaIndex % 2 === 0 ) {
localReflectionCube = null;
}
else {
localReflectionCube = reflectionCube;
}
var specularShininess = Math.pow( 2, alpha * 10 );
for( var beta = 0; beta <= 1.0; beta += stepSize ) {
var specularColor = new THREE.Color( beta * 0.2, beta * 0.2, beta * 0.2 );
var reflectivity = beta;
for( var gamma = 0; gamma <= 1.0; gamma += stepSize ) {
// basic monochromatic energy preservation
var diffuseColor = new THREE.Color( 0, 0, gamma ).multiplyScalar( 1 - beta * 0.2 );
var material = new THREE.MeshPhongMaterial( { map: imgTexture, bumpMap: imgTexture, bumpScale: bumpScale, color: diffuseColor, specular: specularColor, shininess: specularShininess, shading: THREE.SmoothShading, envMap: reflectionCube, } )
var material = new THREE.MeshPhongMaterial( { map: imgTexture, bumpMap: imgTexture, bumpScale: bumpScale, color: diffuseColor, specular: specularColor, reflectivity: reflectivity, shininess: specularShininess, shading: THREE.SmoothShading, envMap: localReflectionCube } )
var mesh = new THREE.Mesh( geometry, material );
......@@ -145,8 +154,8 @@
addLabel( "-shininess", new THREE.Vector3( -350, 0, 0 ) );
addLabel( "+shininess", new THREE.Vector3( 350, 0, 0 ) );
addLabel( "-specular", new THREE.Vector3( 0, -300, 0 ) );
addLabel( "+specular", new THREE.Vector3( 0, 300, 0 ) );
addLabel( "-specular, -reflectivity", new THREE.Vector3( 0, -300, 0 ) );
addLabel( "+specular, +reflectivity", new THREE.Vector3( 0, 300, 0 ) );
addLabel( "-diffuse", new THREE.Vector3( 0, 0, -300 ) );
addLabel( "+diffuse", new THREE.Vector3( 0, 0, 300 ) );
......
examples/webgl_materials_physical_variations.html
浏览文件 @ 9841cb2b
......@@ -88,11 +88,19 @@
var geometry = new THREE.SphereBufferGeometry( sphereRadius, 32, 16 );
for( var alpha = 0; alpha <= 1.0; alpha += stepSize ) {
var localReflectionCube;
for( var alpha = 0, alphaIndex = 0; alpha <= 1.0; alpha += stepSize, alphaIndex ++ ) {
var roughness = 1.0 - alpha;
if( alphaIndex % 2 === 0 ) {
localReflectionCube = null;
}
else {
localReflectionCube = reflectionCube;
}
for( var beta = 0; beta <= 1.0; beta += stepSize ) {
var metalness = beta;
......@@ -102,7 +110,7 @@
// basic monochromatic energy preservation
var diffuseColor = new THREE.Color( gamma, 0, 0 ).multiplyScalar( 1 - 0.08 );
var material = new THREE.MeshPhysicalMaterial( { map: imgTexture, bumpMap: imgTexture, bumpScale: bumpScale, color: diffuseColor, metalness: metalness, roughness: roughness, shading: THREE.SmoothShading, envMap: reflectionCube } )
var material = new THREE.MeshPhysicalMaterial( { map: imgTexture, bumpMap: imgTexture, bumpScale: bumpScale, color: diffuseColor, metalness: metalness, roughness: roughness, shading: THREE.SmoothShading, envMap: localReflectionCube } )
var mesh = new THREE.Mesh( geometry, material );
......
src/renderers/shaders/ShaderChunk/envmap_pars_fragment.glsl
浏览文件 @ 9841cb2b
#ifdef USE_ENVMAP
uniform float reflectivity;
#ifdef ENVMAP_TYPE_CUBE
uniform samplerCube envMap;
#else
......
utils/build/build.py
浏览文件 @ 9841cb2b
......@@ -62,9 +62,9 @@ def main(argv=None):
if filename.endswith(".glsl"):
tmp.write(u'THREE.ShaderChunk[ \'' + os.path.splitext(os.path.basename(filename))[0] + u'\'] = "')
text = f.read()
text = re.sub(r"\t*//.*\n", "", text) # remove //
text = re.sub(r"\t*\/\*[\s\S]*\*\/\n", "", text) # remove /* */
text = re.sub(r"\n+", '\\\\n', text) # line breaks to \n
text = re.sub(r"[ \t]*//.*\n", "", text) # remove //
text = re.sub(r"[ \t]*/\*[\s\S]*?\*/", "", text) # remove /* */
text = re.sub(r"\n+", '\\\\n', text) # \n+ to \n
tmp.write(text)
tmp.write(u'";\n\n')
else:
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或