From 5a87153193cefe523237141a6b2be83175ab7a42 Mon Sep 17 00:00:00 2001 From: "Mr.doob" Date: Wed, 6 Feb 2013 10:52:59 +0100 Subject: [PATCH] Simplified STL loader example. --- examples/webgl_loader_stl.html | 184 +++++++++++++-------------------- 1 file changed, 72 insertions(+), 112 deletions(-) diff --git a/examples/webgl_loader_stl.html b/examples/webgl_loader_stl.html index a8ba745d16..29c4147827 100644 --- a/examples/webgl_loader_stl.html +++ b/examples/webgl_loader_stl.html @@ -39,18 +39,7 @@
three.js - - STL loader test by aleeper - -

-
- Binary -  - PR2 head from www.ros.org -
-

-
- ASCII -  - A simple CAD part. -
+ STL loader test by aleeper. PR2 head from www.ros.org
@@ -66,9 +55,7 @@ var container, stats; - var camera, scene, renderer, objects = []; - - var buttonBinary, buttonASCII; + var camera, cameraTarget, scene, renderer; init(); animate(); @@ -78,52 +65,89 @@ container = document.createElement( 'div' ); document.body.appendChild( container ); - // Set up buttons - buttonBinary= document.getElementById('clickBinary'); - buttonBinary.addEventListener( "click", loadBinaryExample, false ); - buttonASCII = document.getElementById('clickASCII'); - buttonASCII.addEventListener( "click", loadASCIIExample, false ); - camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 1, 15 ); - camera.position.set( 3, 0.5, 3 ); + camera.position.set( 3, 0.15, 3 ); + + cameraTarget = new THREE.Vector3( 0, -0.25, 0 ); scene = new THREE.Scene(); scene.fog = new THREE.Fog( 0xffffff, 2, 15 ); scene.fog.color.setHSV( 0.06, 0.2, 0.45 ); - // Grid - var size = 20, step = 0.25; + // Ground - var geometry = new THREE.Geometry(); - var material = new THREE.LineBasicMaterial( { color: 0x000000 } ); + var plane = new THREE.Mesh( new THREE.PlaneGeometry( 40, 40 ), new THREE.MeshPhongMaterial( { ambient: 0x999999, color: 0x999999, specular: 0x101010 } ) ); + plane.rotation.x = -Math.PI/2; + plane.position.y = -0.5; + scene.add( plane ); - for ( var i = - size; i <= size; i += step ) { + plane.receiveShadow = true; - geometry.vertices.push( new THREE.Vector3( - size, - 0.04, i ) ); - geometry.vertices.push( new THREE.Vector3( size, - 0.04, i ) ); - geometry.vertices.push( new THREE.Vector3( i, - 0.04, - size ) ); - geometry.vertices.push( new THREE.Vector3( i, - 0.04, size ) ); + // ASCII file + + var loader = new THREE.STLLoader(); + loader.addEventListener( 'load', function ( event ) { - } + var geometry = event.content; + var material = new THREE.MeshPhongMaterial( { ambient: 0xff5533, color: 0xff5533, specular: 0x111111, shininess: 200 } ); + var mesh = new THREE.Mesh( geometry, material ); - var line = new THREE.Line( geometry, material, THREE.LinePieces ); - line.position.y = -0.46; - scene.add( line ); + mesh.position.set( 0, - 0.25, 0.6 ); + mesh.rotation.set( 0, - Math.PI / 2, 0 ); + mesh.scale.set( 0.5, 0.5, 0.5 ); - // Ground + mesh.castShadow = true; + mesh.receiveShadow = true; - var plane = new THREE.Mesh( new THREE.PlaneGeometry( 40, 40 ), new THREE.MeshPhongMaterial( { ambient: 0x999999, color: 0x999999, specular: 0x101010 } ) ); - plane.rotation.x = -Math.PI/2; - plane.position.y = -0.5; - scene.add( plane ); + scene.add( mesh ); - plane.receiveShadow = true; + } ); + loader.load( './models/stl/ascii/slotted_disk.stl' ); + + + // Binary files + + var material = new THREE.MeshPhongMaterial( { ambient: 0x555555, color: 0xAAAAAA, specular: 0x111111, shininess: 200 } ); + + var loader = new THREE.STLLoader(); + loader.addEventListener( 'load', function ( event ) { + + var geometry = event.content; + var mesh = new THREE.Mesh( geometry, material ); + + mesh.position.set( 0, - 0.37, - 0.6 ); + mesh.rotation.set( - Math.PI / 2, 0, 0 ); + mesh.scale.set( 2, 2, 2 ); + + mesh.castShadow = true; + mesh.receiveShadow = true; + + scene.add( mesh ); + + } ); + loader.load( './models/stl/binary/pr2_head_pan.stl' ); + + var loader = new THREE.STLLoader(); + loader.addEventListener( 'load', function ( event ) { + + var geometry = event.content; + var mesh = new THREE.Mesh( geometry, material ); + + mesh.position.set( 0.136, - 0.37, - 0.6 ); + mesh.rotation.set( - Math.PI / 2, 0.3, 0 ); + mesh.scale.set( 2, 2, 2 ); + + mesh.castShadow = true; + mesh.receiveShadow = true; + + scene.add( mesh ); + + } ); + loader.load( './models/stl/binary/pr2_head_tilt.stl' ); - // Object - loadBinaryExample(); // Lights @@ -134,7 +158,7 @@ // renderer - renderer = new THREE.WebGLRenderer( { antialias: true, clearColor: 0x111111, clearAlpha: 1, alpha: false } ); + renderer = new THREE.WebGLRenderer( { antialias: true, alpha: false } ); renderer.setSize( window.innerWidth, window.innerHeight ); renderer.setClearColor( scene.fog.color, 1 ); @@ -168,7 +192,7 @@ scene.add( directionalLight ); directionalLight.castShadow = true; - //directionalLight.shadowCameraVisible = true; + // directionalLight.shadowCameraVisible = true; var d = 1; directionalLight.shadowCameraLeft = -d; @@ -179,8 +203,8 @@ directionalLight.shadowCameraNear = 1; directionalLight.shadowCameraFar = 4; - directionalLight.shadowMapWidth = 2048; - directionalLight.shadowMapHeight = 2048; + directionalLight.shadowMapWidth = 1024; + directionalLight.shadowMapHeight = 1024; directionalLight.shadowBias = -0.005; directionalLight.shadowDarkness = 0.15; @@ -196,70 +220,6 @@ } - function loadBinaryExample() { - buttonBinary.className = "button highlight"; - buttonASCII.className = "button"; - - // Clear out old objects - for(var i = 0; i < objects.length; i++) - scene.remove(objects[i]); - - var scale = 2.0; - var material = new THREE.MeshPhongMaterial( { ambient: 0x555555, color: 0xAAAAAA, specular: 0x111111, shininess: 200 } ); - - loadFile('./models/stl/binary/pr2_head_pan.stl', scale, new THREE.Vector3(0,0,0), new THREE.Vector3(-Math.PI/2, 0, 0), material); - loadFile('./models/stl/binary/pr2_head_tilt.stl', scale, new THREE.Vector3(0.068*scale, 0, 0), new THREE.Vector3(-Math.PI/2, 0.3, 0), material); - - } - - function loadASCIIExample() { - buttonBinary.className = "button"; - buttonASCII.className = "button highlight"; - - // Clear out old objects - for(var i = 0; i < objects.length; i++) - scene.remove(objects[i]); - - loadFile('./models/stl/ascii/slotted_disk.stl', 1.0, null, new THREE.Vector3(-Math.PI/2, 0, 0)); - - } - - function loadFile( filename, scale, offset, rotate, material ) { - - if(scale == null) - scale = 1.0; - - if(offset == null) - offset = new THREE.Vector3(0,0,0); - - if(rotate == null) - rotate = new THREE.Vector3(0,0,0); - - if(material == null) - material = new THREE.MeshPhongMaterial( { ambient: 0xff5533, color: 0xff5533, specular: 0x111111, shininess: 200 } ); - - - var loader = new THREE.STLLoader(); - loader.addEventListener( 'load', function ( event ) { - - var geometry = event.content; - var mesh = new THREE.Mesh( geometry, material ); - - mesh.scale = new THREE.Vector3(scale, scale, scale); - mesh.position = offset; - mesh.rotation = rotate; - - mesh.castShadow = true; - mesh.receiveShadow = true; - - objects.push(mesh); - scene.add( objects[ objects.length - 1 ] ); - - } ); - loader.load( filename ); - - } - function animate() { requestAnimationFrame( animate ); @@ -276,7 +236,7 @@ camera.position.x = Math.cos( timer ) * 3; camera.position.z = Math.sin( timer ) * 3; - camera.lookAt( scene.position ); + camera.lookAt( cameraTarget ); renderer.render( scene, camera ); -- GitLab