Skip to content

T
three.js

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

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

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

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

Examples: Clean up

上级 444f5737
隐藏空白更改
内联 并排
Showing with 135 addition and 121 deletion
examples/js/pmrem/PMREMGenerator.js
浏览文件 @ 3bbef603
......@@ -53,7 +53,7 @@ THREE.PMREMGenerator = function ( sourceTexture, samplesPerLevel, resolution ) {
this.shader = this.getShader();
this.shader.defines[ 'SAMPLES_PER_LEVEL' ] = this.samplesPerLevel;
this.planeMesh = new THREE.Mesh( new THREE.PlaneGeometry( 2, 2, 0 ), this.shader );
this.planeMesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2, 2, 0 ), this.shader );
this.planeMesh.material.side = THREE.DoubleSide;
this.scene = new THREE.Scene();
this.scene.add( this.planeMesh );
......
examples/webgl_loader_texture_ktx.html
浏览文件 @ 3bbef603
......@@ -82,7 +82,7 @@
scene = new THREE.Scene();
var geometry = new THREE.BoxGeometry( 200, 200, 200 );
var geometry = new THREE.BoxBufferGeometry( 200, 200, 200 );
var material1, material2;
// TODO: add cubemap support
......
examples/webgl_materials_parallaxmap.html
浏览文件 @ 3bbef603
......@@ -56,10 +56,10 @@
<script src="js/shaders/ParallaxShader.js"></script>
<script>
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var stats;
var camera, scene, material, renderer;
var camera, scene, material, renderer, stats;
var effectController = {
'mode': 'relief',
......@@ -81,7 +81,35 @@
camera.position.z = 2;
scene = new THREE.Scene();
initScene();
//
var shader = THREE.ParallaxShader;
var uniforms = THREE.UniformsUtils.clone( shader.uniforms );
var parameters = {
fragmentShader: shader.fragmentShader,
vertexShader: shader.vertexShader,
uniforms: uniforms
};
//
var textureLoader = new THREE.TextureLoader();
material = new THREE.ShaderMaterial( parameters );
material.map = textureLoader.load( 'textures/brick_diffuse.jpg' );
material.bumpMap = textureLoader.load( 'textures/brick_bump.jpg' );
material.map.anisotropy = 4;
material.bumpMap.anisotropy = 4;
uniforms[ 'map' ].value = material.map;
uniforms[ 'bumpMap' ].value = material.bumpMap;
//
var geometry = new THREE.BoxBufferGeometry( 1.0, 1.0, 1.0 );
var mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
//
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
......@@ -91,11 +119,17 @@
renderer.gammaInput = true;
renderer.gammaOutput = true;
//
var controls = new THREE.OrbitControls( camera, renderer.domElement );
//
stats = new Stats();
container.appendChild( stats.dom );
//
window.addEventListener( 'resize', onWindowResize, false );
}
......@@ -124,6 +158,7 @@
gui.add( effectController, 'maxLayers', 1.0, 30, 1 ).onChange( guiChanged );
guiChanged();
}
function onWindowResize() {
......@@ -135,32 +170,6 @@
}
function initScene() {
var shader = THREE.ParallaxShader;
var uniforms = THREE.UniformsUtils.clone( shader.uniforms );
var parameters = {
fragmentShader: shader.fragmentShader,
vertexShader: shader.vertexShader,
uniforms: uniforms
};
var textureLoader = new THREE.TextureLoader();
material = new THREE.ShaderMaterial( parameters );
material.map = textureLoader.load( 'textures/brick_diffuse.jpg' );
material.bumpMap = textureLoader.load( 'textures/brick_bump.jpg' );
material.map.anisotropy = 4;
material.bumpMap.anisotropy = 4;
uniforms[ 'map' ].value = material.map;
uniforms[ 'bumpMap' ].value = material.bumpMap;
var geometry = new THREE.BoxGeometry( 1.0, 1.0, 1.0 );
var mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
}
function animate() {
requestAnimationFrame( animate );
......@@ -175,6 +184,7 @@
renderer.render( scene, camera );
}
</script>
</body>
......
examples/webgl_materials_texture_canvas.html
浏览文件 @ 3bbef603
......@@ -67,7 +67,7 @@
material = new THREE.MeshBasicMaterial();
mesh = new THREE.Mesh( new THREE.BoxGeometry( 200, 200, 200 ), material );
mesh = new THREE.Mesh( new THREE.BoxBufferGeometry( 200, 200, 200 ), material );
scene.add( mesh );
renderer = new THREE.WebGLRenderer( { antialias: true } );
......@@ -79,42 +79,53 @@
}
// Sets up the drawing canvas and adds it as the material map.
// Sets up the drawing canvas and adds it as the material map
function setupCanvasDrawing() {
// get canvas and context
var drawingCanvas = document.getElementById( 'drawing-canvas' );
var drawingContext = drawingCanvas.getContext( '2d' );
// draw white background
drawingContext.fillStyle = "#FFFFFF";
drawingContext.fillStyle = '#FFFFFF';
drawingContext.fillRect( 0, 0, 128, 128 );
// set canvas as material.map (this could be done to any map, bump, displacement etc.)
material.map = new THREE.Texture( drawingCanvas );
// need to flag the map as needing updating.
material.map.needsUpdate = true;
// set the variable to keep track of when to draw
var paint = false;
// add canvas event listeners
drawingCanvas.addEventListener( 'mousedown', function( e ) {
paint = true;
drawStartPos.set( e.offsetX, e.offsetY );
} );
drawingCanvas.addEventListener( 'mousemove', function( e ) {
if(paint){
draw( drawingContext, e.offsetX, e.offsetY );
}
if( paint ) draw( drawingContext, e.offsetX, e.offsetY );
} );
drawingCanvas.addEventListener( 'mouseup', function( e ) {
paint = false;
} );
drawingCanvas.addEventListener( 'mouseleave', function( e ) {
paint = false;
} );
}
......
examples/webgl_materials_texture_rotation.html
浏览文件 @ 3bbef603
......@@ -82,7 +82,7 @@
controls.maxDistance = 50;
controls.maxPolarAngle = Math.PI / 2;
var geometry = new THREE.BoxGeometry( 10, 10, 10 );
var geometry = new THREE.BoxBufferGeometry( 10, 10, 10 );
var loader = new THREE.TextureLoader();
var texture = loader.load( 'textures/UV_Grid_Sm.jpg', render );
......
examples/webgl_materials_video.html
浏览文件 @ 3bbef603
......@@ -131,7 +131,7 @@
ox = i;
oy = j;
geometry = new THREE.BoxGeometry( xsize, ysize, xsize );
geometry = new THREE.BoxBufferGeometry( xsize, ysize, xsize );
change_uvs( geometry, ux, uy, ox, oy );
......@@ -202,20 +202,12 @@
function change_uvs( geometry, unitx, unity, offsetx, offsety ) {
var faceVertexUvs = geometry.faceVertexUvs[ 0 ];
var uvs = geometry.attributes.uv.array;
for ( var i = 0; i < faceVertexUvs.length; i ++ ) {
for ( var i = 0; i < uvs.length; i += 2 ) {
var uvs = faceVertexUvs[ i ];
for ( var j = 0; j < uvs.length; j ++ ) {
var uv = uvs[ j ];
uv.x = ( uv.x + offsetx ) * unitx;
uv.y = ( uv.y + offsety ) * unity;
}
uvs[ i ] = ( uvs[ i ] + offsetx ) * unitx;
uvs[ i + 1 ] = ( uvs[ i + 1 ] + offsety ) * unity;
}
......
examples/webgl_postprocessing_unreal_bloom.html
浏览文件 @ 3bbef603
......@@ -105,7 +105,7 @@
metalness: 1.0
} );
var geometry = new THREE.TorusKnotGeometry( 18, 8, 150, 20 );
var geometry = new THREE.TorusKnotBufferGeometry( 18, 8, 150, 20 );
var torusMesh1 = new THREE.Mesh( geometry, standardMaterial );
torusMesh1.position.x = 0.0;
torusMesh1.castShadow = true;
......
examples/webgl_shaders_vector.html
浏览文件 @ 3bbef603
......@@ -120,7 +120,6 @@
group = new THREE.Group();
scene.add( group );
var textMaterial = new THREE.MeshBasicMaterial( {
color: new THREE.Color(0, 0, 1 ),
side: THREE.DoubleSide,
......@@ -129,7 +128,7 @@
var textShapes = font.generateShapes( theText, 180, 2 );
var text3d = new THREE.ShapeGeometry( textShapes );
var text3d = new THREE.ShapeBufferGeometry( textShapes );
text3d.computeBoundingBox();
var centerOffset = -0.5 * ( text3d.boundingBox.max.x - text3d.boundingBox.min.x );
......@@ -144,7 +143,7 @@
var vB = new THREE.Vector2();
var vDot = new THREE.Vector2();
function processShape(path, reverse) {
function processShape( path, reverse ) {
var pts = []; // bigger area (convex hull)
var pts2 = []; // smaller area (full solid shapes)
......@@ -154,40 +153,46 @@
var wind;
pts.push( path[0].getPoint(0) );
pts2.push( path[0].getPoint(0) );
pts.push( path[ 0 ].getPoint( 0 ) );
pts2.push( path[ 0 ].getPoint( 0 ) );
for ( var i = 0; i < path.length; i ++ ) {
var curve = path[ i ];
if ( curve instanceof THREE.LineCurve ) {
for (var i=0; i < path.length; i++) {
var curve = path[i];
if (curve instanceof THREE.LineCurve) {
pts.push( curve.v2 );
pts2.push( curve.v2 );
} else if (curve instanceof THREE.QuadraticBezierCurve) {
vA = vA.subVectors( curve.v1, curve.v0 ); // .normalize()
} else if ( curve instanceof THREE.QuadraticBezierCurve ) {
vA = vA.subVectors( curve.v1, curve.v0 );
vB = vB.subVectors( curve.v2, curve.v1 );
z = vA.x * vB.y - vA.y * vB.x; // z component of cross Production
wind = z < 0; // clockwise/anticlock wind
// if (reverse) wind = !wind;
// console.log(z, wind , wind ? 'clockwise' : 'anti');
if ( wind ) {
if (wind) {
pts.push( curve.v1 );
pts.push( curve.v2 );
pts2.push( curve.v2 );
} else {
pts.push( curve.v2 );
pts2.push( curve.v1 );
pts2.push( curve.v2 );
pts.push( curve.v2 );
pts2.push( curve.v1 );
pts2.push( curve.v2 );
}
var flip = wind ? 1 : -1;
// if (reverse) flip *= -1;
var flip = wind ? 1 : - 1;
// if (reverse) flip *= -1;
invert.push(flip, flip, flip);
beziers.push( curve.v0, curve.v1, curve.v2);
invert.push( flip, flip, flip );
beziers.push( curve.v0, curve.v1, curve.v2 );
}
}
}
return {
......@@ -196,6 +201,7 @@
beziers: beziers,
invert: invert
};
}
var pts, pts2;
......@@ -209,15 +215,15 @@
var process;
var hole;
for (var s=0;s<textShapes.length;s++) {
for ( var s = 0; s < textShapes.length; s ++ ) {
subshape = textShapes[s];
process = processShape(subshape.curves);
subshape = textShapes[ s ];
process = processShape( subshape.curves );
pts = process.pts;
pts2 = process.pts2;
beziers = beziers.concat(process.beziers);
invert = invert.concat(process.invert);
beziers = beziers.concat( process.beziers );
invert = invert.concat( process.invert );
convexhullShape = new THREE.Shape( pts );
solidShape = new THREE.Shape( pts2 );
......@@ -225,77 +231,72 @@
convexhullShapeGroup.push( convexhullShape );
solidShapeGroup.push( solidShape );
for (var i=0; i<subshape.holes.length;i++) {
hole = subshape.holes[i];
for ( var i = 0; i < subshape.holes.length; i ++ ) {
hole = subshape.holes[ i ];
// console.log('hole', hole);
process = processShape(hole.curves, true);
process = processShape( hole.curves, true );
pts = process.pts;
pts2 = process.pts2;
beziers = beziers.concat(process.beziers);
invert = invert.concat(process.invert);
beziers = beziers.concat( process.beziers );
invert = invert.concat( process.invert );
convexhullShape.holes.push(new THREE.Shape(pts));
solidShape.holes.push(new THREE.Shape(pts2));
convexhullShape.holes.push( new THREE.Shape( pts ) );
solidShape.holes.push( new THREE.Shape( pts2 ) );
}
} // end of subshape
var bezierGeometry = new THREE.Geometry();
var bezierGeometry = new THREE.BufferGeometry();
var vertices = [];
var uvs = [];
for ( var i = 0; i < beziers.length; i ++ ) {
var p = beziers[ i ];
vertices.push( p.x, p.y, 0 );
for (var i=0;i<beziers.length;i++) {
var p = beziers[i];
bezierGeometry.vertices.push( new THREE.Vector3(p.x, p.y, 0) );
}
for (i=0;i<beziers.length;i+=3) {
bezierGeometry.faces.push( new THREE.Face3(i, i+1, i+2) );
bezierGeometry.faceVertexUvs[0].push( [
new THREE.Vector2(0, 0),
new THREE.Vector2(0.5, 0),
new THREE.Vector2(1, 1)
] );
for ( var i = 0; i < beziers.length; i += 3 ) {
uvs.push( 0, 0, 0.5, 0, 1, 1 );
}
text3d = new THREE.ShapeGeometry( convexhullShapeGroup );
bezierGeometry.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
bezierGeometry.addAttribute( 'uv', new THREE.Float32BufferAttribute( uvs, 2 ) );
bezierGeometry.addAttribute( 'invert', new THREE.Float32BufferAttribute( invert, 1 ) );
text3d = new THREE.ShapeBufferGeometry( convexhullShapeGroup );
text3d.computeBoundingBox();
var centerOffset = -0.5 * ( text3d.boundingBox.max.x - text3d.boundingBox.min.x );
var centerOffset = - 0.5 * ( text3d.boundingBox.max.x - text3d.boundingBox.min.x );
var text1 = new THREE.Mesh( text3d, textMaterial );
text1.position.x = centerOffset + 150;
group.add( text1 );
text3d = new THREE.ShapeGeometry( solidShapeGroup );
text3d = new THREE.ShapeBufferGeometry( solidShapeGroup );
text3d.computeBoundingBox();
var centerOffset = -0.5 * ( text3d.boundingBox.max.x - text3d.boundingBox.min.x );
var centerOffset = - 0.5 * ( text3d.boundingBox.max.x - text3d.boundingBox.min.x );
var text2 = new THREE.Mesh( text3d, new THREE.MeshBasicMaterial( { color: new THREE.Color(1, 0, 0 ), side: THREE.DoubleSide, wireframe: true } ) );
text2.position.x = centerOffset + 150;
group.add( text2 );
//
bezierGeometry.computeBoundingBox();
bezierGeometry.computeFaceNormals();
bezierGeometry.computeVertexNormals();
bezierGeometry = new THREE.BufferGeometry().fromGeometry( bezierGeometry );
bezierGeometry.addAttribute( 'invert', new THREE.Float32BufferAttribute( invert, 1 ) );
//
var newMaterial = new THREE.ShaderMaterial({
var newMaterial = new THREE.ShaderMaterial( {
uniforms: {
color: { value: new THREE.Color(0.45 * 0xffffff) }
color: { value: new THREE.Color( 0.45 * 0xffffff ) }
},
vertexShader: document.getElementById( 'vs' ).textContent,
fragmentShader: document.getElementById( 'fs' ).textContent,
side: THREE.DoubleSide
});
} );
text = new THREE.Mesh( bezierGeometry, newMaterial );
text.position.x = centerOffset;
......@@ -310,7 +311,7 @@
//
text3d = new THREE.ShapeGeometry( solidShapeGroup );
text3d = new THREE.ShapeBufferGeometry( solidShapeGroup );
text3d.computeBoundingBox();
text = new THREE.Mesh( text3d, new THREE.MeshBasicMaterial( { color: 0.45 * 0xffffff, side: THREE.DoubleSide } ) );
......
examples/webgl_shadowmap_viewer.html
浏览文件 @ 3bbef603
......@@ -101,7 +101,7 @@
scene.add( new THREE.CameraHelper( dirLight.shadow.camera ) );
// Geometry
var geometry = new THREE.TorusKnotGeometry( 25, 8, 75, 20 );
var geometry = new THREE.TorusKnotBufferGeometry( 25, 8, 75, 20 );
var material = new THREE.MeshPhongMaterial( {
color: 0xff0000,
shininess: 150,
......@@ -115,14 +115,14 @@
torusKnot.receiveShadow = true;
scene.add( torusKnot );
var geometry = new THREE.BoxGeometry( 3, 3, 3 );
var geometry = new THREE.BoxBufferGeometry( 3, 3, 3 );
cube = new THREE.Mesh( geometry, material );
cube.position.set( 8, 3, 8 );
cube.castShadow = true;
cube.receiveShadow = true;
scene.add( cube );
var geometry = new THREE.BoxGeometry( 10, 0.15, 10 );
var geometry = new THREE.BoxBufferGeometry( 10, 0.15, 10 );
var material = new THREE.MeshPhongMaterial( {
color: 0xa0adaf,
shininess: 150,
......@@ -155,7 +155,7 @@
function initMisc() {
renderer = new THREE.WebGLRenderer();
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.shadowMap.enabled = true;
......
examples/webgl_tonemapping.html
浏览文件 @ 3bbef603
......@@ -129,7 +129,7 @@
group = new THREE.Group();
scene.add( group );
var geometry = new THREE.TorusKnotGeometry( 18, 8, 150, 20 );
var geometry = new THREE.TorusKnotBufferGeometry( 18, 8, 150, 20 );
var mesh = new THREE.Mesh( geometry, standardMaterial );
mesh.castShadow = true;
mesh.receiveShadow = true;
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或