|
@@ -7,10 +7,13 @@
|
|
|
<style>
|
|
<style>
|
|
|
body {
|
|
body {
|
|
|
font-family: Monospace;
|
|
font-family: Monospace;
|
|
|
- background-color: #f0f0f0;
|
|
|
|
|
|
|
+ color: #fff;
|
|
|
margin: 0px;
|
|
margin: 0px;
|
|
|
overflow: hidden;
|
|
overflow: hidden;
|
|
|
}
|
|
}
|
|
|
|
|
+ a {
|
|
|
|
|
+ color: #ffffff;
|
|
|
|
|
+ }
|
|
|
</style>
|
|
</style>
|
|
|
</head>
|
|
</head>
|
|
|
<body>
|
|
<body>
|
|
@@ -18,129 +21,80 @@
|
|
|
<script src="../build/three.js"></script>
|
|
<script src="../build/three.js"></script>
|
|
|
<script src="js/controls/OrbitControls.js"></script>
|
|
<script src="js/controls/OrbitControls.js"></script>
|
|
|
<script src="js/modifiers/SimplifyModifier.js"></script>
|
|
<script src="js/modifiers/SimplifyModifier.js"></script>
|
|
|
- <script src="js/libs/stats.min.js"></script>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
<script>
|
|
|
|
|
|
|
|
- var container, stats;
|
|
|
|
|
-
|
|
|
|
|
- var camera, controls, scene, renderer;
|
|
|
|
|
-
|
|
|
|
|
- var boxGeometry = new THREE.BoxBufferGeometry( 80, 80, 80, 4, 4, 4 );
|
|
|
|
|
- var torusGeometry = new THREE.TorusBufferGeometry( 50, 25, 8, 8, Math.PI * 2 );
|
|
|
|
|
- var sphereGeometry = new THREE.SphereBufferGeometry( 50, 15, 15 );
|
|
|
|
|
- var planeGeometry = new THREE.PlaneBufferGeometry( 100, 100, 6, 6 );
|
|
|
|
|
-
|
|
|
|
|
- var modifer = new THREE.SimplifyModifier();
|
|
|
|
|
- var meshes = [];
|
|
|
|
|
- var count = 0;
|
|
|
|
|
-
|
|
|
|
|
- var wireframeMaterial = new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, transparent: true } );
|
|
|
|
|
|
|
+ var renderer, scene, camera;
|
|
|
|
|
|
|
|
init();
|
|
init();
|
|
|
- animate();
|
|
|
|
|
-
|
|
|
|
|
-
|
|
|
|
|
- function addStuff( geometry ) {
|
|
|
|
|
-
|
|
|
|
|
- count ++;
|
|
|
|
|
-
|
|
|
|
|
- var mesh, wireframe;
|
|
|
|
|
-
|
|
|
|
|
- var material = new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff } );
|
|
|
|
|
-
|
|
|
|
|
- var vertexCount = geometry.attributes.position.count;
|
|
|
|
|
-
|
|
|
|
|
- var simplified = modifer.modify( geometry, Math.floor( vertexCount * 0.5 ) );
|
|
|
|
|
-
|
|
|
|
|
- mesh = new THREE.Mesh( simplified, material );
|
|
|
|
|
- wireframe = new THREE.Mesh( simplified, wireframeMaterial );
|
|
|
|
|
- mesh.add( wireframe );
|
|
|
|
|
- mesh.position.x = - 200;
|
|
|
|
|
- mesh.position.y = count * 150 - 300;
|
|
|
|
|
-
|
|
|
|
|
- scene.add( mesh );
|
|
|
|
|
- meshes.push( mesh );
|
|
|
|
|
-
|
|
|
|
|
- mesh = new THREE.Mesh( geometry, material );
|
|
|
|
|
- wireframe = new THREE.Mesh( geometry, wireframeMaterial );
|
|
|
|
|
- mesh.add( wireframe );
|
|
|
|
|
- mesh.position.x = 200;
|
|
|
|
|
- mesh.position.y = count * 150 - 300;
|
|
|
|
|
-
|
|
|
|
|
- scene.add( mesh );
|
|
|
|
|
- meshes.push ( mesh );
|
|
|
|
|
-
|
|
|
|
|
- }
|
|
|
|
|
|
|
|
|
|
function init() {
|
|
function init() {
|
|
|
|
|
|
|
|
- container = document.createElement( 'div' );
|
|
|
|
|
- document.body.appendChild( container );
|
|
|
|
|
-
|
|
|
|
|
var info = document.createElement( 'div' );
|
|
var info = document.createElement( 'div' );
|
|
|
info.style.position = 'absolute';
|
|
info.style.position = 'absolute';
|
|
|
info.style.top = '10px';
|
|
info.style.top = '10px';
|
|
|
info.style.width = '100%';
|
|
info.style.width = '100%';
|
|
|
info.style.textAlign = 'center';
|
|
info.style.textAlign = 'center';
|
|
|
- info.innerHTML = '50% Vertex Reduction using SimplifyModifier';
|
|
|
|
|
- container.appendChild( info );
|
|
|
|
|
|
|
+ info.innerHTML = '<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - Vertex Reduction using SimplifyModifier';
|
|
|
|
|
+ document.body.appendChild( info );
|
|
|
|
|
|
|
|
- camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
|
|
|
|
|
- camera.position.z = 500;
|
|
|
|
|
|
|
+ renderer = new THREE.WebGLRenderer( { antialias: true } );
|
|
|
|
|
+ renderer.setPixelRatio( window.devicePixelRatio );
|
|
|
|
|
+ renderer.setSize( window.innerWidth, window.innerHeight );
|
|
|
|
|
+ document.body.appendChild( renderer.domElement );
|
|
|
|
|
|
|
|
scene = new THREE.Scene();
|
|
scene = new THREE.Scene();
|
|
|
- scene.background = new THREE.Color( 0xf0f0f0 );
|
|
|
|
|
|
|
|
|
|
- var light = new THREE.PointLight( 0xffffff, 1.5 );
|
|
|
|
|
- light.position.set( 1000, 1000, 2000 );
|
|
|
|
|
- scene.add( light );
|
|
|
|
|
|
|
+ camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
|
|
|
|
|
+ camera.position.z = 15;
|
|
|
|
|
|
|
|
- addStuff( planeGeometry );
|
|
|
|
|
- addStuff( boxGeometry );
|
|
|
|
|
- addStuff( sphereGeometry );
|
|
|
|
|
- addStuff( torusGeometry );
|
|
|
|
|
|
|
+ var controls = new THREE.OrbitControls( camera, renderer.domElement );
|
|
|
|
|
+ controls.addEventListener( 'change', render ); // use if there is no animation loop
|
|
|
|
|
+ controls.enablePan = false;
|
|
|
|
|
+ controls.enableZoom = false;
|
|
|
|
|
|
|
|
- renderer = new THREE.WebGLRenderer( { antialias: true } );
|
|
|
|
|
- renderer.setPixelRatio( window.devicePixelRatio );
|
|
|
|
|
- renderer.setSize( window.innerWidth, window.innerHeight );
|
|
|
|
|
- container.appendChild( renderer.domElement );
|
|
|
|
|
|
|
+ scene.add( new THREE.AmbientLight( 0xffffff, 0.2 ) );
|
|
|
|
|
|
|
|
- stats = new Stats();
|
|
|
|
|
- container.appendChild( stats.dom );
|
|
|
|
|
|
|
+ var light = new THREE.PointLight( 0xffffff, 0.7 );
|
|
|
|
|
+ camera.add( light );
|
|
|
|
|
+ scene.add( camera );
|
|
|
|
|
|
|
|
- //
|
|
|
|
|
|
|
+ new THREE.JSONLoader().load( "models/json/leeperrysmith/LeePerrySmith.json", function ( geometry ) {
|
|
|
|
|
|
|
|
- controls = new THREE.OrbitControls( camera, renderer.domElement );
|
|
|
|
|
|
|
+ var material = new THREE.MeshPhongMaterial( { color: 0xAEAED5, shininess: 1 } );
|
|
|
|
|
|
|
|
- window.addEventListener( 'resize', onWindowResize, false );
|
|
|
|
|
|
|
+ var mesh = new THREE.Mesh( geometry, material );
|
|
|
|
|
+ mesh.position.x = - 3;
|
|
|
|
|
+ mesh.rotation.y = Math.PI / 2;
|
|
|
|
|
+ scene.add( mesh );
|
|
|
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ var modifer = new THREE.SimplifyModifier();
|
|
|
|
|
|
|
|
- function onWindowResize() {
|
|
|
|
|
|
|
+ var simplified = modifer.modify( geometry, Math.floor( geometry.vertices.length * 0.9375 ) ); // number of vertices to remove
|
|
|
|
|
|
|
|
- camera.aspect = window.innerWidth / window.innerHeight;
|
|
|
|
|
- camera.updateProjectionMatrix();
|
|
|
|
|
|
|
+ var material = new THREE.MeshPhongMaterial( { color: 0xAEAED5, shininess: 1, flatShading: true } );
|
|
|
|
|
|
|
|
- renderer.setSize( window.innerWidth, window.innerHeight );
|
|
|
|
|
|
|
+ var mesh = new THREE.Mesh( simplified, material );
|
|
|
|
|
+ mesh.position.x = 3;
|
|
|
|
|
+ mesh.rotation.y = - Math.PI / 2;
|
|
|
|
|
+ scene.add( mesh );
|
|
|
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ render();
|
|
|
|
|
|
|
|
- //
|
|
|
|
|
|
|
+ } );
|
|
|
|
|
|
|
|
- function animate() {
|
|
|
|
|
|
|
+ window.addEventListener( 'resize', onWindowResize, false );
|
|
|
|
|
|
|
|
- meshes.forEach( function( m ) {
|
|
|
|
|
- m.rotation.x += 0.01;
|
|
|
|
|
- m.rotation.y += 0.01;
|
|
|
|
|
- m.rotation.z += 0.01;
|
|
|
|
|
- } );
|
|
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ function onWindowResize() {
|
|
|
|
|
+
|
|
|
|
|
+ renderer.setSize( window.innerWidth, window.innerHeight );
|
|
|
|
|
|
|
|
- requestAnimationFrame( animate );
|
|
|
|
|
|
|
+ camera.aspect = window.innerWidth / window.innerHeight;
|
|
|
|
|
+ camera.updateProjectionMatrix();
|
|
|
|
|
|
|
|
- stats.begin();
|
|
|
|
|
render();
|
|
render();
|
|
|
- stats.end();
|
|
|
|
|
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
WestLangley