4 <title>three.js webgl - PLY</title>
6 <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
9 font-family: Monospace;
10 background-color: #000000;
27 .button { background:#999; color:#eee; padding:0.2em 0.5em; cursor:pointer }
28 .highlight { background:orange; color:#fff; }
31 display: inline-block;
41 <a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> -
42 PLY loader test by <a href="https://github.com/menway">Wei Meng</a>. Image from <a href="http://people.sc.fsu.edu/~jburkardt/data/ply/ply.html">John Burkardt</a>
45 <script src="../build/three.js"></script>
47 <script src="js/loaders/PLYLoader.js"></script>
49 <script src="js/Detector.js"></script>
50 <script src="js/libs/stats.min.js"></script>
54 if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
58 var camera, cameraTarget, scene, renderer;
65 container = document.createElement( 'div' );
66 document.body.appendChild( container );
68 camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 1, 15 );
69 camera.position.set( 3, 0.15, 3 );
71 cameraTarget = new THREE.Vector3( 0, -0.1, 0 );
73 scene = new THREE.Scene();
74 scene.background = new THREE.Color( 0x72645b );
75 scene.fog = new THREE.Fog( 0x72645b, 2, 15 );
80 var plane = new THREE.Mesh(
81 new THREE.PlaneBufferGeometry( 40, 40 ),
82 new THREE.MeshPhongMaterial( { color: 0x999999, specular: 0x101010 } )
84 plane.rotation.x = -Math.PI/2;
85 plane.position.y = -0.5;
88 plane.receiveShadow = true;
93 var loader = new THREE.PLYLoader();
94 loader.load( './models/ply/ascii/dolphins.ply', function ( geometry ) {
96 geometry.computeVertexNormals();
98 var material = new THREE.MeshStandardMaterial( { color: 0x0055ff, flatShading: true } );
99 var mesh = new THREE.Mesh( geometry, material );
101 mesh.position.y = - 0.2;
102 mesh.position.z = 0.3;
103 mesh.rotation.x = - Math.PI / 2;
104 mesh.scale.multiplyScalar( 0.001 );
106 mesh.castShadow = true;
107 mesh.receiveShadow = true;
113 loader.load( './models/ply/binary/Lucy100k.ply', function ( geometry ) {
115 geometry.computeVertexNormals();
117 var material = new THREE.MeshStandardMaterial( { color: 0x0055ff, flatShading: true } );
118 var mesh = new THREE.Mesh( geometry, material );
120 mesh.position.x = - 0.2;
121 mesh.position.y = - 0.02;
122 mesh.position.z = - 0.2;
123 mesh.scale.multiplyScalar( 0.0006 );
125 mesh.castShadow = true;
126 mesh.receiveShadow = true;
134 scene.add( new THREE.HemisphereLight( 0x443333, 0x111122 ) );
136 addShadowedLight( 1, 1, 1, 0xffffff, 1.35 );
137 addShadowedLight( 0.5, 1, -1, 0xffaa00, 1 );
141 renderer = new THREE.WebGLRenderer( { antialias: true } );
142 renderer.setPixelRatio( window.devicePixelRatio );
143 renderer.setSize( window.innerWidth, window.innerHeight );
145 renderer.gammaInput = true;
146 renderer.gammaOutput = true;
148 renderer.shadowMap.enabled = true;
149 renderer.shadowMap.renderReverseSided = false;
151 container.appendChild( renderer.domElement );
156 container.appendChild( stats.dom );
160 window.addEventListener( 'resize', onWindowResize, false );
164 function addShadowedLight( x, y, z, color, intensity ) {
166 var directionalLight = new THREE.DirectionalLight( color, intensity );
167 directionalLight.position.set( x, y, z );
168 scene.add( directionalLight );
170 directionalLight.castShadow = true;
173 directionalLight.shadow.camera.left = -d;
174 directionalLight.shadow.camera.right = d;
175 directionalLight.shadow.camera.top = d;
176 directionalLight.shadow.camera.bottom = -d;
178 directionalLight.shadow.camera.near = 1;
179 directionalLight.shadow.camera.far = 4;
181 directionalLight.shadow.mapSize.width = 1024;
182 directionalLight.shadow.mapSize.height = 1024;
184 directionalLight.shadow.bias = -0.005;
188 function onWindowResize() {
190 camera.aspect = window.innerWidth / window.innerHeight;
191 camera.updateProjectionMatrix();
193 renderer.setSize( window.innerWidth, window.innerHeight );
199 requestAnimationFrame( animate );
208 var timer = Date.now() * 0.0005;
210 camera.position.x = Math.sin( timer ) * 2.5;
211 camera.position.z = Math.cos( timer ) * 2.5;
213 camera.lookAt( cameraTarget );
215 renderer.render( scene, camera );