|
@@ -1,190 +0,0 @@
|
|
|
-<!DOCTYPE html>
|
|
|
|
|
-<html lang="en">
|
|
|
|
|
- <head>
|
|
|
|
|
- <title>three.js webgl - geometries</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: #000;
|
|
|
|
|
- margin: 0px;
|
|
|
|
|
- overflow: hidden;
|
|
|
|
|
- }
|
|
|
|
|
- </style>
|
|
|
|
|
- </head>
|
|
|
|
|
- <body>
|
|
|
|
|
-
|
|
|
|
|
- <script src="../build/three.js"></script>
|
|
|
|
|
-
|
|
|
|
|
- <script src="js/Detector.js"></script>
|
|
|
|
|
-
|
|
|
|
|
- <script>
|
|
|
|
|
-
|
|
|
|
|
- if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
|
|
|
|
|
-
|
|
|
|
|
- var container;
|
|
|
|
|
-
|
|
|
|
|
- var camera, scene, renderer;
|
|
|
|
|
-
|
|
|
|
|
- var objectNewGeometry;
|
|
|
|
|
- var objectToggleAddRemove;
|
|
|
|
|
- var objectRandomizeFaces;
|
|
|
|
|
- var objectRandomizeMaterialIndices;
|
|
|
|
|
-
|
|
|
|
|
- init();
|
|
|
|
|
- animate();
|
|
|
|
|
-
|
|
|
|
|
- function init() {
|
|
|
|
|
-
|
|
|
|
|
- container = document.createElement( 'div' );
|
|
|
|
|
- document.body.appendChild( container );
|
|
|
|
|
-
|
|
|
|
|
- camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
|
|
|
|
|
- camera.position.z = 600;
|
|
|
|
|
-
|
|
|
|
|
- scene = new THREE.Scene();
|
|
|
|
|
-
|
|
|
|
|
- //
|
|
|
|
|
-
|
|
|
|
|
- var object = createObject( createMaterials(), 1 );
|
|
|
|
|
- object.position.set( -100, 100, 0 );
|
|
|
|
|
- scene.add( object );
|
|
|
|
|
- objectNewGeometry = object;
|
|
|
|
|
-
|
|
|
|
|
- object = createObject( createMaterials(), 1 );
|
|
|
|
|
- object.position.set( 100, 100, 0 );
|
|
|
|
|
- scene.add( object );
|
|
|
|
|
- objectToggleAddRemove = object;
|
|
|
|
|
-
|
|
|
|
|
- object = createObject( createMaterials(), 4 );
|
|
|
|
|
- object.position.set( -100, -100, 0 );
|
|
|
|
|
- scene.add( object );
|
|
|
|
|
- objectRandomizeFaces = object;
|
|
|
|
|
-
|
|
|
|
|
- object = createObject( createMaterials(), 4 );
|
|
|
|
|
- object.position.set( 100, -100, 0 );
|
|
|
|
|
- scene.add( object );
|
|
|
|
|
- objectRandomizeMaterialIndices = object;
|
|
|
|
|
-
|
|
|
|
|
- //
|
|
|
|
|
-
|
|
|
|
|
- //
|
|
|
|
|
-
|
|
|
|
|
- renderer = new THREE.WebGLRenderer( { antialias: true } );
|
|
|
|
|
- renderer.setPixelRatio( window.devicePixelRatio );
|
|
|
|
|
- renderer.setSize( window.innerWidth, window.innerHeight );
|
|
|
|
|
- container.appendChild( renderer.domElement );
|
|
|
|
|
-
|
|
|
|
|
- //
|
|
|
|
|
-
|
|
|
|
|
- window.addEventListener( 'resize', onWindowResize, false );
|
|
|
|
|
-
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- function createObject( material, segments ){
|
|
|
|
|
-
|
|
|
|
|
- var geometry = createGeometry( segments );
|
|
|
|
|
- return new THREE.Mesh( geometry, material );
|
|
|
|
|
-
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- function createGeometry( segments ) {
|
|
|
|
|
-
|
|
|
|
|
- var matrix = new THREE.Matrix4();
|
|
|
|
|
- var euler = new THREE.Euler();
|
|
|
|
|
- var geometry = new THREE.BoxGeometry( 100, 100, 100, segments, segments, segments );
|
|
|
|
|
- geometry.applyMatrix(matrix.makeRotationFromEuler(euler.set(Math.random()*2*Math.PI,Math.random()*2*Math.PI,Math.random()*2*Math.PI)));
|
|
|
|
|
- return geometry;
|
|
|
|
|
-
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- function createMaterials(){
|
|
|
|
|
- var materials = [
|
|
|
|
|
- new THREE.MeshBasicMaterial( { color: 0xff0000 } ),
|
|
|
|
|
- new THREE.MeshBasicMaterial( { color: 0xffff00 } ),
|
|
|
|
|
- new THREE.MeshBasicMaterial( { color: 0x00ff00 } ),
|
|
|
|
|
- new THREE.MeshBasicMaterial( { color: 0x00ffff } ),
|
|
|
|
|
- new THREE.MeshBasicMaterial( { color: 0x0000ff } ),
|
|
|
|
|
- new THREE.MeshBasicMaterial( { color: 0xff00ff } )
|
|
|
|
|
- ];
|
|
|
|
|
-
|
|
|
|
|
- return materials;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- function onWindowResize() {
|
|
|
|
|
-
|
|
|
|
|
- camera.aspect = window.innerWidth / window.innerHeight;
|
|
|
|
|
- camera.updateProjectionMatrix();
|
|
|
|
|
-
|
|
|
|
|
- renderer.setSize( window.innerWidth, window.innerHeight );
|
|
|
|
|
-
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- //
|
|
|
|
|
-
|
|
|
|
|
- function animate() {
|
|
|
|
|
-
|
|
|
|
|
- setTimeout( animate, 1000 );
|
|
|
|
|
-
|
|
|
|
|
- render();
|
|
|
|
|
-
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- function randomizeFaces( object ) {
|
|
|
|
|
-
|
|
|
|
|
- var geometry = object.geometry;
|
|
|
|
|
- var faces = geometry.faces;
|
|
|
|
|
-
|
|
|
|
|
- for ( var i = 0, l = faces.length; i < l; i ++ ) {
|
|
|
|
|
-
|
|
|
|
|
- faces[ i ].a = Math.floor( Math.random() * geometry.vertices.length );
|
|
|
|
|
- faces[ i ].b = Math.floor( Math.random() * geometry.vertices.length );
|
|
|
|
|
- faces[ i ].c = Math.floor( Math.random() * geometry.vertices.length );
|
|
|
|
|
-
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- geometry.elementsNeedUpdate = true;
|
|
|
|
|
-
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- function randomizeMaterialIndices( object ) {
|
|
|
|
|
-
|
|
|
|
|
- var geometry = object.geometry;
|
|
|
|
|
- var faces = geometry.faces;
|
|
|
|
|
-
|
|
|
|
|
- for ( var i = 0, l = faces.length; i < l; i ++ ) {
|
|
|
|
|
-
|
|
|
|
|
- faces[ i ].materialIndex = Math.floor( Math.random() * 6 );
|
|
|
|
|
-
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- geometry.groupsNeedUpdate = true;
|
|
|
|
|
-
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- function render() {
|
|
|
|
|
-
|
|
|
|
|
- objectNewGeometry.geometry = createGeometry( 1 );
|
|
|
|
|
-
|
|
|
|
|
- if ( scene.children.indexOf( objectToggleAddRemove ) === -1 ) {
|
|
|
|
|
-
|
|
|
|
|
- scene.add( objectToggleAddRemove );
|
|
|
|
|
-
|
|
|
|
|
- } else {
|
|
|
|
|
-
|
|
|
|
|
- scene.remove( objectToggleAddRemove );
|
|
|
|
|
-
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- randomizeFaces( objectRandomizeFaces );
|
|
|
|
|
- randomizeMaterialIndices( objectRandomizeMaterialIndices );
|
|
|
|
|
-
|
|
|
|
|
- renderer.render( scene, camera );
|
|
|
|
|
-
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- </script>
|
|
|
|
|
-
|
|
|
|
|
- </body>
|
|
|
|
|
-</html>
|
|
|
Mugen87