Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Examples: Add demo for indexed BufferGeometry #13266

Merged
merged 2 commits into from
Feb 7, 2018
+209 −2
Merged

Examples: Add demo for indexed BufferGeometry #13266

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a2d4337
Examples: Add demo for indexed BufferGeometry
Mugen87 Feb 7, 2018
9137bb7
Examples: Improved lighting for webgl_buffergeometry_indexed
Mugen87 Feb 7, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions docs/api/core/BufferGeometry.html
View file
Original file line number Diff line number Diff line change
@@ -43,8 +43,8 @@ <h2>Example</h2>
var mesh = new THREE.Mesh( geometry, material );
</code>
<div>
[example:webgl_buffergeometry Complex mesh with non-indexed faces]<br />
[example:webgl_buffergeometry_uint Complex mesh with indexed faces]<br />
[example:webgl_buffergeometry Mesh with non-indexed faces]<br />
[example:webgl_buffergeometry_indexed Mesh with indexed faces]<br />
[example:webgl_buffergeometry_lines Lines]<br />
[example:webgl_buffergeometry_lines_indexed Indexed Lines]<br />
[example:webgl_buffergeometry_custom_attributes_particles Particles]<br />
1 change: 1 addition & 0 deletions examples/files.js
View file
Original file line number Diff line number Diff line change
@@ -273,6 +273,7 @@ var files = {
"webgl_buffergeometry_constructed_from_geometry",
"webgl_buffergeometry_custom_attributes_particles",
"webgl_buffergeometry_drawcalls",
"webgl_buffergeometry_indexed",
"webgl_buffergeometry_instancing",
"webgl_buffergeometry_instancing2",
"webgl_buffergeometry_instancing_billboards",
206 changes: 206 additions & 0 deletions examples/webgl_buffergeometry_indexed.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,206 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - buffergeometry - indexed</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: #cccccc;
font-family:Monospace;
font-size:13px;
text-align:center;

background-color: #050505;
margin: 0px;
overflow: hidden;
}

#info {
position: absolute;
top: 0px; width: 100%;
padding: 5px;
}

a {
color: #0080ff;
}

</style>
</head>
<body>

<div id="container"></div>
<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> webgl - buffergeometry - indexed</div>

<script src="../build/three.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>

if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

var camera, scene, renderer, stats;

var mesh;

init();
animate();

function init() {

//

camera = new THREE.PerspectiveCamera( 27, window.innerWidth / window.innerHeight, 1, 3500 );
camera.position.z = 64;

scene = new THREE.Scene();
scene.background = new THREE.Color( 0x050505 );

//

var ambientLight = new THREE.AmbientLight( 0xcccccc );
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ambient light should never be that high. Try 0x222222.

scene.add( ambientLight );

var light1 = new THREE.DirectionalLight( 0xffffff, 0.5 );
light1.position.set( 1, 1, 1 );
scene.add( light1 );

var light2 = new THREE.DirectionalLight( 0xffffff, 1.5 );
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Try not not over-brighten you scene.

light2.position.set( 0, -1, 0 );
scene.add( light2 );

//

var geometry = new THREE.BufferGeometry();

var indices = [];

var vertices = [];
var normals = [];
var colors = [];

var size = 20;
var segments = 10;

var halfSize = size / 2;
var segmentSize = size / segments;

// generate vertices, normals and color data for a simple grid geometry

for ( var i = 0; i <= segments; i ++ ) {

var y = ( i * segmentSize ) - halfSize;

for ( var j = 0; j <= segments; j ++ ) {

var x = ( j * segmentSize ) - halfSize;

vertices.push( x, - y, 0 );
normals.push( 0, 0, 1 );

var r = ( x / size ) + 0.5;
var g = ( y / size ) + 0.5;

colors.push( r, g, 1 );

}

}

// generate indices (data for element array buffer)

for ( var i = 0; i < segments; i ++ ) {

for ( var j = 0; j < segments; j ++ ) {

var a = i * ( segments + 1 ) + ( j + 1 );
var b = i * ( segments + 1 ) + j;
var c = ( i + 1 ) * ( segments + 1 ) + j;
var d = ( i + 1 ) * ( segments + 1 ) + ( j + 1 );

// generate two faces (triangles) per iteration

indices.push( a, b, d ); // face one
indices.push( b, c, d ); // face two

}

}

//

geometry.setIndex( indices );
geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
geometry.addAttribute( 'normal', new THREE.Float32BufferAttribute( normals, 3 ) );
geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );

var material = new THREE.MeshPhongMaterial( {
specular: 0xffffff, shininess: 250,
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If the specular reflectance of the material is 0xffffff, and the diffuse reflectance is greater than zero, then more than 100% of the light is being reflected. Set specular to 0x111111. Study the hot-spot before and after.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Okay done 👍

Copy link
Collaborator Author

@Mugen87 Mugen87 Feb 7, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

BTW: I've just copied the material/lights from an other example. We might want to review the lightings in the examples at some point...

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Right. Check the outline pass demo. :/

side: THREE.DoubleSide, vertexColors: THREE.VertexColors
} );

mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );

//

renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

//

stats = new Stats();
document.body.appendChild( stats.dom );

//

var gui = new dat.GUI()
gui.add( material, 'wireframe' );

//

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 time = Date.now() * 0.001;

mesh.rotation.x = time * 0.25;
mesh.rotation.y = time * 0.5;

renderer.render( scene, camera );

}

</script>

</body>
</html>