mirror of
https://github.com/wahyd4/three.js.git
synced 2026-08-09 04:56:01 +10:00
alteredq
81b60ea2f6
Noticeable difference: can't anymore assign Material references to faces directly - "face.materials" became "face.materialIndex". Materials have to go to "geometry.materials" array (to which "face.materialIndex" points). This is necessary to allow run-time changing of face materials (this indirection used to be done by arrays). Some casualties: - multi-materials example, this functionality isn't possible anymore - had to simplify LOD Text examples as LODs don't handle groups (used to fake multi-materials) - multi-materials sphere in materials example can't have faces with undefined materials (this may be fixable I guess, when there'll be some real use-case) - scene format still has materials arrays, only the last material will be used (except when there are face materials, then materials from JSON will be used, as before) Other renderers and their corresponding examples were not touched yet. WebGLRenderer still needs some prettification, some things don't make sense anymore without arrays, code can be cleaned up further.
407 lines
10 KiB
HTML
407 lines
10 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>three.js webgl - geometry - Subdivisions with Catmull-Clark</title>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
|
|
<style>
|
|
body {
|
|
font-family: Monospace;
|
|
background-color: #f0f0f0;
|
|
margin: 0px;
|
|
overflow: hidden;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<script src="../build/Three.js"></script>
|
|
|
|
<script src="js/RequestAnimationFrame.js"></script>
|
|
<script src="js/Stats.js"></script>
|
|
|
|
<script src="../src/core/Geometry.js"></script>
|
|
<script src="../src/extras/geometries/CubeGeometry.js"></script>
|
|
<script src="../src/extras/geometries/CylinderGeometry.js"></script>
|
|
<script src="../src/extras/geometries/TorusGeometry.js"></script>
|
|
<script src="../src/extras/modifiers/SubdivisionModifier.js"></script>
|
|
|
|
<script src="fonts/helvetiker_regular.typeface.js"></script>
|
|
|
|
<script src="obj/WaltHead.js"></script>
|
|
<!-- -->
|
|
|
|
<script>
|
|
|
|
var container, stats;
|
|
|
|
var camera, scene, renderer;
|
|
|
|
var cube, plane;
|
|
|
|
var targetYRotation = targetXRotation = 0;
|
|
var targetYRotationOnMouseDown = targetXRotationOnMouseDown = 0;
|
|
|
|
var mouseX = 0, mouseY = 0;
|
|
var mouseXOnMouseDown = 0;
|
|
|
|
var windowHalfX = window.innerWidth / 2;
|
|
var windowHalfY = window.innerHeight / 2;
|
|
|
|
|
|
// Create new object by parameters
|
|
|
|
var createSomething = function( klass, args ) {
|
|
|
|
var F = function( klass, args ) {
|
|
|
|
return klass.apply( this, args );
|
|
|
|
}
|
|
|
|
F.prototype = klass.prototype;
|
|
|
|
return new F( klass, args );
|
|
|
|
};
|
|
|
|
|
|
// Cube
|
|
|
|
var materials = [];
|
|
|
|
for ( var i = 0; i < 6; i ++ ) {
|
|
|
|
materials.push( [ new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff, wireframe: false } ) ] );
|
|
|
|
}
|
|
|
|
THREE.WaltHead = WaltHead;
|
|
|
|
var geometriesParams = [
|
|
|
|
{type: 'CubeGeometry', args: [ 200, 200, 200, 2, 2, 2, materials ] },
|
|
{type: 'TorusGeometry', args: [ 100, 60, 4, 8, Math.PI*2 ] },
|
|
{type: 'SphereGeometry', args: [ 100, 3, 3 ] },
|
|
{type: 'IcosahedronGeometry', args: [ 1 ], scale: 200 },
|
|
{type: 'CylinderGeometry', args: [ 25, 75, 200, 8, 3 ]} ,
|
|
{type: 'TextGeometry', args: ['&', {
|
|
size: 200,
|
|
height: 50,
|
|
curveSegments: 1,
|
|
font: "helvetiker"
|
|
|
|
}]},
|
|
{type: 'PlaneGeometry', args: [ 200, 200, 4, 4 ] },
|
|
|
|
{type: 'WaltHead', args: [ ], scale: 6 }
|
|
|
|
];
|
|
|
|
|
|
var info;
|
|
var subdivisions = 2;
|
|
var geometryIndex = 0;
|
|
|
|
// start scene
|
|
|
|
init();
|
|
animate();
|
|
|
|
function nextSubdivision( x ) {
|
|
|
|
subdivisions = Math.max( 0, subdivisions + x );
|
|
addStuff();
|
|
|
|
}
|
|
|
|
function nextGeometry() {
|
|
|
|
geometryIndex ++;
|
|
|
|
if ( geometryIndex > geometriesParams.length - 1 ) {
|
|
|
|
geometryIndex = 0;
|
|
|
|
}
|
|
|
|
addStuff();
|
|
|
|
}
|
|
|
|
function addStuff() {
|
|
|
|
if ( cube ) {
|
|
|
|
scene.remove( group );
|
|
scene.remove( cube );
|
|
|
|
}
|
|
|
|
|
|
var modifier = new THREE.SubdivisionModifier( subdivisions );
|
|
|
|
|
|
var params = geometriesParams[ geometryIndex ];
|
|
|
|
geometry = createSomething( THREE[ params.type ], params.args );
|
|
|
|
// Cloning original geometry for debuging
|
|
|
|
smooth = THREE.GeometryUtils.clone( geometry );
|
|
|
|
// mergeVertices(); is run in case of duplicated vertices
|
|
smooth.mergeVertices();
|
|
modifier.modify( smooth );
|
|
|
|
info.innerHTML = 'Drag to spin THREE.' + params.type +
|
|
|
|
'<br/><br/>Subdivisions: ' + modifier.subdivisions +
|
|
' <a href="#" onclick="nextSubdivision(1); return false;">more</a>/<a href="#" onclick="nextSubdivision(-1); return false;">less</a>' +
|
|
'<br>Geometry: <a href="#" onclick="nextGeometry();return false;">next</a>' +
|
|
'<br/><br>Vertices count: before ' + geometry.vertices.length + ' after ' + smooth.vertices.length +
|
|
'<br>Face count: before ' + geometry.faces.length + ' after ' + smooth.faces.length
|
|
; //+ params.args;
|
|
|
|
var faceABCD = "abcd";
|
|
var color, f, p, n, vertexIndex;
|
|
|
|
for ( i = 0; i < smooth.faces.length; i ++ ) {
|
|
|
|
f = smooth.faces[ i ];
|
|
|
|
|
|
n = ( f instanceof THREE.Face3 ) ? 3 : 4;
|
|
|
|
for( var j = 0; j < n; j++ ) {
|
|
|
|
vertexIndex = f[ faceABCD.charAt( j ) ];
|
|
|
|
p = smooth.vertices[ vertexIndex ].position;
|
|
|
|
color = new THREE.Color( 0xffffff );
|
|
color.setHSV( ( p.y ) / 200 + 0.5, 1.0, 1.0 );
|
|
|
|
f.vertexColors[ j ] = color;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
group = new THREE.Object3D();
|
|
group.add( new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: 0xfefefe, wireframe: true, opacity: 0.5 } ) ) );
|
|
scene.add( group );
|
|
|
|
|
|
var debugNewPoints = false;
|
|
var debugOldPoints = false;
|
|
|
|
// Debug new Points
|
|
|
|
if (debugNewPoints) {
|
|
var PI2 = Math.PI * 2;
|
|
var program = function ( context ) {
|
|
|
|
context.beginPath();
|
|
context.arc( 0, 0, 1, 0, PI2, true );
|
|
context.closePath();
|
|
context.fill();
|
|
|
|
}
|
|
|
|
for ( var i = 0; i < smooth.vertices.length; i++ ) {
|
|
|
|
particle = new THREE.Particle( new THREE.ParticleCanvasMaterial( { color: Math.random() * 0x808008 + 0x808080, program: program } ) );
|
|
particle.position = smooth.vertices[i].position;
|
|
var pos = smooth.vertices.position
|
|
particle.scale.x = particle.scale.y = 5;
|
|
group.add( particle );
|
|
}
|
|
|
|
}
|
|
|
|
|
|
//Debug original points
|
|
|
|
if (debugOldPoints) {
|
|
|
|
var drawText = function(i) {
|
|
|
|
return function ( context ) {
|
|
|
|
context.beginPath();
|
|
context.scale(0.1,-0.1);
|
|
|
|
context.fillText(i, 0,0);
|
|
|
|
};
|
|
|
|
}
|
|
|
|
for ( var i = 0; i < geometry.vertices.length; i++ ) {
|
|
|
|
particle = new THREE.Particle( new THREE.ParticleCanvasMaterial( { color: Math.random() * 0x808008 + 0x808080, program: drawText(i) } ) );
|
|
particle.position = smooth.vertices[i].position;
|
|
var pos = geometry.vertices.position
|
|
particle.scale.x = particle.scale.y = 30;
|
|
group.add( particle );
|
|
}
|
|
}
|
|
|
|
|
|
var meshmaterials = [
|
|
// new THREE.MeshBasicMaterial( { color: 0x000000, shading: THREE.FlatShading, wireframe: true } )
|
|
new THREE.MeshLambertMaterial( { color: 0xffffff, shading: THREE.FlatShading, vertexColors: THREE.VertexColors } ),
|
|
new THREE.MeshBasicMaterial( { color: 0x405040, wireframe: true, opacity: 0.8, transparent: true } )
|
|
];
|
|
|
|
// new THREE.MeshLambertMaterial( { color: 0xffffff, shading: THREE.FlatShading, vertexColors: THREE.VertexColors } ),
|
|
// new THREE.MeshBasicMaterial( { color: 0x000000, shading: THREE.FlatShading, wireframe: true } )
|
|
// new THREE.MeshFaceMaterial()
|
|
// new THREE.MeshPhongMaterial( { color: 0xffffff, shading: THREE.FlatShading } );
|
|
// new THREE.MeshPhongMaterial( { color: 0xffffff, shading: THREE.SmoothShading } );
|
|
|
|
cube = THREE.SceneUtils.createMultiMaterialObject( smooth, meshmaterials );
|
|
|
|
var toscale = params.scale ? params.scale : 1;
|
|
|
|
cube.scale.x = toscale;
|
|
cube.scale.y = toscale;
|
|
cube.scale.z = toscale;
|
|
|
|
scene.add( cube );
|
|
|
|
group.scale.copy( cube.scale );
|
|
|
|
}
|
|
|
|
function init() {
|
|
|
|
container = document.createElement( 'div' );
|
|
document.body.appendChild( container );
|
|
|
|
info = document.createElement( 'div' );
|
|
info.style.position = 'absolute';
|
|
info.style.top = '10px';
|
|
info.style.width = '100%';
|
|
info.style.textAlign = 'center';
|
|
info.innerHTML = 'Drag to spin the geometry ';
|
|
container.appendChild( info );
|
|
|
|
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
|
|
camera.position.z = 500;
|
|
|
|
scene = new THREE.Scene();
|
|
|
|
var light = new THREE.PointLight( 0xffffff, 1.5 );
|
|
light.position.set( 1000, 1000, 2000 );
|
|
scene.add( light );
|
|
|
|
addStuff();
|
|
|
|
renderer = new THREE.WebGLRenderer( { antialias: true } ); // WebGLRenderer CanvasRenderer
|
|
renderer.setSize( window.innerWidth, window.innerHeight );
|
|
|
|
container.appendChild( renderer.domElement );
|
|
|
|
stats = new Stats();
|
|
stats.domElement.style.position = 'absolute';
|
|
stats.domElement.style.top = '0px';
|
|
container.appendChild( stats.domElement );
|
|
|
|
document.addEventListener( 'mousedown', onDocumentMouseDown, false );
|
|
document.addEventListener( 'touchstart', onDocumentTouchStart, false );
|
|
document.addEventListener( 'touchmove', onDocumentTouchMove, false );
|
|
|
|
}
|
|
|
|
//
|
|
|
|
function onDocumentMouseDown( event ) {
|
|
|
|
event.preventDefault();
|
|
|
|
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
|
|
document.addEventListener( 'mouseup', onDocumentMouseUp, false );
|
|
document.addEventListener( 'mouseout', onDocumentMouseOut, false );
|
|
|
|
mouseXOnMouseDown = event.clientX - windowHalfX;
|
|
mouseYOnMouseDown = event.clientY - windowHalfY;
|
|
targetYRotationOnMouseDown = targetYRotation;
|
|
targetXRotationOnMouseDown = targetXRotation;
|
|
}
|
|
|
|
function onDocumentMouseMove( event ) {
|
|
|
|
mouseX = event.clientX - windowHalfX;
|
|
mouseY = event.clientY - windowHalfY;
|
|
|
|
targetYRotation = targetYRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.02;
|
|
targetXRotation = targetXRotationOnMouseDown + ( mouseY - mouseYOnMouseDown ) * 0.02;
|
|
|
|
}
|
|
|
|
function onDocumentMouseUp( event ) {
|
|
|
|
document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
|
|
document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
|
|
document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
|
|
}
|
|
|
|
function onDocumentMouseOut( event ) {
|
|
|
|
document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
|
|
document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
|
|
document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
|
|
}
|
|
|
|
function onDocumentTouchStart( event ) {
|
|
|
|
if ( event.touches.length == 1 ) {
|
|
|
|
event.preventDefault();
|
|
|
|
mouseXOnMouseDown = event.touches[ 0 ].pageX - windowHalfX;
|
|
targetRotationOnMouseDown = targetRotation;
|
|
|
|
}
|
|
}
|
|
|
|
function onDocumentTouchMove( event ) {
|
|
|
|
if ( event.touches.length == 1 ) {
|
|
|
|
event.preventDefault();
|
|
|
|
mouseX = event.touches[ 0 ].pageX - windowHalfX;
|
|
targetRotation = targetRotationOnMouseDown + ( mouseX - mouseXOnMouseDown ) * 0.05;
|
|
|
|
}
|
|
}
|
|
|
|
//
|
|
|
|
function animate() {
|
|
|
|
requestAnimationFrame( animate );
|
|
|
|
render();
|
|
stats.update();
|
|
|
|
}
|
|
|
|
function render() {
|
|
|
|
group.rotation.x = cube.rotation.x += ( targetXRotation - cube.rotation.x ) * 0.05;
|
|
group.rotation.y = cube.rotation.y += ( targetYRotation - cube.rotation.y ) * 0.05;
|
|
|
|
renderer.render( scene, camera );
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|