👩‍👩‍👦‍👦 🌷 🐴 थ्री। जेएस सीखना। अध्याय 1: थ्री। जेएस का उपयोग करके हमारा पहला 3 डी दृश्य बनाना 🙅 😊 🤘🏾

सभी को नमस्कार!

मैं वेबलॉग के लिए अद्भुत पुस्तक Learning Three.js- The JavaScript 3D लाइब्रेरी का मुफ्त अनुवाद शुरू करना चाहता हूं। मुझे यकीन है कि यह पुस्तक न केवल शुरुआती लोगों के लिए, बल्कि उनके क्षेत्र के पेशेवरों के लिए भी दिलचस्प होगी। खैर, मैंने परिचय को लंबे समय तक नहीं खींचा, मैं सिर्फ एक उदाहरण देता हूं कि हम जल्द ही क्या कर पाएंगे:

एक HTML पेज संरचना बनाएँ

पहली चीज़ जो हमें करने की ज़रूरत है वह है खाली HTML पृष्ठ बनाना जो हमारे सभी उदाहरणों के आधार के रूप में इस्तेमाल किया जा सकता है। इस HTML संरचना को निम्नानुसार दर्शाया गया है:

<!DOCTYPE html> <html> <head> <title>Example 01.01 - Basic skeleton</title> <script type="text/javascript" src="../libs/three.js"> </script> <script type="text/javascript" src="../libs/jquery-1.9.0.js"> </script> <style> body{ /* set margin to 0 and overflow to hidden, to use the complete page */ margin: 0; overflow: hidden; } </style> </head> <body> <!--Div which will hold the Output --> <div id="WebGL-output"> </div> <!--Javascript code that runs our Three.js examples --> <script type="text/javascript"> // once everything is loaded, we run our Three.js stuff. $(function () { // here we'll put the Three.js stuff }); </script> </body> </html>

यह लिस्टिंग केवल तत्वों के एक जोड़े के साथ एक बहुत ही सरल HTML पृष्ठ की संरचना को दिखाती है। ब्लॉक में, हम बाहरी जावास्क्रिप्ट पुस्तकालयों को लोड करते हैं जो हम उदाहरणों में उपयोग करेंगे। उदाहरण के लिए, उपरोक्त सूची में, हम दो पुस्तकालयों को जोड़ने की कोशिश कर रहे हैं: jquery-1.9.0.js

और jquery-1.9.0.js

. jquery-1.9.0.js

। इसके अलावा इस ब्लॉक में हम सीएसएस डिजाइन के लिए कुछ पंक्तियों को लिखते हैं। पिछले स्निपेट में, आप कुछ जावास्क्रिप्ट कोड देख सकते हैं। जब पेज पूरी तरह से लोड हो जाता है तो एक छोटा जावास्क्रिप्ट फ़ंक्शन कॉल करने के लिए कोड का यह छोटा टुकड़ा JQuery

का उपयोग करता है। हम इस फ़ंक्शन के अंदर सभी तीन.js कोड डालेंगे।

तीन.js दो संस्करणों में आते हैं:

Three.min.js: आप आमतौर पर Three.js साइट्स खोलते समय इस लाइब्रेरी का उपयोग करते हैं। यह UglifyJS का उपयोग करके बनाए गए तीन.js का एक छोटा संस्करण है, जो कि नियमित Three.js पुस्तकालय का आधा आकार है। यहां उपयोग किए गए सभी उदाहरण और कोड Three.js r60

परियोजना पर आधारित हैं, जो अगस्त 2013 में जारी किया गया था।
Three.js: यह सामान्य Three.js लाइब्रेरी है। हम अपने उदाहरणों में इस पुस्तकालय का उपयोग करेंगे, क्योंकि इससे डिबगिंग बहुत आसान हो जाती है, क्योंकि कोड अधिक पठनीय हो जाता है।

यदि हम ब्राउज़र में लिखे गए पृष्ठ को खोलते हैं, तो हम बहुत चौंकेंगे नहीं। जैसा कि अपेक्षित था, हम सभी देखते हैं कि एक खाली पृष्ठ है।

अगले भाग में, आप सीखेंगे कि 3 डी ऑब्जेक्ट्स की पहली जोड़ी को हमारे सीन में कैसे जोड़ा जाए।

3D ऑब्जेक्ट्स को रेंडर करना और देखना

इस बिंदु पर हम अपना पहला दृश्य बनाएंगे और कुछ वस्तुओं और एक कैमरे को जोड़ेंगे। हमारे पहले उदाहरण में निम्नलिखित वस्तुएं होंगी:

एक विमान एक द्वि-आयामी आयत है जो हमारे मुख्य स्थल के रूप में काम करेगा। यह दृश्य के बीच में एक ग्रे आयत के रूप में दिखाई देगा।

एक घन एक तीन-आयामी घन है जिसे हम लाल रंग में प्रस्तुत करेंगे।

एक गोला एक त्रि-आयामी क्षेत्र है, जिसे हम नीले रंग में प्रस्तुत करेंगे।

कैमरा - यह निर्धारित करता है कि हम आउटपुट में क्या देखते हैं।

कुल्हाड़ी एक्स, वाई और जेड हैं। यह देखने के लिए एक उपयोगी डीबगिंग उपकरण है जहाँ ऑब्जेक्ट्स प्रदान किए जाते हैं।

पहले, आइए देखें कि यह कोड में कैसा दिखता है, और फिर इसे जानने की कोशिश करें।

 <script type="text/javascript"> $(function () { var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(45 , window.innerWidth / window.innerHeight , 0.1, 1000); var renderer = new THREE.WebGLRenderer(); renderer.setClearColorHex(0xEEEEEE); renderer.setSize(window.innerWidth, window.innerHeight); var axes = new THREE.AxisHelper( 20 ); scene.add(axes); var planeGeometry = new THREE.PlaneGeometry(60,20,1,1); var planeMaterial = new THREE.MeshBasicMaterial({color: 0xcccccc}); var plane = new THREE.Mesh(planeGeometry,planeMaterial); plane.rotation.x=-0.5*Math.PI; plane.position.x = 15; plane.position.y = 0; plane.position.z = 0; scene.add(plane); var cubeGeometry = new THREE.CubeGeometry(4,4,4); var cubeMaterial = new THREE.MeshBasicMaterial( {color: 0xff0000, wireframe: true}); var cube = new THREE.Mesh(cubeGeometry, cubeMaterial); cube.position.x = -4; cube.position.y = 3; cube.position.z = 0; scene.add(cube); var sphereGeometry = new THREE.SphereGeometry(4,20,20); var sphereMaterial = new THREE.MeshBasicMaterial( {color: 0x7777ff, wireframe: true}); var sphere = new THREE.Mesh(sphereGeometry,sphereMaterial); sphere.position.x = 20; sphere.position.y = 4; sphere.position.z = 2; scene.add(sphere); camera.position.x = -30; camera.position.y = 40; camera.position.z = 30; camera.lookAt(scene.position); $("#WebGL-output").append(renderer.domElement); renderer.render(scene, camera); });

यदि हम इस उदाहरण को एक ब्राउज़र में खोलते हैं, तो हम कुछ वैसा ही देखेंगे जैसा हम चाहते थे, लेकिन अभी भी आदर्श से बहुत दूर है।

इससे पहले कि हम दृश्य को सुंदर बनाना शुरू करें, आइए हम जो कुछ भी करते हैं, उसके बारे में कदम-दर-कदम देखें:

 var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(45 , window.innerWidth / window.innerHeight , 0.1, 1000); var renderer = new THREE.WebGLRenderer(); renderer.setClearColorHex(0xEEEEEE); renderer.setSize(window.innerWidth, window.innerHeight);

इस उदाहरण में, हमने दृश्य, कैमरा और विज़ुअलाइज़र को परिभाषित किया। एक दृश्य चर एक कंटेनर है जिसका उपयोग उन सभी वस्तुओं को संग्रहीत और ट्रैक करने के लिए किया जाता है जिन्हें हम प्रदर्शित करना चाहते हैं। जिस गोले और घन को हम प्रदर्शित करना चाहते हैं उसे इस उदाहरण में थोड़ी देर बाद जोड़ा जाएगा। इस स्निपेट में, हमने एक कैमरा वेरिएबल भी बनाया। यह चर निर्धारित करता है कि जब हम दृश्य प्रस्तुत करते हैं तो हम क्या देखेंगे। अगला, हम विज़ुअलाइज़ेशन (रेंडरिंग) के ऑब्जेक्ट को परिभाषित करेंगे। गणना गणना के लिए जिम्मेदार है कि कैसे ब्राउज़र में दृश्य एक या दूसरे तरीके से दिखाई देगा। हमने एक WebGLRenderer

ऑब्जेक्ट भी बनाया है जो दृश्य को रेंडर करने के लिए वीडियो कार्ड का उपयोग करेगा।

यहां, setClearColorHex()

फ़ंक्शन का उपयोग करते हुए, हम रेंडरर की पृष्ठभूमि का रंग लगभग सफेद (0XEEEEEE) पर सेट करते हैं, और setSize()

फ़ंक्शन का उपयोग करके प्रदान किए गए दृश्य का आकार भी निर्धारित करते हैं।

अब तक, हमारे पास केवल मूल तत्व हैं, जैसे कि खाली दृश्य, render

और camera

। लेकिन, अभी भी, कल्पना करने के लिए कुछ भी नहीं है। निम्नलिखित कोड टुकड़ा सहायक कुल्हाड़ियों और एक विमान जोड़ता है।

 var axes = new THREE.AxisHelper( 20 ); scene.add(axes); var planeGeometry = new THREE.PlaneGeometry(60,20); var planeMaterial = new THREE.MeshBasicMaterial( {color: 0xcccccc}); var plane = new THREE.Mesh(planeGeometry,planeMaterial); plane.rotation.x = -0.5*Math.PI; plane.position.x = 15; plane.position.y = 0; plane.position.z = 0; scene.add(plane);

आप देख सकते हैं कि हमने कुल्हाड़ी की वस्तु बनाई है और हमारे दृश्य में कुल्हाड़ियों को जोड़ने के लिए दृश्य scene.add()

फ़ंक्शन का उपयोग किया है। अब हम एक प्लेन बना सकते हैं। यह दो चरणों में किया जाता है। पहले हम यह निर्धारित करते हैं कि विमान को new THREE

का उपयोग करके प्रदर्शित किया जाएगा। कोड में PlaneGeometry(60,20)

। इस स्थिति में, हमारे विमान की चौड़ाई 60 और 20 की ऊँचाई होगी। इसके अलावा, हमें तीन बार बताना होगा कि हमारा विमान कैसा दिखना चाहिए (उदाहरण के लिए, उसका रंग या पारदर्शिता)। Three.js में, हम एक भौतिक वस्तु बनाकर ऐसा करते हैं। पहले उदाहरण के लिए, हम रंग 0xcccccc की मुख्य सामग्री ( MeshBasicMaterial()

विधि का उपयोग करके MeshBasicMaterial()

बनाएंगे। इसके बाद, हम इन दो वस्तुओं को plane

नाम की एक जाल वस्तु में मिलाते plane

। इससे पहले कि हम दृश्य में plane

जोड़ते plane

, हमें इसे सही स्थिति में रखना होगा; हम इसे करते हैं, सबसे पहले, इसे एक्स अक्ष के चारों ओर 90 डिग्री घुमाकर, और फिर हम position

संपत्ति का उपयोग करके दृश्य पर इसकी स्थिति निर्धारित करते हैं। अंत में, हमें इस ऑब्जेक्ट को दृश्य में जोड़ना होगा, जिस तरह हमने axes

ऑब्जेक्ट के साथ किया था।

क्यूब और गोले को एक ही तरह से जोड़ा जाता है, लेकिन wireframe

संपत्ति का मूल्य true

होगा, तो आइए इस उदाहरण के अंतिम भाग पर चलते हैं:

 camera.position.x = -30; camera.position.y = 40; camera.position.z = 30; camera.lookAt(scene.position); $("#WebGL-output").append(renderer.domElement); renderer.render(scene, camera);

इस स्तर पर, वे सभी तत्व जिनकी हम कल्पना करना चाहते थे उन्हें उनके उचित स्थानों में दृश्य में जोड़ा गया। हमने पहले ही कहा है कि कैमरा निर्धारित करता है कि क्या प्रदर्शित किया जाएगा। इस कोड के टुकड़े में, हम स्थिति विशेषता के x, y और z मानों का उपयोग करके कैमरा को position

देते हैं और यह हमारे दृश्य पर मंडराने लगता है। यह सुनिश्चित करने के लिए कि कैमरा हमारी वस्तुओं को देख रहा है, हम अपने दृश्य के केंद्र को इंगित करने के लिए lookAt()

फ़ंक्शन का उपयोग करते हैं।

सामग्री, प्रकाश और छाया जोड़ना

नई सामग्री और लाइटिंग को थ्री.जैस में जोड़ना बहुत ही सरल और सुंदर है जैसा कि हमने पिछले भाग में किया था।

 var spotLight = new THREE.SpotLight( 0xffffff ); spotLight.position.set( -40, 60, -10 ); scene.add(spotLight );

SpotLight()

विधि spotLight.position.set( -40, 60, -10 )

से हमारे दृश्य को प्रकाशित करती है। स्थिति / spotLight.position.set( -40, 60, -10 )

स्थिति। यदि आप फिर से दृश्य प्रस्तुत करते हैं, तो आप देखेंगे कि पिछले उदाहरण के साथ कोई अंतर नहीं है। कारण यह है कि विभिन्न सामग्री प्रकाश के लिए अलग-अलग प्रतिक्रिया करती हैं। मुख्य सामग्री जो हमने पिछले उदाहरण में वस्तुओं के लिए इस्तेमाल की MeshBasicMaterial

( MeshBasicMaterial

() विधि का उपयोग करके) दृश्य में प्रकाश स्रोतों के लिए किसी भी तरह से प्रतिक्रिया नहीं करता है। वे बस एक विशिष्ट रंग में वस्तुओं की कल्पना करते हैं। इसलिए, हमें अपने विमान, गोले और घन के लिए सामग्री को नीचे दिखाए अनुसार बदलना चाहिए:

 var planeGeometry = new THREE.PlaneGeometry(60,20); var planeMaterial = new THREE.MeshLambertMaterial( {color: 0xffffff}); var plane = new THREE.Mesh(planeGeometry,planeMaterial); ... var cubeGeometry = new THREE.CubeGeometry(4,4,4); var cubeMaterial = new THREE.MeshLambertMaterial( {color: 0xff0000}); var cube = new THREE.Mesh(cubeGeometry, cubeMaterial); ... var sphereGeometry = new THREE.SphereGeometry(4,20,20); var sphereMaterial = new THREE.MeshLambertMaterial( {color: 0x7777ff}); var sphere = new THREE.Mesh(sphereGeometry,sphereMaterial);

कोड के इस भाग में, हमने अपनी वस्तुओं के लिए मेशलैम्बर्ट मटेरियल फ़ंक्शन का उपयोग करके भौतिक संपत्ति को बदल दिया। तीन.js दो सामग्री प्रदान करते हैं जो प्रकाश स्रोत अनुभव करते हैं: MeshLambertMaterial और MeshPhongMaterial।

हालाँकि, जैसा कि निम्नलिखित स्क्रीनशॉट में दिखाया गया है, यह अभी भी वह नहीं है जो हम इसके लिए लक्ष्य कर रहे हैं:

घन और गोला थोड़ा बेहतर निकला, लेकिन अभी तक इसमें कोई छाया नहीं है। रेंडरिंग शैडो में बहुत अधिक प्रोसेसिंग पावर होती है और इसी कारण से शैडोज़ को तीन.जैस में डिफ़ॉल्ट रूप से अक्षम कर दिया जाता है। लेकिन उनका समावेश वास्तव में बहुत सरल है। छाया के लिए, हमें स्रोत को कई स्थानों पर बदलने की आवश्यकता है, जैसा कि निम्नलिखित कोड टुकड़ा में दिखाया गया है:

 renderer.setClearColorHex(0xEEEEEE, 1.0); renderer.setSize(window.innerWidth, window.innerHeight); renderer.shadowMapEnabled = true;

पहली चीज जो हमें करने की ज़रूरत है वह यह है कि हम render

को शामिल करना चाहते हैं। तुम true

करने के लिए shadowMapEnabled

संपत्ति सेट करके ऐसा कर सकते हैं। यदि आप इस कार्रवाई के परिणाम को देखते हैं, तो हम कुछ भी नोटिस नहीं करेंगे। ऐसा इसलिए है क्योंकि हमें स्पष्ट रूप से यह निर्धारित करना चाहिए कि कौन सी वस्तु छाया डालेगी और किन वस्तुओं पर यह गिरेगी। हमारे उदाहरण में, हम चाहते हैं कि गोला और घन हमारे विमान पर छाया डालें। आप यह कर सकते हैं कि सही गुणों को सही पर सेट करके:

 plane.receiveShadow = true; ... cube.castShadow = true; ... sphere.castShadow = true;

अब आपको छाया दिखाने के लिए एक और चीज़ की ज़रूरत है। हमें यह निर्धारित करने की आवश्यकता है कि कौन से प्रकाश स्रोत छाया का कारण बनेंगे। वे सभी ऐसा नहीं कर सकते हैं, इस पर अगले भाग में चर्चा की जाएगी, हमारे उदाहरण में हम SpotLight()

विधि का उपयोग करेंगे। अब हमें सिर्फ सही संपत्ति निर्धारित करनी है और अंत में, छाया की कल्पना करें।

 spotLight.castShadow = true;

निम्नलिखित स्क्रीनशॉट में क्या देखा जा सकता है:

अगले भाग में हम एक साधारण एनीमेशन जोड़ेंगे।

आइए एनीमेशन के साथ हमारे दृश्य को जटिल करें

यदि हम किसी तरह अपने दृश्य को पुनर्जीवित करना चाहते हैं, तो सबसे पहले हमें एक निश्चित अंतराल पर दृश्य को फिर से परिभाषित करने का एक तरीका खोजना चाहिए। हम इसे setInterval(function,interval)

का उपयोग करके कर सकते हैं। इस फ़ंक्शन का उपयोग करके, हम एक फ़ंक्शन को परिभाषित कर सकते हैं जिसे प्रत्येक 100 मिलीसेकंड कहा जाएगा। इस फ़ंक्शन के साथ समस्या यह है कि यह इस बात पर ध्यान नहीं देता है कि ब्राउज़र में क्या हो रहा है। यदि आप एक और टैब देख रहे हैं, तो यह फ़ंक्शन अभी भी हर कुछ मिलीसेकंड कहलाएगा। इसके अलावा, setInterval()

विधि स्क्रीन रिड्राइविंग के साथ सिंक्रनाइज़ नहीं है। यह सब उच्च प्रोसेसर लोड और कम दक्षता को जन्म दे सकता है।

परिचय का अनुरोध कर रहा हूँअनामकरणफ्रेम () विधि

सौभाग्य से, आधुनिक ब्राउज़रों के पास requestAnimationFrame

() फ़ंक्शन: requestAnimationFrame

() विधि से जुड़ी समस्याओं का समाधान है। इस फ़ंक्शन का उपयोग करके, आप एक फ़ंक्शन निर्दिष्ट कर सकते हैं जिसे ब्राउज़र द्वारा परिभाषित अंतराल पर बुलाया जाएगा। आपको बस एक फंक्शन बनाना होगा जो रेंडरिंग को हैंडल करेगा, जैसा कि नीचे दिखाया गया है:

 function renderScene() { requestAnimationFrame(renderScene); renderer.render(scene, camera); }

renderScene

() फ़ंक्शन में, हम फिर से चल रहे एनीमेशन को बचाने के लिए requestAnimationFrame

() विधि को कॉल करते हैं। केवल एक चीज जो हमें चाहिए वह है renderer.render()

की जगह को बदलना। renderer.render()

विधि कॉल के बाद जब हमने दृश्य को पूरी तरह से बनाया है, हम एनीमेशन शुरू करने के लिए renderScene

() फ़ंक्शन को कॉल करते हैं:

 ... $("#WebGL-output").append(renderer.domElement); renderScene();

यदि आप इस कोड को चलाते हैं, तो आपको पिछले उदाहरण की तुलना में कोई बदलाव नहीं दिखेगा, क्योंकि हमने अभी तक कुछ भी एनिमेटेड नहीं किया है। इससे पहले कि हम एनीमेशन जोड़ते हैं, मैं एक छोटी सहायक लाइब्रेरी शुरू करना चाहता हूं जो हमें फ्रेम दर के बारे में जानकारी देती है जिसके साथ एनीमेशन काम करता है। हमें इसे कनेक्ट करने की आवश्यकता है जो तत्व में पंजीकृत है

    : 
      

        
        
        
      

     
      

        
        
        
      

     <script type="text/javascript" src="../libs/stats.js"></script> 
      

        
        
        
      

           ,         
      

        
        
        
      

     <div id="Stats-output"></div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     ,    –         ,   : 
      

        
        
        
      

     
      

        
        
        
      

     function initStats() { var stats = new Stats(); stats.setMode(0); stats.domElement.style.position = 'absolute'; stats.domElement.style.left = '0px'; stats.domElement.style.top = '0px'; $("#Stats-output").append(stats.domElement ); return stats; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

        .    setMode
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ().      0,    FPS,    1,     .      FPS,    0.      jQuery        : 
      

        
        
        
      

     
      

        
        
        
      

     $(function () { var stats = initStats(); … }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           render(): 
      

        
        
        
      

     function render() { stats.update(); ... requestAnimationFrame(render); renderer.render(scene, camera); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           ,       ,     : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

       
      

        
        
        
      

        requestAnimationFrame
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ()           .         render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     () ,         .    : 
      

        
        
        
      

     
      

        
        
        
      

     function render() { ... cube.rotation.x += 0.02; cube.rotation.y += 0.02; cube.rotation.z += 0.02; ... requestAnimationFrame(render); renderer.render(scene, camera); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

       ,   ?     –    rotation
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
        0,02      render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     (),        .  ,    ,     . 
      

        
        
        
      

     
      

        
        
        
      

       
      

        
        
        
      

                 render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ()  : 
      

        
        
        
      

     
      

        
        
        
      

     var step=0; function render() { ... step+=0.04; sphere.position.x = 20+( 10*(Math.cos(step))); sphere.position.y = 2 +( 10*Math.abs(Math.sin(step))); ... requestAnimationFrame(render); renderer.render(scene, camera); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           rotation
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ;        position
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      .  ,             ,    .               .  Math.cos()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      Math.sin()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
              step
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     .          .        ,  step+=0.04
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
         .        : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

         . 
      

        
        
        
      

         ,         .    3D-, ,       ,      .   ,        ,         .  ,  . 
      

        
        
        
      

     
      

        
        
        
      

       dat.GUI     
      

        
        
        
      

        Google     dat.GUI(        ),        .         ,      ,   : 
      

        
        
        
      

             
      

        
        
        
      

           ,    dat.GUI     ,   : 
      

        
        
        
      

     
      

        
        
        
      

     <script type="text/javascript" src="../libs/dat.gui.js"></script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

          –   JavaScript ,    ,    ,   dat.GUI.         JavaScript : 
      

        
        
        
      

     
      

        
        
        
      

     var controls = new function() { this.rotationSpeed = 0.02; this.bouncingSpeed = 0.03; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           : this.rotationSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      this.bouncingSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
          .         dat.GUI      ,   : 
      

        
        
        
      

     
      

        
        
        
      

     var gui = new dat.GUI(); gui.add(controls, 'rotationSpeed',0,0.5); gui.add(controls, 'bouncingSpeed',0,0.5);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

      rotationSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      bouncingSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
          0  0,5. ,      –  ,      render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
           ,  ,         dat.GUI,           .    : 
      

        
        
        
      

     
      

        
        
        
      

     function render() { ... cube.rotation.x += controls.rotationSpeed; cube.rotation.y += controls.rotationSpeed; cube.rotation.z += controls.rotationSpeed; step+=controls.bouncingSpeed; sphere.position.x = 20+( 10*(Math.cos(step))); sphere.position.y = 2 +( 10*Math.abs(Math.sin(step))); ... }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     ,    ,     ,          : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

         . 
      

        
        
        
      

     
      

        
        
        
      

      ASCII  
      

        
        
        
      

               3D-      . Three.js     ,      ,     .      ,         : ASCII .        ,      -ASCII,     .            : 
      

        
        
        
      

     
      

        
        
        
      

     $("#WebGL-output").append(renderer.domElement);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

      : 
      

        
        
        
      

     var effect = new THREE.AsciiEffect( renderer ); effect.setSize(window.innerWidth, window.innerHeight ); $("#WebGL-output").append(effect.domElement);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

               .    renderer.render(scene, camera),    effect.render(scene,camera).       : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

        . 
      

        
        
        
      

      ,      ,     ,       Three.js   . 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

           .         ,     Three.js           . 
      

        
        
        
      

          ,      .        ,     Three.js. 
      

        
        
        
      

        ,   : GitHub

   : 
      

        
        
        
      

     
      

        
        
        
      

     <script type="text/javascript" src="../libs/stats.js"></script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           ,         
      

        
        
        
      

     <div id="Stats-output"></div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     ,    –         ,   : 
      

        
        
        
      

     
      

        
        
        
      

     function initStats() { var stats = new Stats(); stats.setMode(0); stats.domElement.style.position = 'absolute'; stats.domElement.style.left = '0px'; stats.domElement.style.top = '0px'; $("#Stats-output").append(stats.domElement ); return stats; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

        .    setMode
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ().      0,    FPS,    1,     .      FPS,    0.      jQuery        : 
      

        
        
        
      

     
      

        
        
        
      

     $(function () { var stats = initStats(); … }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           render(): 
      

        
        
        
      

     function render() { stats.update(); ... requestAnimationFrame(render); renderer.render(scene, camera); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           ,       ,     : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

       
      

        
        
        
      

        requestAnimationFrame
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ()           .         render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     () ,         .    : 
      

        
        
        
      

     
      

        
        
        
      

     function render() { ... cube.rotation.x += 0.02; cube.rotation.y += 0.02; cube.rotation.z += 0.02; ... requestAnimationFrame(render); renderer.render(scene, camera); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

       ,   ?     –    rotation
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
        0,02      render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     (),        .  ,    ,     . 
      

        
        
        
      

     
      

        
        
        
      

       
      

        
        
        
      

                 render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ()  : 
      

        
        
        
      

     
      

        
        
        
      

     var step=0; function render() { ... step+=0.04; sphere.position.x = 20+( 10*(Math.cos(step))); sphere.position.y = 2 +( 10*Math.abs(Math.sin(step))); ... requestAnimationFrame(render); renderer.render(scene, camera); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           rotation
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ;        position
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      .  ,             ,    .               .  Math.cos()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      Math.sin()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
              step
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     .          .        ,  step+=0.04
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
         .        : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

         . 
      

        
        
        
      

         ,         .    3D-, ,       ,      .   ,        ,         .  ,  . 
      

        
        
        
      

     
      

        
        
        
      

       dat.GUI     
      

        
        
        
      

        Google     dat.GUI(        ),        .         ,      ,   : 
      

        
        
        
      

             
      

        
        
        
      

           ,    dat.GUI     ,   : 
      

        
        
        
      

     
      

        
        
        
      

     <script type="text/javascript" src="../libs/dat.gui.js"></script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

          –   JavaScript ,    ,    ,   dat.GUI.         JavaScript : 
      

        
        
        
      

     
      

        
        
        
      

     var controls = new function() { this.rotationSpeed = 0.02; this.bouncingSpeed = 0.03; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           : this.rotationSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      this.bouncingSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
          .         dat.GUI      ,   : 
      

        
        
        
      

     
      

        
        
        
      

     var gui = new dat.GUI(); gui.add(controls, 'rotationSpeed',0,0.5); gui.add(controls, 'bouncingSpeed',0,0.5);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

      rotationSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      bouncingSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
          0  0,5. ,      –  ,      render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
           ,  ,         dat.GUI,           .    : 
      

        
        
        
      

     
      

        
        
        
      

     function render() { ... cube.rotation.x += controls.rotationSpeed; cube.rotation.y += controls.rotationSpeed; cube.rotation.z += controls.rotationSpeed; step+=controls.bouncingSpeed; sphere.position.x = 20+( 10*(Math.cos(step))); sphere.position.y = 2 +( 10*Math.abs(Math.sin(step))); ... }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     ,    ,     ,          : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

         . 
      

        
        
        
      

     
      

        
        
        
      

      ASCII  
      

        
        
        
      

               3D-      . Three.js     ,      ,     .      ,         : ASCII .        ,      -ASCII,     .            : 
      

        
        
        
      

     
      

        
        
        
      

     $("#WebGL-output").append(renderer.domElement);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

      : 
      

        
        
        
      

     var effect = new THREE.AsciiEffect( renderer ); effect.setSize(window.innerWidth, window.innerHeight ); $("#WebGL-output").append(effect.domElement);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

               .    renderer.render(scene, camera),    effect.render(scene,camera).       : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

        . 
      

        
        
        
      

      ,      ,     ,       Three.js   . 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

           .         ,     Three.js           . 
      

        
        
        
      

          ,      .        ,     Three.js. 
      

        
        
        
      

        ,   : GitHub

    : 
      

        
        
        
      

     
      

        
        
        
      

     <script type="text/javascript" src="../libs/stats.js"></script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

          ,         
      

        
        
        
      

     <div id="Stats-output"></div> 
      

        
        
        
      

     ,    –         ,   : 
      

        
        
        
      

     
      

        
        
        
      

     function initStats() { var stats = new Stats(); stats.setMode(0); stats.domElement.style.position = 'absolute'; stats.domElement.style.left = '0px'; stats.domElement.style.top = '0px'; $("#Stats-output").append(stats.domElement ); return stats; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

        .    setMode
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ().      0,    FPS,    1,     .      FPS,    0.      jQuery        : 
      

        
        
        
      

     
      

        
        
        
      

     $(function () { var stats = initStats(); … }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           render(): 
      

        
        
        
      

     function render() { stats.update(); ... requestAnimationFrame(render); renderer.render(scene, camera); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           ,       ,     : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

       
      

        
        
        
      

        requestAnimationFrame
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ()           .         render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     () ,         .    : 
      

        
        
        
      

     
      

        
        
        
      

     function render() { ... cube.rotation.x += 0.02; cube.rotation.y += 0.02; cube.rotation.z += 0.02; ... requestAnimationFrame(render); renderer.render(scene, camera); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

       ,   ?     –    rotation
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
        0,02      render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     (),        .  ,    ,     . 
      

        
        
        
      

     
      

        
        
        
      

       
      

        
        
        
      

                 render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ()  : 
      

        
        
        
      

     
      

        
        
        
      

     var step=0; function render() { ... step+=0.04; sphere.position.x = 20+( 10*(Math.cos(step))); sphere.position.y = 2 +( 10*Math.abs(Math.sin(step))); ... requestAnimationFrame(render); renderer.render(scene, camera); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           rotation
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ;        position
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      .  ,             ,    .               .  Math.cos()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      Math.sin()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
              step
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     .          .        ,  step+=0.04
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
         .        : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

         . 
      

        
        
        
      

         ,         .    3D-, ,       ,      .   ,        ,         .  ,  . 
      

        
        
        
      

     
      

        
        
        
      

       dat.GUI     
      

        
        
        
      

        Google     dat.GUI(        ),        .         ,      ,   : 
      

        
        
        
      

             
      

        
        
        
      

           ,    dat.GUI     ,   : 
      

        
        
        
      

     
      

        
        
        
      

     <script type="text/javascript" src="../libs/dat.gui.js"></script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

          –   JavaScript ,    ,    ,   dat.GUI.         JavaScript : 
      

        
        
        
      

     
      

        
        
        
      

     var controls = new function() { this.rotationSpeed = 0.02; this.bouncingSpeed = 0.03; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           : this.rotationSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      this.bouncingSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
          .         dat.GUI      ,   : 
      

        
        
        
      

     
      

        
        
        
      

     var gui = new dat.GUI(); gui.add(controls, 'rotationSpeed',0,0.5); gui.add(controls, 'bouncingSpeed',0,0.5);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

      rotationSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      bouncingSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
          0  0,5. ,      –  ,      render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
           ,  ,         dat.GUI,           .    : 
      

        
        
        
      

     
      

        
        
        
      

     function render() { ... cube.rotation.x += controls.rotationSpeed; cube.rotation.y += controls.rotationSpeed; cube.rotation.z += controls.rotationSpeed; step+=controls.bouncingSpeed; sphere.position.x = 20+( 10*(Math.cos(step))); sphere.position.y = 2 +( 10*Math.abs(Math.sin(step))); ... }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     ,    ,     ,          : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

         . 
      

        
        
        
      

     
      

        
        
        
      

      ASCII  
      

        
        
        
      

               3D-      . Three.js     ,      ,     .      ,         : ASCII .        ,      -ASCII,     .            : 
      

        
        
        
      

     
      

        
        
        
      

     $("#WebGL-output").append(renderer.domElement);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

      : 
      

        
        
        
      

     var effect = new THREE.AsciiEffect( renderer ); effect.setSize(window.innerWidth, window.innerHeight ); $("#WebGL-output").append(effect.domElement);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

               .    renderer.render(scene, camera),    effect.render(scene,camera).       : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

        . 
      

        
        
        
      

      ,      ,     ,       Three.js   . 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

           .         ,     Three.js           . 
      

        
        
        
      

          ,      .        ,     Three.js. 
      

        
        
        
      

        ,   : GitHub

   : 
      

        
        
        
      

     
      

        
        
        
      

     <script type="text/javascript" src="../libs/stats.js"></script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           ,         
      

        
        
        
      

     <div id="Stats-output"></div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     ,    –         ,   : 
      

        
        
        
      

     
      

        
        
        
      

     function initStats() { var stats = new Stats(); stats.setMode(0); stats.domElement.style.position = 'absolute'; stats.domElement.style.left = '0px'; stats.domElement.style.top = '0px'; $("#Stats-output").append(stats.domElement ); return stats; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

        .    setMode
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ().      0,    FPS,    1,     .      FPS,    0.      jQuery        : 
      

        
        
        
      

     
      

        
        
        
      

     $(function () { var stats = initStats(); … }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           render(): 
      

        
        
        
      

     function render() { stats.update(); ... requestAnimationFrame(render); renderer.render(scene, camera); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           ,       ,     : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

       
      

        
        
        
      

        requestAnimationFrame
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ()           .         render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     () ,         .    : 
      

        
        
        
      

     
      

        
        
        
      

     function render() { ... cube.rotation.x += 0.02; cube.rotation.y += 0.02; cube.rotation.z += 0.02; ... requestAnimationFrame(render); renderer.render(scene, camera); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

       ,   ?     –    rotation
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
        0,02      render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     (),        .  ,    ,     . 
      

        
        
        
      

     
      

        
        
        
      

       
      

        
        
        
      

                 render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ()  : 
      

        
        
        
      

     
      

        
        
        
      

     var step=0; function render() { ... step+=0.04; sphere.position.x = 20+( 10*(Math.cos(step))); sphere.position.y = 2 +( 10*Math.abs(Math.sin(step))); ... requestAnimationFrame(render); renderer.render(scene, camera); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           rotation
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ;        position
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      .  ,             ,    .               .  Math.cos()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      Math.sin()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
              step
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     .          .        ,  step+=0.04
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
         .        : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

         . 
      

        
        
        
      

         ,         .    3D-, ,       ,      .   ,        ,         .  ,  . 
      

        
        
        
      

     
      

        
        
        
      

       dat.GUI     
      

        
        
        
      

        Google     dat.GUI(        ),        .         ,      ,   : 
      

        
        
        
      

             
      

        
        
        
      

           ,    dat.GUI     ,   : 
      

        
        
        
      

     
      

        
        
        
      

     <script type="text/javascript" src="../libs/dat.gui.js"></script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

          –   JavaScript ,    ,    ,   dat.GUI.         JavaScript : 
      

        
        
        
      

     
      

        
        
        
      

     var controls = new function() { this.rotationSpeed = 0.02; this.bouncingSpeed = 0.03; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           : this.rotationSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      this.bouncingSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
          .         dat.GUI      ,   : 
      

        
        
        
      

     
      

        
        
        
      

     var gui = new dat.GUI(); gui.add(controls, 'rotationSpeed',0,0.5); gui.add(controls, 'bouncingSpeed',0,0.5);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

      rotationSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      bouncingSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
          0  0,5. ,      –  ,      render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
           ,  ,         dat.GUI,           .    : 
      

        
        
        
      

     
      

        
        
        
      

     function render() { ... cube.rotation.x += controls.rotationSpeed; cube.rotation.y += controls.rotationSpeed; cube.rotation.z += controls.rotationSpeed; step+=controls.bouncingSpeed; sphere.position.x = 20+( 10*(Math.cos(step))); sphere.position.y = 2 +( 10*Math.abs(Math.sin(step))); ... }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     ,    ,     ,          : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

         . 
      

        
        
        
      

     
      

        
        
        
      

      ASCII  
      

        
        
        
      

               3D-      . Three.js     ,      ,     .      ,         : ASCII .        ,      -ASCII,     .            : 
      

        
        
        
      

     
      

        
        
        
      

     $("#WebGL-output").append(renderer.domElement);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

      : 
      

        
        
        
      

     var effect = new THREE.AsciiEffect( renderer ); effect.setSize(window.innerWidth, window.innerHeight ); $("#WebGL-output").append(effect.domElement);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

               .    renderer.render(scene, camera),    effect.render(scene,camera).       : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

        . 
      

        
        
        
      

      ,      ,     ,       Three.js   . 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

           .         ,     Three.js           . 
      

        
        
        
      

          ,      .        ,     Three.js. 
      

        
        
        
      

        ,   : GitHub

    : 
      

        
        
        
      

     
      

        
        
        
      

     <script type="text/javascript" src="../libs/stats.js"></script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           ,         
      

        
        
        
      

     <div id="Stats-output"></div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     ,    –         ,   : 
      

        
        
        
      

     
      

        
        
        
      

     function initStats() { var stats = new Stats(); stats.setMode(0); stats.domElement.style.position = 'absolute'; stats.domElement.style.left = '0px'; stats.domElement.style.top = '0px'; $("#Stats-output").append(stats.domElement ); return stats; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

        .    setMode
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ().      0,    FPS,    1,     .      FPS,    0.      jQuery        : 
      

        
        
        
      

     
      

        
        
        
      

     $(function () { var stats = initStats(); … }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           render(): 
      

        
        
        
      

     function render() { stats.update(); ... requestAnimationFrame(render); renderer.render(scene, camera); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           ,       ,     : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

       
      

        
        
        
      

        requestAnimationFrame
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ()           .         render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     () ,         .    : 
      

        
        
        
      

     
      

        
        
        
      

     function render() { ... cube.rotation.x += 0.02; cube.rotation.y += 0.02; cube.rotation.z += 0.02; ... requestAnimationFrame(render); renderer.render(scene, camera); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

       ,   ?     –    rotation
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
        0,02      render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     (),        .  ,    ,     . 
      

        
        
        
      

     
      

        
        
        
      

       
      

        
        
        
      

                 render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ()  : 
      

        
        
        
      

     
      

        
        
        
      

     var step=0; function render() { ... step+=0.04; sphere.position.x = 20+( 10*(Math.cos(step))); sphere.position.y = 2 +( 10*Math.abs(Math.sin(step))); ... requestAnimationFrame(render); renderer.render(scene, camera); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           rotation
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ;        position
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      .  ,             ,    .               .  Math.cos()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      Math.sin()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
              step
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     .          .        ,  step+=0.04
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
         .        : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

         . 
      

        
        
        
      

         ,         .    3D-, ,       ,      .   ,        ,         .  ,  . 
      

        
        
        
      

     
      

        
        
        
      

       dat.GUI     
      

        
        
        
      

        Google     dat.GUI(        ),        .         ,      ,   : 
      

        
        
        
      

             
      

        
        
        
      

           ,    dat.GUI     ,   : 
      

        
        
        
      

     
      

        
        
        
      

     <script type="text/javascript" src="../libs/dat.gui.js"></script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

          –   JavaScript ,    ,    ,   dat.GUI.         JavaScript : 
      

        
        
        
      

     
      

        
        
        
      

     var controls = new function() { this.rotationSpeed = 0.02; this.bouncingSpeed = 0.03; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           : this.rotationSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      this.bouncingSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
          .         dat.GUI      ,   : 
      

        
        
        
      

     
      

        
        
        
      

     var gui = new dat.GUI(); gui.add(controls, 'rotationSpeed',0,0.5); gui.add(controls, 'bouncingSpeed',0,0.5);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

      rotationSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      bouncingSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
          0  0,5. ,      –  ,      render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
           ,  ,         dat.GUI,           .    : 
      

        
        
        
      

     
      

        
        
        
      

     function render() { ... cube.rotation.x += controls.rotationSpeed; cube.rotation.y += controls.rotationSpeed; cube.rotation.z += controls.rotationSpeed; step+=controls.bouncingSpeed; sphere.position.x = 20+( 10*(Math.cos(step))); sphere.position.y = 2 +( 10*Math.abs(Math.sin(step))); ... }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     ,    ,     ,          : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

         . 
      

        
        
        
      

     
      

        
        
        
      

      ASCII  
      

        
        
        
      

               3D-      . Three.js     ,      ,     .      ,         : ASCII .        ,      -ASCII,     .            : 
      

        
        
        
      

     
      

        
        
        
      

     $("#WebGL-output").append(renderer.domElement);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

      : 
      

        
        
        
      

     var effect = new THREE.AsciiEffect( renderer ); effect.setSize(window.innerWidth, window.innerHeight ); $("#WebGL-output").append(effect.domElement);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

               .    renderer.render(scene, camera),    effect.render(scene,camera).       : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

        . 
      

        
        
        
      

      ,      ,     ,       Three.js   . 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

           .         ,     Three.js           . 
      

        
        
        
      

          ,      .        ,     Three.js. 
      

        
        
        
      

        ,   : GitHub

   : 
      

        
        
        
      

     
      

        
        
        
      

     <script type="text/javascript" src="../libs/stats.js"></script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           ,         
      

        
        
        
      

     <div id="Stats-output"></div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     ,    –         ,   : 
      

        
        
        
      

     
      

        
        
        
      

     function initStats() { var stats = new Stats(); stats.setMode(0); stats.domElement.style.position = 'absolute'; stats.domElement.style.left = '0px'; stats.domElement.style.top = '0px'; $("#Stats-output").append(stats.domElement ); return stats; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

        .    setMode
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ().      0,    FPS,    1,     .      FPS,    0.      jQuery        : 
      

        
        
        
      

     
      

        
        
        
      

     $(function () { var stats = initStats(); … }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           render(): 
      

        
        
        
      

     function render() { stats.update(); ... requestAnimationFrame(render); renderer.render(scene, camera); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           ,       ,     : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

       
      

        
        
        
      

        requestAnimationFrame
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ()           .         render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     () ,         .    : 
      

        
        
        
      

     
      

        
        
        
      

     function render() { ... cube.rotation.x += 0.02; cube.rotation.y += 0.02; cube.rotation.z += 0.02; ... requestAnimationFrame(render); renderer.render(scene, camera); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

       ,   ?     –    rotation
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
        0,02      render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     (),        .  ,    ,     . 
      

        
        
        
      

     
      

        
        
        
      

       
      

        
        
        
      

                 render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ()  : 
      

        
        
        
      

     
      

        
        
        
      

     var step=0; function render() { ... step+=0.04; sphere.position.x = 20+( 10*(Math.cos(step))); sphere.position.y = 2 +( 10*Math.abs(Math.sin(step))); ... requestAnimationFrame(render); renderer.render(scene, camera); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           rotation
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ;        position
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      .  ,             ,    .               .  Math.cos()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      Math.sin()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
              step
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     .          .        ,  step+=0.04
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
         .        : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

         . 
      

        
        
        
      

         ,         .    3D-, ,       ,      .   ,        ,         .  ,  . 
      

        
        
        
      

     
      

        
        
        
      

       dat.GUI     
      

        
        
        
      

        Google     dat.GUI(        ),        .         ,      ,   : 
      

        
        
        
      

             
      

        
        
        
      

           ,    dat.GUI     ,   : 
      

        
        
        
      

     
      

        
        
        
      

     <script type="text/javascript" src="../libs/dat.gui.js"></script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

          –   JavaScript ,    ,    ,   dat.GUI.         JavaScript : 
      

        
        
        
      

     
      

        
        
        
      

     var controls = new function() { this.rotationSpeed = 0.02; this.bouncingSpeed = 0.03; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           : this.rotationSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      this.bouncingSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
          .         dat.GUI      ,   : 
      

        
        
        
      

     
      

        
        
        
      

     var gui = new dat.GUI(); gui.add(controls, 'rotationSpeed',0,0.5); gui.add(controls, 'bouncingSpeed',0,0.5);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

      rotationSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      bouncingSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
          0  0,5. ,      –  ,      render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
           ,  ,         dat.GUI,           .    : 
      

        
        
        
      

     
      

        
        
        
      

     function render() { ... cube.rotation.x += controls.rotationSpeed; cube.rotation.y += controls.rotationSpeed; cube.rotation.z += controls.rotationSpeed; step+=controls.bouncingSpeed; sphere.position.x = 20+( 10*(Math.cos(step))); sphere.position.y = 2 +( 10*Math.abs(Math.sin(step))); ... }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     ,    ,     ,          : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

         . 
      

        
        
        
      

     
      

        
        
        
      

      ASCII  
      

        
        
        
      

               3D-      . Three.js     ,      ,     .      ,         : ASCII .        ,      -ASCII,     .            : 
      

        
        
        
      

     
      

        
        
        
      

     $("#WebGL-output").append(renderer.domElement);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

      : 
      

        
        
        
      

     var effect = new THREE.AsciiEffect( renderer ); effect.setSize(window.innerWidth, window.innerHeight ); $("#WebGL-output").append(effect.domElement);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

               .    renderer.render(scene, camera),    effect.render(scene,camera).       : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

        . 
      

        
        
        
      

      ,      ,     ,       Three.js   . 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

           .         ,     Three.js           . 
      

        
        
        
      

          ,      .        ,     Three.js. 
      

        
        
        
      

        ,   : GitHub

    : 
      

        
        
        
      

     
      

        
        
        
      

     <script type="text/javascript" src="../libs/stats.js"></script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           ,         
      

        
        
        
      

     <div id="Stats-output"></div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     ,    –         ,   : 
      

        
        
        
      

     
      

        
        
        
      

     function initStats() { var stats = new Stats(); stats.setMode(0); stats.domElement.style.position = 'absolute'; stats.domElement.style.left = '0px'; stats.domElement.style.top = '0px'; $("#Stats-output").append(stats.domElement ); return stats; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

        .    setMode
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ().      0,    FPS,    1,     .      FPS,    0.      jQuery        : 
      

        
        
        
      

     
      

        
        
        
      

     $(function () { var stats = initStats(); … }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           render(): 
      

        
        
        
      

     function render() { stats.update(); ... requestAnimationFrame(render); renderer.render(scene, camera); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           ,       ,     : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

       
      

        
        
        
      

        requestAnimationFrame
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ()           .         render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     () ,         .    : 
      

        
        
        
      

     
      

        
        
        
      

     function render() { ... cube.rotation.x += 0.02; cube.rotation.y += 0.02; cube.rotation.z += 0.02; ... requestAnimationFrame(render); renderer.render(scene, camera); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

       ,   ?     –    rotation
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
        0,02      render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     (),        .  ,    ,     . 
      

        
        
        
      

     
      

        
        
        
      

       
      

        
        
        
      

                 render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ()  : 
      

        
        
        
      

     
      

        
        
        
      

     var step=0; function render() { ... step+=0.04; sphere.position.x = 20+( 10*(Math.cos(step))); sphere.position.y = 2 +( 10*Math.abs(Math.sin(step))); ... requestAnimationFrame(render); renderer.render(scene, camera); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           rotation
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ;        position
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      .  ,             ,    .               .  Math.cos()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      Math.sin()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
              step
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     .          .        ,  step+=0.04
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
         .        : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

         . 
      

        
        
        
      

         ,         .    3D-, ,       ,      .   ,        ,         .  ,  . 
      

        
        
        
      

     
      

        
        
        
      

       dat.GUI     
      

        
        
        
      

        Google     dat.GUI(        ),        .         ,      ,   : 
      

        
        
        
      

             
      

        
        
        
      

           ,    dat.GUI     ,   : 
      

        
        
        
      

     
      

        
        
        
      

     <script type="text/javascript" src="../libs/dat.gui.js"></script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

          –   JavaScript ,    ,    ,   dat.GUI.         JavaScript : 
      

        
        
        
      

     
      

        
        
        
      

     var controls = new function() { this.rotationSpeed = 0.02; this.bouncingSpeed = 0.03; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           : this.rotationSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      this.bouncingSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
          .         dat.GUI      ,   : 
      

        
        
        
      

     
      

        
        
        
      

     var gui = new dat.GUI(); gui.add(controls, 'rotationSpeed',0,0.5); gui.add(controls, 'bouncingSpeed',0,0.5);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

      rotationSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      bouncingSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
          0  0,5. ,      –  ,      render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
           ,  ,         dat.GUI,           .    : 
      

        
        
        
      

     
      

        
        
        
      

     function render() { ... cube.rotation.x += controls.rotationSpeed; cube.rotation.y += controls.rotationSpeed; cube.rotation.z += controls.rotationSpeed; step+=controls.bouncingSpeed; sphere.position.x = 20+( 10*(Math.cos(step))); sphere.position.y = 2 +( 10*Math.abs(Math.sin(step))); ... }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     ,    ,     ,          : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

         . 
      

        
        
        
      

     
      

        
        
        
      

      ASCII  
      

        
        
        
      

               3D-      . Three.js     ,      ,     .      ,         : ASCII .        ,      -ASCII,     .            : 
      

        
        
        
      

     
      

        
        
        
      

     $("#WebGL-output").append(renderer.domElement);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

      : 
      

        
        
        
      

     var effect = new THREE.AsciiEffect( renderer ); effect.setSize(window.innerWidth, window.innerHeight ); $("#WebGL-output").append(effect.domElement);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

               .    renderer.render(scene, camera),    effect.render(scene,camera).       : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

        . 
      

        
        
        
      

      ,      ,     ,       Three.js   . 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

           .         ,     Three.js           . 
      

        
        
        
      

          ,      .        ,     Three.js. 
      

        
        
        
      

        ,   : GitHub

   : 
      

        
        
        
      

     
      

        
        
        
      

     <script type="text/javascript" src="../libs/stats.js"></script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           ,         
      

        
        
        
      

     <div id="Stats-output"></div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     ,    –         ,   : 
      

        
        
        
      

     
      

        
        
        
      

     function initStats() { var stats = new Stats(); stats.setMode(0); stats.domElement.style.position = 'absolute'; stats.domElement.style.left = '0px'; stats.domElement.style.top = '0px'; $("#Stats-output").append(stats.domElement ); return stats; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

        .    setMode
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ().      0,    FPS,    1,     .      FPS,    0.      jQuery        : 
      

        
        
        
      

     
      

        
        
        
      

     $(function () { var stats = initStats(); … }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           render(): 
      

        
        
        
      

     function render() { stats.update(); ... requestAnimationFrame(render); renderer.render(scene, camera); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           ,       ,     : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

       
      

        
        
        
      

        requestAnimationFrame
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ()           .         render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     () ,         .    : 
      

        
        
        
      

     
      

        
        
        
      

     function render() { ... cube.rotation.x += 0.02; cube.rotation.y += 0.02; cube.rotation.z += 0.02; ... requestAnimationFrame(render); renderer.render(scene, camera); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

       ,   ?     –    rotation
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
        0,02      render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     (),        .  ,    ,     . 
      

        
        
        
      

     
      

        
        
        
      

       
      

        
        
        
      

                 render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ()  : 
      

        
        
        
      

     
      

        
        
        
      

     var step=0; function render() { ... step+=0.04; sphere.position.x = 20+( 10*(Math.cos(step))); sphere.position.y = 2 +( 10*Math.abs(Math.sin(step))); ... requestAnimationFrame(render); renderer.render(scene, camera); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           rotation
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ;        position
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      .  ,             ,    .               .  Math.cos()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      Math.sin()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
              step
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     .          .        ,  step+=0.04
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
         .        : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

         . 
      

        
        
        
      

         ,         .    3D-, ,       ,      .   ,        ,         .  ,  . 
      

        
        
        
      

     
      

        
        
        
      

       dat.GUI     
      

        
        
        
      

        Google     dat.GUI(        ),        .         ,      ,   : 
      

        
        
        
      

             
      

        
        
        
      

           ,    dat.GUI     ,   : 
      

        
        
        
      

     
      

        
        
        
      

     <script type="text/javascript" src="../libs/dat.gui.js"></script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

          –   JavaScript ,    ,    ,   dat.GUI.         JavaScript : 
      

        
        
        
      

     
      

        
        
        
      

     var controls = new function() { this.rotationSpeed = 0.02; this.bouncingSpeed = 0.03; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           : this.rotationSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      this.bouncingSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
          .         dat.GUI      ,   : 
      

        
        
        
      

     
      

        
        
        
      

     var gui = new dat.GUI(); gui.add(controls, 'rotationSpeed',0,0.5); gui.add(controls, 'bouncingSpeed',0,0.5);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

      rotationSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      bouncingSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
          0  0,5. ,      –  ,      render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
           ,  ,         dat.GUI,           .    : 
      

        
        
        
      

     
      

        
        
        
      

     function render() { ... cube.rotation.x += controls.rotationSpeed; cube.rotation.y += controls.rotationSpeed; cube.rotation.z += controls.rotationSpeed; step+=controls.bouncingSpeed; sphere.position.x = 20+( 10*(Math.cos(step))); sphere.position.y = 2 +( 10*Math.abs(Math.sin(step))); ... }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     ,    ,     ,          : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

         . 
      

        
        
        
      

     
      

        
        
        
      

      ASCII  
      

        
        
        
      

               3D-      . Three.js     ,      ,     .      ,         : ASCII .        ,      -ASCII,     .            : 
      

        
        
        
      

     
      

        
        
        
      

     $("#WebGL-output").append(renderer.domElement);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

      : 
      

        
        
        
      

     var effect = new THREE.AsciiEffect( renderer ); effect.setSize(window.innerWidth, window.innerHeight ); $("#WebGL-output").append(effect.domElement);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

               .    renderer.render(scene, camera),    effect.render(scene,camera).       : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

        . 
      

        
        
        
      

      ,      ,     ,       Three.js   . 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

           .         ,     Three.js           . 
      

        
        
        
      

          ,      .        ,     Three.js. 
      

        
        
        
      

        ,   : GitHub

    : 
      

        
        
        
      

     
      

        
        
        
      

     <script type="text/javascript" src="../libs/stats.js"></script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           ,         
      

        
        
        
      

     <div id="Stats-output"></div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     ,    –         ,   : 
      

        
        
        
      

     
      

        
        
        
      

     function initStats() { var stats = new Stats(); stats.setMode(0); stats.domElement.style.position = 'absolute'; stats.domElement.style.left = '0px'; stats.domElement.style.top = '0px'; $("#Stats-output").append(stats.domElement ); return stats; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

        .    setMode
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ().      0,    FPS,    1,     .      FPS,    0.      jQuery        : 
      

        
        
        
      

     
      

        
        
        
      

     $(function () { var stats = initStats(); … }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           render(): 
      

        
        
        
      

     function render() { stats.update(); ... requestAnimationFrame(render); renderer.render(scene, camera); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           ,       ,     : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

       
      

        
        
        
      

        requestAnimationFrame
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ()           .         render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     () ,         .    : 
      

        
        
        
      

     
      

        
        
        
      

     function render() { ... cube.rotation.x += 0.02; cube.rotation.y += 0.02; cube.rotation.z += 0.02; ... requestAnimationFrame(render); renderer.render(scene, camera); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

       ,   ?     –    rotation
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
        0,02      render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     (),        .  ,    ,     . 
      

        
        
        
      

     
      

        
        
        
      

       
      

        
        
        
      

                 render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ()  : 
      

        
        
        
      

     
      

        
        
        
      

     var step=0; function render() { ... step+=0.04; sphere.position.x = 20+( 10*(Math.cos(step))); sphere.position.y = 2 +( 10*Math.abs(Math.sin(step))); ... requestAnimationFrame(render); renderer.render(scene, camera); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           rotation
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ;        position
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      .  ,             ,    .               .  Math.cos()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      Math.sin()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
              step
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     .          .        ,  step+=0.04
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
         .        : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

         . 
      

        
        
        
      

         ,         .    3D-, ,       ,      .   ,        ,         .  ,  . 
      

        
        
        
      

     
      

        
        
        
      

       dat.GUI     
      

        
        
        
      

        Google     dat.GUI(        ),        .         ,      ,   : 
      

        
        
        
      

             
      

        
        
        
      

           ,    dat.GUI     ,   : 
      

        
        
        
      

     
      

        
        
        
      

     <script type="text/javascript" src="../libs/dat.gui.js"></script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

          –   JavaScript ,    ,    ,   dat.GUI.         JavaScript : 
      

        
        
        
      

     
      

        
        
        
      

     var controls = new function() { this.rotationSpeed = 0.02; this.bouncingSpeed = 0.03; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           : this.rotationSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      this.bouncingSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
          .         dat.GUI      ,   : 
      

        
        
        
      

     
      

        
        
        
      

     var gui = new dat.GUI(); gui.add(controls, 'rotationSpeed',0,0.5); gui.add(controls, 'bouncingSpeed',0,0.5);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

      rotationSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      bouncingSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
          0  0,5. ,      –  ,      render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
           ,  ,         dat.GUI,           .    : 
      

        
        
        
      

     
      

        
        
        
      

     function render() { ... cube.rotation.x += controls.rotationSpeed; cube.rotation.y += controls.rotationSpeed; cube.rotation.z += controls.rotationSpeed; step+=controls.bouncingSpeed; sphere.position.x = 20+( 10*(Math.cos(step))); sphere.position.y = 2 +( 10*Math.abs(Math.sin(step))); ... }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     ,    ,     ,          : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

         . 
      

        
        
        
      

     
      

        
        
        
      

      ASCII  
      

        
        
        
      

               3D-      . Three.js     ,      ,     .      ,         : ASCII .        ,      -ASCII,     .            : 
      

        
        
        
      

     
      

        
        
        
      

     $("#WebGL-output").append(renderer.domElement);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

      : 
      

        
        
        
      

     var effect = new THREE.AsciiEffect( renderer ); effect.setSize(window.innerWidth, window.innerHeight ); $("#WebGL-output").append(effect.domElement);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

               .    renderer.render(scene, camera),    effect.render(scene,camera).       : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

        . 
      

        
        
        
      

      ,      ,     ,       Three.js   . 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

           .         ,     Three.js           . 
      

        
        
        
      

          ,      .        ,     Three.js. 
      

        
        
        
      

        ,   : GitHub

   : 
      

        
        
        
      

     
      

        
        
        
      

     <script type="text/javascript" src="../libs/stats.js"></script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           ,         
      

        
        
        
      

     <div id="Stats-output"></div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     ,    –         ,   : 
      

        
        
        
      

     
      

        
        
        
      

     function initStats() { var stats = new Stats(); stats.setMode(0); stats.domElement.style.position = 'absolute'; stats.domElement.style.left = '0px'; stats.domElement.style.top = '0px'; $("#Stats-output").append(stats.domElement ); return stats; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

        .    setMode
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ().      0,    FPS,    1,     .      FPS,    0.      jQuery        : 
      

        
        
        
      

     
      

        
        
        
      

     $(function () { var stats = initStats(); … }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           render(): 
      

        
        
        
      

     function render() { stats.update(); ... requestAnimationFrame(render); renderer.render(scene, camera); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           ,       ,     : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

       
      

        
        
        
      

        requestAnimationFrame
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ()           .         render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     () ,         .    : 
      

        
        
        
      

     
      

        
        
        
      

     function render() { ... cube.rotation.x += 0.02; cube.rotation.y += 0.02; cube.rotation.z += 0.02; ... requestAnimationFrame(render); renderer.render(scene, camera); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

       ,   ?     –    rotation
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
        0,02      render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     (),        .  ,    ,     . 
      

        
        
        
      

     
      

        
        
        
      

       
      

        
        
        
      

                 render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ()  : 
      

        
        
        
      

     
      

        
        
        
      

     var step=0; function render() { ... step+=0.04; sphere.position.x = 20+( 10*(Math.cos(step))); sphere.position.y = 2 +( 10*Math.abs(Math.sin(step))); ... requestAnimationFrame(render); renderer.render(scene, camera); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           rotation
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ;        position
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      .  ,             ,    .               .  Math.cos()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      Math.sin()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
              step
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     .          .        ,  step+=0.04
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
         .        : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

         . 
      

        
        
        
      

         ,         .    3D-, ,       ,      .   ,        ,         .  ,  . 
      

        
        
        
      

     
      

        
        
        
      

       dat.GUI     
      

        
        
        
      

        Google     dat.GUI(        ),        .         ,      ,   : 
      

        
        
        
      

             
      

        
        
        
      

           ,    dat.GUI     ,   : 
      

        
        
        
      

     
      

        
        
        
      

     <script type="text/javascript" src="../libs/dat.gui.js"></script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

          –   JavaScript ,    ,    ,   dat.GUI.         JavaScript : 
      

        
        
        
      

     
      

        
        
        
      

     var controls = new function() { this.rotationSpeed = 0.02; this.bouncingSpeed = 0.03; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           : this.rotationSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      this.bouncingSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
          .         dat.GUI      ,   : 
      

        
        
        
      

     
      

        
        
        
      

     var gui = new dat.GUI(); gui.add(controls, 'rotationSpeed',0,0.5); gui.add(controls, 'bouncingSpeed',0,0.5);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

      rotationSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      bouncingSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
          0  0,5. ,      –  ,      render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
           ,  ,         dat.GUI,           .    : 
      

        
        
        
      

     
      

        
        
        
      

     function render() { ... cube.rotation.x += controls.rotationSpeed; cube.rotation.y += controls.rotationSpeed; cube.rotation.z += controls.rotationSpeed; step+=controls.bouncingSpeed; sphere.position.x = 20+( 10*(Math.cos(step))); sphere.position.y = 2 +( 10*Math.abs(Math.sin(step))); ... }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     ,    ,     ,          : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

         . 
      

        
        
        
      

     
      

        
        
        
      

      ASCII  
      

        
        
        
      

               3D-      . Three.js     ,      ,     .      ,         : ASCII .        ,      -ASCII,     .            : 
      

        
        
        
      

     
      

        
        
        
      

     $("#WebGL-output").append(renderer.domElement);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

      : 
      

        
        
        
      

     var effect = new THREE.AsciiEffect( renderer ); effect.setSize(window.innerWidth, window.innerHeight ); $("#WebGL-output").append(effect.domElement);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

               .    renderer.render(scene, camera),    effect.render(scene,camera).       : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

        . 
      

        
        
        
      

      ,      ,     ,       Three.js   . 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

           .         ,     Three.js           . 
      

        
        
        
      

          ,      .        ,     Three.js. 
      

        
        
        
      

        ,   : GitHub

: <script type="text/javascript" src="../libs/stats.js"></script> , <div id="Stats-output"></div> , – , : function initStats() { var stats = new Stats(); stats.setMode(0); stats.domElement.style.position = 'absolute'; stats.domElement.style.left = '0px'; stats.domElement.style.top = '0px'; $("#Stats-output").append(stats.domElement ); return stats; } . setMode (). 0, FPS, 1, . FPS, 0. jQuery : $(function () { var stats = initStats(); … } render(): function render() { stats.update(); ... requestAnimationFrame(render); renderer.render(scene, camera); } , , : requestAnimationFrame () . render () , . : function render() { ... cube.rotation.x += 0.02; cube.rotation.y += 0.02; cube.rotation.z += 0.02; ... requestAnimationFrame(render); renderer.render(scene, camera); } , ? – rotation 0,02 render (), . , , . render () : var step=0; function render() { ... step+=0.04; sphere.position.x = 20+( 10(Math.cos(step))); sphere.position.y = 2 +( 10Math.abs(Math.sin(step))); ... requestAnimationFrame(render); renderer.render(scene, camera); } rotation ; position . , , . . Math.cos() Math.sin() step . . , step+=0.04 . : . , . 3D-, , , . , , . , . dat.GUI Google dat.GUI( ), . , , : , dat.GUI , : <script type="text/javascript" src="../libs/dat.gui.js"></script> – JavaScript , , , dat.GUI. JavaScript : var controls = new function() { this.rotationSpeed = 0.02; this.bouncingSpeed = 0.03; } : this.rotationSpeed this.bouncingSpeed . dat.GUI , : var gui = new dat.GUI(); gui.add(controls, 'rotationSpeed',0,0.5); gui.add(controls, 'bouncingSpeed',0,0.5); rotationSpeed bouncingSpeed 0 0,5. , – , render , , dat.GUI, . : function render() { ... cube.rotation.x += controls.rotationSpeed; cube.rotation.y += controls.rotationSpeed; cube.rotation.z += controls.rotationSpeed; step+=controls.bouncingSpeed; sphere.position.x = 20+( 10(Math.cos(step))); sphere.position.y = 2 +( 10Math.abs(Math.sin(step))); ... } , , , : . ASCII 3D- . Three.js , , . , : ASCII . , -ASCII, . : $("#WebGL-output").append(renderer.domElement); : var effect = new THREE.AsciiEffect( renderer ); effect.setSize(window.innerWidth, window.innerHeight ); $("#WebGL-output").append(effect.domElement); . renderer.render(scene, camera), effect.render(scene,camera). : . , , , Three.js . . , Three.js . , . , Three.js. , : GitHub

   : 
      

        
        
        
      

     
      

        
        
        
      

     <script type="text/javascript" src="../libs/stats.js"></script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           ,         
      

        
        
        
      

     <div id="Stats-output"></div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     ,    –         ,   : 
      

        
        
        
      

     
      

        
        
        
      

     function initStats() { var stats = new Stats(); stats.setMode(0); stats.domElement.style.position = 'absolute'; stats.domElement.style.left = '0px'; stats.domElement.style.top = '0px'; $("#Stats-output").append(stats.domElement ); return stats; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

        .    setMode
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ().      0,    FPS,    1,     .      FPS,    0.      jQuery        : 
      

        
        
        
      

     
      

        
        
        
      

     $(function () { var stats = initStats(); … }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           render(): 
      

        
        
        
      

     function render() { stats.update(); ... requestAnimationFrame(render); renderer.render(scene, camera); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           ,       ,     : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

       
      

        
        
        
      

        requestAnimationFrame
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ()           .         render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     () ,         .    : 
      

        
        
        
      

     
      

        
        
        
      

     function render() { ... cube.rotation.x += 0.02; cube.rotation.y += 0.02; cube.rotation.z += 0.02; ... requestAnimationFrame(render); renderer.render(scene, camera); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

       ,   ?     –    rotation
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
        0,02      render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     (),        .  ,    ,     . 
      

        
        
        
      

     
      

        
        
        
      

       
      

        
        
        
      

                 render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ()  : 
      

        
        
        
      

     
      

        
        
        
      

     var step=0; function render() { ... step+=0.04; sphere.position.x = 20+( 10*(Math.cos(step))); sphere.position.y = 2 +( 10*Math.abs(Math.sin(step))); ... requestAnimationFrame(render); renderer.render(scene, camera); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           rotation
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ;        position
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      .  ,             ,    .               .  Math.cos()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      Math.sin()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
              step
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     .          .        ,  step+=0.04
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
         .        : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

         . 
      

        
        
        
      

         ,         .    3D-, ,       ,      .   ,        ,         .  ,  . 
      

        
        
        
      

     
      

        
        
        
      

       dat.GUI     
      

        
        
        
      

        Google     dat.GUI(        ),        .         ,      ,   : 
      

        
        
        
      

             
      

        
        
        
      

           ,    dat.GUI     ,   : 
      

        
        
        
      

     
      

        
        
        
      

     <script type="text/javascript" src="../libs/dat.gui.js"></script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

          –   JavaScript ,    ,    ,   dat.GUI.         JavaScript : 
      

        
        
        
      

     
      

        
        
        
      

     var controls = new function() { this.rotationSpeed = 0.02; this.bouncingSpeed = 0.03; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           : this.rotationSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      this.bouncingSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
          .         dat.GUI      ,   : 
      

        
        
        
      

     
      

        
        
        
      

     var gui = new dat.GUI(); gui.add(controls, 'rotationSpeed',0,0.5); gui.add(controls, 'bouncingSpeed',0,0.5);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

      rotationSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      bouncingSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
          0  0,5. ,      –  ,      render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
           ,  ,         dat.GUI,           .    : 
      

        
        
        
      

     
      

        
        
        
      

     function render() { ... cube.rotation.x += controls.rotationSpeed; cube.rotation.y += controls.rotationSpeed; cube.rotation.z += controls.rotationSpeed; step+=controls.bouncingSpeed; sphere.position.x = 20+( 10*(Math.cos(step))); sphere.position.y = 2 +( 10*Math.abs(Math.sin(step))); ... }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     ,    ,     ,          : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

         . 
      

        
        
        
      

     
      

        
        
        
      

      ASCII  
      

        
        
        
      

               3D-      . Three.js     ,      ,     .      ,         : ASCII .        ,      -ASCII,     .            : 
      

        
        
        
      

     
      

        
        
        
      

     $("#WebGL-output").append(renderer.domElement);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

      : 
      

        
        
        
      

     var effect = new THREE.AsciiEffect( renderer ); effect.setSize(window.innerWidth, window.innerHeight ); $("#WebGL-output").append(effect.domElement);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

               .    renderer.render(scene, camera),    effect.render(scene,camera).       : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

        . 
      

        
        
        
      

      ,      ,     ,       Three.js   . 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

           .         ,     Three.js           . 
      

        
        
        
      

          ,      .        ,     Three.js. 
      

        
        
        
      

        ,   : GitHub

    : 
      

        
        
        
      

     
      

        
        
        
      

     <script type="text/javascript" src="../libs/stats.js"></script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           ,         
      

        
        
        
      

     <div id="Stats-output"></div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     ,    –         ,   : 
      

        
        
        
      

     
      

        
        
        
      

     function initStats() { var stats = new Stats(); stats.setMode(0); stats.domElement.style.position = 'absolute'; stats.domElement.style.left = '0px'; stats.domElement.style.top = '0px'; $("#Stats-output").append(stats.domElement ); return stats; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

        .    setMode
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ().      0,    FPS,    1,     .      FPS,    0.      jQuery        : 
      

        
        
        
      

     
      

        
        
        
      

     $(function () { var stats = initStats(); … }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           render(): 
      

        
        
        
      

     function render() { stats.update(); ... requestAnimationFrame(render); renderer.render(scene, camera); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           ,       ,     : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

       
      

        
        
        
      

        requestAnimationFrame
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ()           .         render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     () ,         .    : 
      

        
        
        
      

     
      

        
        
        
      

     function render() { ... cube.rotation.x += 0.02; cube.rotation.y += 0.02; cube.rotation.z += 0.02; ... requestAnimationFrame(render); renderer.render(scene, camera); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

       ,   ?     –    rotation
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
        0,02      render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     (),        .  ,    ,     . 
      

        
        
        
      

     
      

        
        
        
      

       
      

        
        
        
      

                 render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ()  : 
      

        
        
        
      

     
      

        
        
        
      

     var step=0; function render() { ... step+=0.04; sphere.position.x = 20+( 10*(Math.cos(step))); sphere.position.y = 2 +( 10*Math.abs(Math.sin(step))); ... requestAnimationFrame(render); renderer.render(scene, camera); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           rotation
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ;        position
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      .  ,             ,    .               .  Math.cos()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      Math.sin()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
              step
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     .          .        ,  step+=0.04
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
         .        : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

         . 
      

        
        
        
      

         ,         .    3D-, ,       ,      .   ,        ,         .  ,  . 
      

        
        
        
      

     
      

        
        
        
      

       dat.GUI     
      

        
        
        
      

        Google     dat.GUI(        ),        .         ,      ,   : 
      

        
        
        
      

             
      

        
        
        
      

           ,    dat.GUI     ,   : 
      

        
        
        
      

     
      

        
        
        
      

     <script type="text/javascript" src="../libs/dat.gui.js"></script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

          –   JavaScript ,    ,    ,   dat.GUI.         JavaScript : 
      

        
        
        
      

     
      

        
        
        
      

     var controls = new function() { this.rotationSpeed = 0.02; this.bouncingSpeed = 0.03; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           : this.rotationSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      this.bouncingSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
          .         dat.GUI      ,   : 
      

        
        
        
      

     
      

        
        
        
      

     var gui = new dat.GUI(); gui.add(controls, 'rotationSpeed',0,0.5); gui.add(controls, 'bouncingSpeed',0,0.5);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

      rotationSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      bouncingSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
          0  0,5. ,      –  ,      render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
           ,  ,         dat.GUI,           .    : 
      

        
        
        
      

     
      

        
        
        
      

     function render() { ... cube.rotation.x += controls.rotationSpeed; cube.rotation.y += controls.rotationSpeed; cube.rotation.z += controls.rotationSpeed; step+=controls.bouncingSpeed; sphere.position.x = 20+( 10*(Math.cos(step))); sphere.position.y = 2 +( 10*Math.abs(Math.sin(step))); ... }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     ,    ,     ,          : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

         . 
      

        
        
        
      

     
      

        
        
        
      

      ASCII  
      

        
        
        
      

               3D-      . Three.js     ,      ,     .      ,         : ASCII .        ,      -ASCII,     .            : 
      

        
        
        
      

     
      

        
        
        
      

     $("#WebGL-output").append(renderer.domElement);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

      : 
      

        
        
        
      

     var effect = new THREE.AsciiEffect( renderer ); effect.setSize(window.innerWidth, window.innerHeight ); $("#WebGL-output").append(effect.domElement);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

               .    renderer.render(scene, camera),    effect.render(scene,camera).       : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

        . 
      

        
        
        
      

      ,      ,     ,       Three.js   . 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

           .         ,     Three.js           . 
      

        
        
        
      

          ,      .        ,     Three.js. 
      

        
        
        
      

        ,   : GitHub

   : 
      

        
        
        
      

     
      

        
        
        
      

     <script type="text/javascript" src="../libs/stats.js"></script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           ,         
      

        
        
        
      

     <div id="Stats-output"></div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     ,    –         ,   : 
      

        
        
        
      

     
      

        
        
        
      

     function initStats() { var stats = new Stats(); stats.setMode(0); stats.domElement.style.position = 'absolute'; stats.domElement.style.left = '0px'; stats.domElement.style.top = '0px'; $("#Stats-output").append(stats.domElement ); return stats; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

        .    setMode
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ().      0,    FPS,    1,     .      FPS,    0.      jQuery        : 
      

        
        
        
      

     
      

        
        
        
      

     $(function () { var stats = initStats(); … }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           render(): 
      

        
        
        
      

     function render() { stats.update(); ... requestAnimationFrame(render); renderer.render(scene, camera); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           ,       ,     : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

       
      

        
        
        
      

        requestAnimationFrame
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ()           .         render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     () ,         .    : 
      

        
        
        
      

     
      

        
        
        
      

     function render() { ... cube.rotation.x += 0.02; cube.rotation.y += 0.02; cube.rotation.z += 0.02; ... requestAnimationFrame(render); renderer.render(scene, camera); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

       ,   ?     –    rotation
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
        0,02      render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     (),        .  ,    ,     . 
      

        
        
        
      

     
      

        
        
        
      

       
      

        
        
        
      

                 render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ()  : 
      

        
        
        
      

     
      

        
        
        
      

     var step=0; function render() { ... step+=0.04; sphere.position.x = 20+( 10*(Math.cos(step))); sphere.position.y = 2 +( 10*Math.abs(Math.sin(step))); ... requestAnimationFrame(render); renderer.render(scene, camera); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           rotation
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ;        position
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      .  ,             ,    .               .  Math.cos()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      Math.sin()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
              step
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     .          .        ,  step+=0.04
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
         .        : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

         . 
      

        
        
        
      

         ,         .    3D-, ,       ,      .   ,        ,         .  ,  . 
      

        
        
        
      

     
      

        
        
        
      

       dat.GUI     
      

        
        
        
      

        Google     dat.GUI(        ),        .         ,      ,   : 
      

        
        
        
      

             
      

        
        
        
      

           ,    dat.GUI     ,   : 
      

        
        
        
      

     
      

        
        
        
      

     <script type="text/javascript" src="../libs/dat.gui.js"></script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

          –   JavaScript ,    ,    ,   dat.GUI.         JavaScript : 
      

        
        
        
      

     
      

        
        
        
      

     var controls = new function() { this.rotationSpeed = 0.02; this.bouncingSpeed = 0.03; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           : this.rotationSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      this.bouncingSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
          .         dat.GUI      ,   : 
      

        
        
        
      

     
      

        
        
        
      

     var gui = new dat.GUI(); gui.add(controls, 'rotationSpeed',0,0.5); gui.add(controls, 'bouncingSpeed',0,0.5);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

      rotationSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      bouncingSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
          0  0,5. ,      –  ,      render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
           ,  ,         dat.GUI,           .    : 
      

        
        
        
      

     
      

        
        
        
      

     function render() { ... cube.rotation.x += controls.rotationSpeed; cube.rotation.y += controls.rotationSpeed; cube.rotation.z += controls.rotationSpeed; step+=controls.bouncingSpeed; sphere.position.x = 20+( 10*(Math.cos(step))); sphere.position.y = 2 +( 10*Math.abs(Math.sin(step))); ... }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     ,    ,     ,          : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

         . 
      

        
        
        
      

     
      

        
        
        
      

      ASCII  
      

        
        
        
      

               3D-      . Three.js     ,      ,     .      ,         : ASCII .        ,      -ASCII,     .            : 
      

        
        
        
      

     
      

        
        
        
      

     $("#WebGL-output").append(renderer.domElement);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

      : 
      

        
        
        
      

     var effect = new THREE.AsciiEffect( renderer ); effect.setSize(window.innerWidth, window.innerHeight ); $("#WebGL-output").append(effect.domElement);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

               .    renderer.render(scene, camera),    effect.render(scene,camera).       : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

        . 
      

        
        
        
      

      ,      ,     ,       Three.js   . 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

           .         ,     Three.js           . 
      

        
        
        
      

          ,      .        ,     Three.js. 
      

        
        
        
      

        ,   : GitHub

: <script type="text/javascript" src="../libs/stats.js"></script> , <div id="Stats-output"></div> , – , : function initStats() { var stats = new Stats(); stats.setMode(0); stats.domElement.style.position = 'absolute'; stats.domElement.style.left = '0px'; stats.domElement.style.top = '0px'; $("#Stats-output").append(stats.domElement ); return stats; } . setMode (). 0, FPS, 1, . FPS, 0. jQuery : $(function () { var stats = initStats(); … } render(): function render() { stats.update(); ... requestAnimationFrame(render); renderer.render(scene, camera); } , , : requestAnimationFrame () . render () , . : function render() { ... cube.rotation.x += 0.02; cube.rotation.y += 0.02; cube.rotation.z += 0.02; ... requestAnimationFrame(render); renderer.render(scene, camera); } , ? – rotation 0,02 render (), . , , . render () : var step=0; function render() { ... step+=0.04; sphere.position.x = 20+( 10(Math.cos(step))); sphere.position.y = 2 +( 10Math.abs(Math.sin(step))); ... requestAnimationFrame(render); renderer.render(scene, camera); } rotation ; position . , , . . Math.cos() Math.sin() step . . , step+=0.04 . : . , . 3D-, , , . , , . , . dat.GUI Google dat.GUI( ), . , , : , dat.GUI , : <script type="text/javascript" src="../libs/dat.gui.js"></script> – JavaScript , , , dat.GUI. JavaScript : var controls = new function() { this.rotationSpeed = 0.02; this.bouncingSpeed = 0.03; } : this.rotationSpeed this.bouncingSpeed . dat.GUI , : var gui = new dat.GUI(); gui.add(controls, 'rotationSpeed',0,0.5); gui.add(controls, 'bouncingSpeed',0,0.5); rotationSpeed bouncingSpeed 0 0,5. , – , render , , dat.GUI, . : function render() { ... cube.rotation.x += controls.rotationSpeed; cube.rotation.y += controls.rotationSpeed; cube.rotation.z += controls.rotationSpeed; step+=controls.bouncingSpeed; sphere.position.x = 20+( 10(Math.cos(step))); sphere.position.y = 2 +( 10Math.abs(Math.sin(step))); ... } , , , : . ASCII 3D- . Three.js , , . , : ASCII . , -ASCII, . : $("#WebGL-output").append(renderer.domElement); : var effect = new THREE.AsciiEffect( renderer ); effect.setSize(window.innerWidth, window.innerHeight ); $("#WebGL-output").append(effect.domElement); . renderer.render(scene, camera), effect.render(scene,camera). : . , , , Three.js . . , Three.js . , . , Three.js. , : GitHub

   : 
      

        
        
        
      

     
      

        
        
        
      

     <script type="text/javascript" src="../libs/stats.js"></script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           ,         
      

        
        
        
      

     <div id="Stats-output"></div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     ,    –         ,   : 
      

        
        
        
      

     
      

        
        
        
      

     function initStats() { var stats = new Stats(); stats.setMode(0); stats.domElement.style.position = 'absolute'; stats.domElement.style.left = '0px'; stats.domElement.style.top = '0px'; $("#Stats-output").append(stats.domElement ); return stats; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

        .    setMode
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ().      0,    FPS,    1,     .      FPS,    0.      jQuery        : 
      

        
        
        
      

     
      

        
        
        
      

     $(function () { var stats = initStats(); … }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           render(): 
      

        
        
        
      

     function render() { stats.update(); ... requestAnimationFrame(render); renderer.render(scene, camera); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           ,       ,     : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

       
      

        
        
        
      

        requestAnimationFrame
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ()           .         render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     () ,         .    : 
      

        
        
        
      

     
      

        
        
        
      

     function render() { ... cube.rotation.x += 0.02; cube.rotation.y += 0.02; cube.rotation.z += 0.02; ... requestAnimationFrame(render); renderer.render(scene, camera); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

       ,   ?     –    rotation
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
        0,02      render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     (),        .  ,    ,     . 
      

        
        
        
      

     
      

        
        
        
      

       
      

        
        
        
      

                 render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ()  : 
      

        
        
        
      

     
      

        
        
        
      

     var step=0; function render() { ... step+=0.04; sphere.position.x = 20+( 10*(Math.cos(step))); sphere.position.y = 2 +( 10*Math.abs(Math.sin(step))); ... requestAnimationFrame(render); renderer.render(scene, camera); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           rotation
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ;        position
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      .  ,             ,    .               .  Math.cos()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      Math.sin()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
              step
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     .          .        ,  step+=0.04
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
         .        : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

         . 
      

        
        
        
      

         ,         .    3D-, ,       ,      .   ,        ,         .  ,  . 
      

        
        
        
      

     
      

        
        
        
      

       dat.GUI     
      

        
        
        
      

        Google     dat.GUI(        ),        .         ,      ,   : 
      

        
        
        
      

             
      

        
        
        
      

           ,    dat.GUI     ,   : 
      

        
        
        
      

     
      

        
        
        
      

     <script type="text/javascript" src="../libs/dat.gui.js"></script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

          –   JavaScript ,    ,    ,   dat.GUI.         JavaScript : 
      

        
        
        
      

     
      

        
        
        
      

     var controls = new function() { this.rotationSpeed = 0.02; this.bouncingSpeed = 0.03; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           : this.rotationSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      this.bouncingSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
          .         dat.GUI      ,   : 
      

        
        
        
      

     
      

        
        
        
      

     var gui = new dat.GUI(); gui.add(controls, 'rotationSpeed',0,0.5); gui.add(controls, 'bouncingSpeed',0,0.5);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

      rotationSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      bouncingSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
          0  0,5. ,      –  ,      render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
           ,  ,         dat.GUI,           .    : 
      

        
        
        
      

     
      

        
        
        
      

     function render() { ... cube.rotation.x += controls.rotationSpeed; cube.rotation.y += controls.rotationSpeed; cube.rotation.z += controls.rotationSpeed; step+=controls.bouncingSpeed; sphere.position.x = 20+( 10*(Math.cos(step))); sphere.position.y = 2 +( 10*Math.abs(Math.sin(step))); ... }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     ,    ,     ,          : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

         . 
      

        
        
        
      

     
      

        
        
        
      

      ASCII  
      

        
        
        
      

               3D-      . Three.js     ,      ,     .      ,         : ASCII .        ,      -ASCII,     .            : 
      

        
        
        
      

     
      

        
        
        
      

     $("#WebGL-output").append(renderer.domElement);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

      : 
      

        
        
        
      

     var effect = new THREE.AsciiEffect( renderer ); effect.setSize(window.innerWidth, window.innerHeight ); $("#WebGL-output").append(effect.domElement);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

               .    renderer.render(scene, camera),    effect.render(scene,camera).       : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

        . 
      

        
        
        
      

      ,      ,     ,       Three.js   . 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

           .         ,     Three.js           . 
      

        
        
        
      

          ,      .        ,     Three.js. 
      

        
        
        
      

        ,   : GitHub

    : 
      

        
        
        
      

     
      

        
        
        
      

     <script type="text/javascript" src="../libs/stats.js"></script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           ,         
      

        
        
        
      

     <div id="Stats-output"></div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     ,    –         ,   : 
      

        
        
        
      

     
      

        
        
        
      

     function initStats() { var stats = new Stats(); stats.setMode(0); stats.domElement.style.position = 'absolute'; stats.domElement.style.left = '0px'; stats.domElement.style.top = '0px'; $("#Stats-output").append(stats.domElement ); return stats; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

        .    setMode
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ().      0,    FPS,    1,     .      FPS,    0.      jQuery        : 
      

        
        
        
      

     
      

        
        
        
      

     $(function () { var stats = initStats(); … }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           render(): 
      

        
        
        
      

     function render() { stats.update(); ... requestAnimationFrame(render); renderer.render(scene, camera); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           ,       ,     : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

       
      

        
        
        
      

        requestAnimationFrame
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ()           .         render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     () ,         .    : 
      

        
        
        
      

     
      

        
        
        
      

     function render() { ... cube.rotation.x += 0.02; cube.rotation.y += 0.02; cube.rotation.z += 0.02; ... requestAnimationFrame(render); renderer.render(scene, camera); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

       ,   ?     –    rotation
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
        0,02      render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     (),        .  ,    ,     . 
      

        
        
        
      

     
      

        
        
        
      

       
      

        
        
        
      

                 render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ()  : 
      

        
        
        
      

     
      

        
        
        
      

     var step=0; function render() { ... step+=0.04; sphere.position.x = 20+( 10*(Math.cos(step))); sphere.position.y = 2 +( 10*Math.abs(Math.sin(step))); ... requestAnimationFrame(render); renderer.render(scene, camera); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           rotation
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ;        position
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      .  ,             ,    .               .  Math.cos()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      Math.sin()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
              step
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     .          .        ,  step+=0.04
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
         .        : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

         . 
      

        
        
        
      

         ,         .    3D-, ,       ,      .   ,        ,         .  ,  . 
      

        
        
        
      

     
      

        
        
        
      

       dat.GUI     
      

        
        
        
      

        Google     dat.GUI(        ),        .         ,      ,   : 
      

        
        
        
      

             
      

        
        
        
      

           ,    dat.GUI     ,   : 
      

        
        
        
      

     
      

        
        
        
      

     <script type="text/javascript" src="../libs/dat.gui.js"></script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

          –   JavaScript ,    ,    ,   dat.GUI.         JavaScript : 
      

        
        
        
      

     
      

        
        
        
      

     var controls = new function() { this.rotationSpeed = 0.02; this.bouncingSpeed = 0.03; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           : this.rotationSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      this.bouncingSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
          .         dat.GUI      ,   : 
      

        
        
        
      

     
      

        
        
        
      

     var gui = new dat.GUI(); gui.add(controls, 'rotationSpeed',0,0.5); gui.add(controls, 'bouncingSpeed',0,0.5);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

      rotationSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      bouncingSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
          0  0,5. ,      –  ,      render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
           ,  ,         dat.GUI,           .    : 
      

        
        
        
      

     
      

        
        
        
      

     function render() { ... cube.rotation.x += controls.rotationSpeed; cube.rotation.y += controls.rotationSpeed; cube.rotation.z += controls.rotationSpeed; step+=controls.bouncingSpeed; sphere.position.x = 20+( 10*(Math.cos(step))); sphere.position.y = 2 +( 10*Math.abs(Math.sin(step))); ... }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     ,    ,     ,          : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

         . 
      

        
        
        
      

     
      

        
        
        
      

      ASCII  
      

        
        
        
      

               3D-      . Three.js     ,      ,     .      ,         : ASCII .        ,      -ASCII,     .            : 
      

        
        
        
      

     
      

        
        
        
      

     $("#WebGL-output").append(renderer.domElement);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

      : 
      

        
        
        
      

     var effect = new THREE.AsciiEffect( renderer ); effect.setSize(window.innerWidth, window.innerHeight ); $("#WebGL-output").append(effect.domElement);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

               .    renderer.render(scene, camera),    effect.render(scene,camera).       : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

        . 
      

        
        
        
      

      ,      ,     ,       Three.js   . 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

           .         ,     Three.js           . 
      

        
        
        
      

          ,      .        ,     Three.js. 
      

        
        
        
      

        ,   : GitHub

   : 
      

        
        
        
      

     
      

        
        
        
      

     <script type="text/javascript" src="../libs/stats.js"></script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           ,         
      

        
        
        
      

     <div id="Stats-output"></div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     ,    –         ,   : 
      

        
        
        
      

     
      

        
        
        
      

     function initStats() { var stats = new Stats(); stats.setMode(0); stats.domElement.style.position = 'absolute'; stats.domElement.style.left = '0px'; stats.domElement.style.top = '0px'; $("#Stats-output").append(stats.domElement ); return stats; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

        .    setMode
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ().      0,    FPS,    1,     .      FPS,    0.      jQuery        : 
      

        
        
        
      

     
      

        
        
        
      

     $(function () { var stats = initStats(); … }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           render(): 
      

        
        
        
      

     function render() { stats.update(); ... requestAnimationFrame(render); renderer.render(scene, camera); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           ,       ,     : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

       
      

        
        
        
      

        requestAnimationFrame
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ()           .         render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     () ,         .    : 
      

        
        
        
      

     
      

        
        
        
      

     function render() { ... cube.rotation.x += 0.02; cube.rotation.y += 0.02; cube.rotation.z += 0.02; ... requestAnimationFrame(render); renderer.render(scene, camera); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

       ,   ?     –    rotation
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
        0,02      render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     (),        .  ,    ,     . 
      

        
        
        
      

     
      

        
        
        
      

       
      

        
        
        
      

                 render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ()  : 
      

        
        
        
      

     
      

        
        
        
      

     var step=0; function render() { ... step+=0.04; sphere.position.x = 20+( 10*(Math.cos(step))); sphere.position.y = 2 +( 10*Math.abs(Math.sin(step))); ... requestAnimationFrame(render); renderer.render(scene, camera); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           rotation
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ;        position
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      .  ,             ,    .               .  Math.cos()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      Math.sin()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
              step
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     .          .        ,  step+=0.04
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
         .        : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

         . 
      

        
        
        
      

         ,         .    3D-, ,       ,      .   ,        ,         .  ,  . 
      

        
        
        
      

     
      

        
        
        
      

       dat.GUI     
      

        
        
        
      

        Google     dat.GUI(        ),        .         ,      ,   : 
      

        
        
        
      

             
      

        
        
        
      

           ,    dat.GUI     ,   : 
      

        
        
        
      

     
      

        
        
        
      

     <script type="text/javascript" src="../libs/dat.gui.js"></script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

          –   JavaScript ,    ,    ,   dat.GUI.         JavaScript : 
      

        
        
        
      

     
      

        
        
        
      

     var controls = new function() { this.rotationSpeed = 0.02; this.bouncingSpeed = 0.03; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           : this.rotationSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      this.bouncingSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
          .         dat.GUI      ,   : 
      

        
        
        
      

     
      

        
        
        
      

     var gui = new dat.GUI(); gui.add(controls, 'rotationSpeed',0,0.5); gui.add(controls, 'bouncingSpeed',0,0.5);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

      rotationSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      bouncingSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
          0  0,5. ,      –  ,      render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
           ,  ,         dat.GUI,           .    : 
      

        
        
        
      

     
      

        
        
        
      

     function render() { ... cube.rotation.x += controls.rotationSpeed; cube.rotation.y += controls.rotationSpeed; cube.rotation.z += controls.rotationSpeed; step+=controls.bouncingSpeed; sphere.position.x = 20+( 10*(Math.cos(step))); sphere.position.y = 2 +( 10*Math.abs(Math.sin(step))); ... }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     ,    ,     ,          : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

         . 
      

        
        
        
      

     
      

        
        
        
      

      ASCII  
      

        
        
        
      

               3D-      . Three.js     ,      ,     .      ,         : ASCII .        ,      -ASCII,     .            : 
      

        
        
        
      

     
      

        
        
        
      

     $("#WebGL-output").append(renderer.domElement);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

      : 
      

        
        
        
      

     var effect = new THREE.AsciiEffect( renderer ); effect.setSize(window.innerWidth, window.innerHeight ); $("#WebGL-output").append(effect.domElement);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

               .    renderer.render(scene, camera),    effect.render(scene,camera).       : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

        . 
      

        
        
        
      

      ,      ,     ,       Three.js   . 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

           .         ,     Three.js           . 
      

        
        
        
      

          ,      .        ,     Three.js. 
      

        
        
        
      

        ,   : GitHub

: <script type="text/javascript" src="../libs/stats.js"></script> , <div id="Stats-output"></div> , – , : function initStats() { var stats = new Stats(); stats.setMode(0); stats.domElement.style.position = 'absolute'; stats.domElement.style.left = '0px'; stats.domElement.style.top = '0px'; $("#Stats-output").append(stats.domElement ); return stats; } . setMode (). 0, FPS, 1, . FPS, 0. jQuery : $(function () { var stats = initStats(); … } render(): function render() { stats.update(); ... requestAnimationFrame(render); renderer.render(scene, camera); } , , : requestAnimationFrame () . render () , . : function render() { ... cube.rotation.x += 0.02; cube.rotation.y += 0.02; cube.rotation.z += 0.02; ... requestAnimationFrame(render); renderer.render(scene, camera); } , ? – rotation 0,02 render (), . , , . render () : var step=0; function render() { ... step+=0.04; sphere.position.x = 20+( 10(Math.cos(step))); sphere.position.y = 2 +( 10Math.abs(Math.sin(step))); ... requestAnimationFrame(render); renderer.render(scene, camera); } rotation ; position . , , . . Math.cos() Math.sin() step . . , step+=0.04 . : . , . 3D-, , , . , , . , . dat.GUI Google dat.GUI( ), . , , : , dat.GUI , : <script type="text/javascript" src="../libs/dat.gui.js"></script> – JavaScript , , , dat.GUI. JavaScript : var controls = new function() { this.rotationSpeed = 0.02; this.bouncingSpeed = 0.03; } : this.rotationSpeed this.bouncingSpeed . dat.GUI , : var gui = new dat.GUI(); gui.add(controls, 'rotationSpeed',0,0.5); gui.add(controls, 'bouncingSpeed',0,0.5); rotationSpeed bouncingSpeed 0 0,5. , – , render , , dat.GUI, . : function render() { ... cube.rotation.x += controls.rotationSpeed; cube.rotation.y += controls.rotationSpeed; cube.rotation.z += controls.rotationSpeed; step+=controls.bouncingSpeed; sphere.position.x = 20+( 10(Math.cos(step))); sphere.position.y = 2 +( 10Math.abs(Math.sin(step))); ... } , , , : . ASCII 3D- . Three.js , , . , : ASCII . , -ASCII, . : $("#WebGL-output").append(renderer.domElement); : var effect = new THREE.AsciiEffect( renderer ); effect.setSize(window.innerWidth, window.innerHeight ); $("#WebGL-output").append(effect.domElement); . renderer.render(scene, camera), effect.render(scene,camera). : . , , , Three.js . . , Three.js . , . , Three.js. , : GitHub

   : 
      

        
        
        
      

     
      

        
        
        
      

     <script type="text/javascript" src="../libs/stats.js"></script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           ,         
      

        
        
        
      

     <div id="Stats-output"></div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     ,    –         ,   : 
      

        
        
        
      

     
      

        
        
        
      

     function initStats() { var stats = new Stats(); stats.setMode(0); stats.domElement.style.position = 'absolute'; stats.domElement.style.left = '0px'; stats.domElement.style.top = '0px'; $("#Stats-output").append(stats.domElement ); return stats; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

        .    setMode
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ().      0,    FPS,    1,     .      FPS,    0.      jQuery        : 
      

        
        
        
      

     
      

        
        
        
      

     $(function () { var stats = initStats(); … }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           render(): 
      

        
        
        
      

     function render() { stats.update(); ... requestAnimationFrame(render); renderer.render(scene, camera); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           ,       ,     : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

       
      

        
        
        
      

        requestAnimationFrame
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ()           .         render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     () ,         .    : 
      

        
        
        
      

     
      

        
        
        
      

     function render() { ... cube.rotation.x += 0.02; cube.rotation.y += 0.02; cube.rotation.z += 0.02; ... requestAnimationFrame(render); renderer.render(scene, camera); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

       ,   ?     –    rotation
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
        0,02      render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     (),        .  ,    ,     . 
      

        
        
        
      

     
      

        
        
        
      

       
      

        
        
        
      

                 render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ()  : 
      

        
        
        
      

     
      

        
        
        
      

     var step=0; function render() { ... step+=0.04; sphere.position.x = 20+( 10*(Math.cos(step))); sphere.position.y = 2 +( 10*Math.abs(Math.sin(step))); ... requestAnimationFrame(render); renderer.render(scene, camera); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           rotation
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ;        position
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      .  ,             ,    .               .  Math.cos()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      Math.sin()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
              step
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     .          .        ,  step+=0.04
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
         .        : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

         . 
      

        
        
        
      

         ,         .    3D-, ,       ,      .   ,        ,         .  ,  . 
      

        
        
        
      

     
      

        
        
        
      

       dat.GUI     
      

        
        
        
      

        Google     dat.GUI(        ),        .         ,      ,   : 
      

        
        
        
      

             
      

        
        
        
      

           ,    dat.GUI     ,   : 
      

        
        
        
      

     
      

        
        
        
      

     <script type="text/javascript" src="../libs/dat.gui.js"></script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

          –   JavaScript ,    ,    ,   dat.GUI.         JavaScript : 
      

        
        
        
      

     
      

        
        
        
      

     var controls = new function() { this.rotationSpeed = 0.02; this.bouncingSpeed = 0.03; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           : this.rotationSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      this.bouncingSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
          .         dat.GUI      ,   : 
      

        
        
        
      

     
      

        
        
        
      

     var gui = new dat.GUI(); gui.add(controls, 'rotationSpeed',0,0.5); gui.add(controls, 'bouncingSpeed',0,0.5);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

      rotationSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      bouncingSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
          0  0,5. ,      –  ,      render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
           ,  ,         dat.GUI,           .    : 
      

        
        
        
      

     
      

        
        
        
      

     function render() { ... cube.rotation.x += controls.rotationSpeed; cube.rotation.y += controls.rotationSpeed; cube.rotation.z += controls.rotationSpeed; step+=controls.bouncingSpeed; sphere.position.x = 20+( 10*(Math.cos(step))); sphere.position.y = 2 +( 10*Math.abs(Math.sin(step))); ... }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     ,    ,     ,          : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

         . 
      

        
        
        
      

     
      

        
        
        
      

      ASCII  
      

        
        
        
      

               3D-      . Three.js     ,      ,     .      ,         : ASCII .        ,      -ASCII,     .            : 
      

        
        
        
      

     
      

        
        
        
      

     $("#WebGL-output").append(renderer.domElement);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

      : 
      

        
        
        
      

     var effect = new THREE.AsciiEffect( renderer ); effect.setSize(window.innerWidth, window.innerHeight ); $("#WebGL-output").append(effect.domElement);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

               .    renderer.render(scene, camera),    effect.render(scene,camera).       : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

        . 
      

        
        
        
      

      ,      ,     ,       Three.js   . 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

           .         ,     Three.js           . 
      

        
        
        
      

          ,      .        ,     Three.js. 
      

        
        
        
      

        ,   : GitHub

: <script type="text/javascript" src="../libs/stats.js"></script> , <div id="Stats-output"></div> , – , : function initStats() { var stats = new Stats(); stats.setMode(0); stats.domElement.style.position = 'absolute'; stats.domElement.style.left = '0px'; stats.domElement.style.top = '0px'; $("#Stats-output").append(stats.domElement ); return stats; } . setMode (). 0, FPS, 1, . FPS, 0. jQuery : $(function () { var stats = initStats(); … } render(): function render() { stats.update(); ... requestAnimationFrame(render); renderer.render(scene, camera); } , , : requestAnimationFrame () . render () , . : function render() { ... cube.rotation.x += 0.02; cube.rotation.y += 0.02; cube.rotation.z += 0.02; ... requestAnimationFrame(render); renderer.render(scene, camera); } , ? – rotation 0,02 render (), . , , . render () : var step=0; function render() { ... step+=0.04; sphere.position.x = 20+( 10*(Math.cos(step))); sphere.position.y = 2 +( 10*Math.abs(Math.sin(step))); ... requestAnimationFrame(render); renderer.render(scene, camera); } rotation ; position . , , . . Math.cos() Math.sin() step . . , step+=0.04 . : . , . 3D-, , , . , , . , . dat.GUI Google dat.GUI( ), . , , : , dat.GUI , : <script type="text/javascript" src="../libs/dat.gui.js"></script> – JavaScript , , , dat.GUI. JavaScript : var controls = new function() { this.rotationSpeed = 0.02; this.bouncingSpeed = 0.03; } : this.rotationSpeed this.bouncingSpeed . dat.GUI , : var gui = new dat.GUI(); gui.add(controls, 'rotationSpeed',0,0.5); gui.add(controls, 'bouncingSpeed',0,0.5); rotationSpeed bouncingSpeed 0 0,5. , – , render , , dat.GUI, . : function render() { ... cube.rotation.x += controls.rotationSpeed; cube.rotation.y += controls.rotationSpeed; cube.rotation.z += controls.rotationSpeed; step+=controls.bouncingSpeed; sphere.position.x = 20+( 10*(Math.cos(step))); sphere.position.y = 2 +( 10*Math.abs(Math.sin(step))); ... } , , , : . ASCII 3D- . Three.js , , . , : ASCII . , -ASCII, . : $("#WebGL-output").append(renderer.domElement); : var effect = new THREE.AsciiEffect( renderer ); effect.setSize(window.innerWidth, window.innerHeight ); $("#WebGL-output").append(effect.domElement); . renderer.render(scene, camera), effect.render(scene,camera). : . , , , Three.js . . , Three.js . , . , Three.js. , : GitHub
: <script type="text/javascript" src="../libs/stats.js"></script> , <div id="Stats-output"></div> , – , : function initStats() { var stats = new Stats(); stats.setMode(0); stats.domElement.style.position = 'absolute'; stats.domElement.style.left = '0px'; stats.domElement.style.top = '0px'; $("#Stats-output").append(stats.domElement ); return stats; } . setMode (). 0, FPS, 1, . FPS, 0. jQuery : $(function () { var stats = initStats(); … } render(): function render() { stats.update(); ... requestAnimationFrame(render); renderer.render(scene, camera); } , , : requestAnimationFrame () . render () , . : function render() { ... cube.rotation.x += 0.02; cube.rotation.y += 0.02; cube.rotation.z += 0.02; ... requestAnimationFrame(render); renderer.render(scene, camera); } , ? – rotation 0,02 render (), . , , . render () : var step=0; function render() { ... step+=0.04; sphere.position.x = 20+( 10*(Math.cos(step))); sphere.position.y = 2 +( 10*Math.abs(Math.sin(step))); ... requestAnimationFrame(render); renderer.render(scene, camera); } rotation ; position . , , . . Math.cos() Math.sin() step . . , step+=0.04 . : . , . 3D-, , , . , , . , . dat.GUI Google dat.GUI( ), . , , : , dat.GUI , : <script type="text/javascript" src="../libs/dat.gui.js"></script> – JavaScript , , , dat.GUI. JavaScript : var controls = new function() { this.rotationSpeed = 0.02; this.bouncingSpeed = 0.03; } : this.rotationSpeed this.bouncingSpeed . dat.GUI , : var gui = new dat.GUI(); gui.add(controls, 'rotationSpeed',0,0.5); gui.add(controls, 'bouncingSpeed',0,0.5); rotationSpeed bouncingSpeed 0 0,5. , – , render , , dat.GUI, . : function render() { ... cube.rotation.x += controls.rotationSpeed; cube.rotation.y += controls.rotationSpeed; cube.rotation.z += controls.rotationSpeed; step+=controls.bouncingSpeed; sphere.position.x = 20+( 10*(Math.cos(step))); sphere.position.y = 2 +( 10*Math.abs(Math.sin(step))); ... } , , , : . ASCII 3D- . Three.js , , . , : ASCII . , -ASCII, . : $("#WebGL-output").append(renderer.domElement); : var effect = new THREE.AsciiEffect( renderer ); effect.setSize(window.innerWidth, window.innerHeight ); $("#WebGL-output").append(effect.domElement); . renderer.render(scene, camera), effect.render(scene,camera). : . , , , Three.js . . , Three.js . , . , Three.js. , : GitHub

   : 
      

        
        
        
      

     
      

        
        
        
      

     <script type="text/javascript" src="../libs/stats.js"></script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           ,         
      

        
        
        
      

     <div id="Stats-output"></div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     ,    –         ,   : 
      

        
        
        
      

     
      

        
        
        
      

     function initStats() { var stats = new Stats(); stats.setMode(0); stats.domElement.style.position = 'absolute'; stats.domElement.style.left = '0px'; stats.domElement.style.top = '0px'; $("#Stats-output").append(stats.domElement ); return stats; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

        .    setMode
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ().      0,    FPS,    1,     .      FPS,    0.      jQuery        : 
      

        
        
        
      

     
      

        
        
        
      

     $(function () { var stats = initStats(); … }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           render(): 
      

        
        
        
      

     function render() { stats.update(); ... requestAnimationFrame(render); renderer.render(scene, camera); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           ,       ,     : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

       
      

        
        
        
      

        requestAnimationFrame
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ()           .         render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     () ,         .    : 
      

        
        
        
      

     
      

        
        
        
      

     function render() { ... cube.rotation.x += 0.02; cube.rotation.y += 0.02; cube.rotation.z += 0.02; ... requestAnimationFrame(render); renderer.render(scene, camera); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

       ,   ?     –    rotation
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
        0,02      render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     (),        .  ,    ,     . 
      

        
        
        
      

     
      

        
        
        
      

       
      

        
        
        
      

                 render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ()  : 
      

        
        
        
      

     
      

        
        
        
      

     var step=0; function render() { ... step+=0.04; sphere.position.x = 20+( 10*(Math.cos(step))); sphere.position.y = 2 +( 10*Math.abs(Math.sin(step))); ... requestAnimationFrame(render); renderer.render(scene, camera); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           rotation
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ;        position
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      .  ,             ,    .               .  Math.cos()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      Math.sin()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
              step
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     .          .        ,  step+=0.04
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
         .        : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

         . 
      

        
        
        
      

         ,         .    3D-, ,       ,      .   ,        ,         .  ,  . 
      

        
        
        
      

     
      

        
        
        
      

       dat.GUI     
      

        
        
        
      

        Google     dat.GUI(        ),        .         ,      ,   : 
      

        
        
        
      

             
      

        
        
        
      

           ,    dat.GUI     ,   : 
      

        
        
        
      

     
      

        
        
        
      

     <script type="text/javascript" src="../libs/dat.gui.js"></script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

          –   JavaScript ,    ,    ,   dat.GUI.         JavaScript : 
      

        
        
        
      

     
      

        
        
        
      

     var controls = new function() { this.rotationSpeed = 0.02; this.bouncingSpeed = 0.03; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           : this.rotationSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      this.bouncingSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
          .         dat.GUI      ,   : 
      

        
        
        
      

     
      

        
        
        
      

     var gui = new dat.GUI(); gui.add(controls, 'rotationSpeed',0,0.5); gui.add(controls, 'bouncingSpeed',0,0.5);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

      rotationSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      bouncingSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
          0  0,5. ,      –  ,      render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
           ,  ,         dat.GUI,           .    : 
      

        
        
        
      

     
      

        
        
        
      

     function render() { ... cube.rotation.x += controls.rotationSpeed; cube.rotation.y += controls.rotationSpeed; cube.rotation.z += controls.rotationSpeed; step+=controls.bouncingSpeed; sphere.position.x = 20+( 10*(Math.cos(step))); sphere.position.y = 2 +( 10*Math.abs(Math.sin(step))); ... }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     ,    ,     ,          : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

         . 
      

        
        
        
      

     
      

        
        
        
      

      ASCII  
      

        
        
        
      

               3D-      . Three.js     ,      ,     .      ,         : ASCII .        ,      -ASCII,     .            : 
      

        
        
        
      

     
      

        
        
        
      

     $("#WebGL-output").append(renderer.domElement);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

      : 
      

        
        
        
      

     var effect = new THREE.AsciiEffect( renderer ); effect.setSize(window.innerWidth, window.innerHeight ); $("#WebGL-output").append(effect.domElement);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

               .    renderer.render(scene, camera),    effect.render(scene,camera).       : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

        . 
      

        
        
        
      

      ,      ,     ,       Three.js   . 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

           .         ,     Three.js           . 
      

        
        
        
      

          ,      .        ,     Three.js. 
      

        
        
        
      

        ,   : GitHub

    : 
      

        
        
        
      

     
      

        
        
        
      

     <script type="text/javascript" src="../libs/stats.js"></script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           ,         
      

        
        
        
      

     <div id="Stats-output"></div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     ,    –         ,   : 
      

        
        
        
      

     
      

        
        
        
      

     function initStats() { var stats = new Stats(); stats.setMode(0); stats.domElement.style.position = 'absolute'; stats.domElement.style.left = '0px'; stats.domElement.style.top = '0px'; $("#Stats-output").append(stats.domElement ); return stats; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

        .    setMode
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ().      0,    FPS,    1,     .      FPS,    0.      jQuery        : 
      

        
        
        
      

     
      

        
        
        
      

     $(function () { var stats = initStats(); … }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           render(): 
      

        
        
        
      

     function render() { stats.update(); ... requestAnimationFrame(render); renderer.render(scene, camera); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           ,       ,     : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

       
      

        
        
        
      

        requestAnimationFrame
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ()           .         render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     () ,         .    : 
      

        
        
        
      

     
      

        
        
        
      

     function render() { ... cube.rotation.x += 0.02; cube.rotation.y += 0.02; cube.rotation.z += 0.02; ... requestAnimationFrame(render); renderer.render(scene, camera); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

       ,   ?     –    rotation
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
        0,02      render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     (),        .  ,    ,     . 
      

        
        
        
      

     
      

        
        
        
      

       
      

        
        
        
      

                 render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ()  : 
      

        
        
        
      

     
      

        
        
        
      

     var step=0; function render() { ... step+=0.04; sphere.position.x = 20+( 10*(Math.cos(step))); sphere.position.y = 2 +( 10*Math.abs(Math.sin(step))); ... requestAnimationFrame(render); renderer.render(scene, camera); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           rotation
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ;        position
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      .  ,             ,    .               .  Math.cos()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      Math.sin()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
              step
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     .          .        ,  step+=0.04
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
         .        : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

         . 
      

        
        
        
      

         ,         .    3D-, ,       ,      .   ,        ,         .  ,  . 
      

        
        
        
      

     
      

        
        
        
      

       dat.GUI     
      

        
        
        
      

        Google     dat.GUI(        ),        .         ,      ,   : 
      

        
        
        
      

             
      

        
        
        
      

           ,    dat.GUI     ,   : 
      

        
        
        
      

     
      

        
        
        
      

     <script type="text/javascript" src="../libs/dat.gui.js"></script> 
      

        
        
        
      

          –   JavaScript ,    ,    ,   dat.GUI.         JavaScript : 
      

        
        
        
      

     
      

        
        
        
      

     var controls = new function() { this.rotationSpeed = 0.02; this.bouncingSpeed = 0.03; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           : this.rotationSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      this.bouncingSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
          .         dat.GUI      ,   : 
      

        
        
        
      

     
      

        
        
        
      

     var gui = new dat.GUI(); gui.add(controls, 'rotationSpeed',0,0.5); gui.add(controls, 'bouncingSpeed',0,0.5);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

      rotationSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      bouncingSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
          0  0,5. ,      –  ,      render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
           ,  ,         dat.GUI,           .    : 
      

        
        
        
      

     
      

        
        
        
      

     function render() { ... cube.rotation.x += controls.rotationSpeed; cube.rotation.y += controls.rotationSpeed; cube.rotation.z += controls.rotationSpeed; step+=controls.bouncingSpeed; sphere.position.x = 20+( 10*(Math.cos(step))); sphere.position.y = 2 +( 10*Math.abs(Math.sin(step))); ... }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     ,    ,     ,          : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

         . 
      

        
        
        
      

     
      

        
        
        
      

      ASCII  
      

        
        
        
      

               3D-      . Three.js     ,      ,     .      ,         : ASCII .        ,      -ASCII,     .            : 
      

        
        
        
      

     
      

        
        
        
      

     $("#WebGL-output").append(renderer.domElement);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

      : 
      

        
        
        
      

     var effect = new THREE.AsciiEffect( renderer ); effect.setSize(window.innerWidth, window.innerHeight ); $("#WebGL-output").append(effect.domElement);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

               .    renderer.render(scene, camera),    effect.render(scene,camera).       : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

        . 
      

        
        
        
      

      ,      ,     ,       Three.js   . 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

           .         ,     Three.js           . 
      

        
        
        
      

          ,      .        ,     Three.js. 
      

        
        
        
      

        ,   : GitHub

   : 
      

        
        
        
      

     
      

        
        
        
      

     <script type="text/javascript" src="../libs/stats.js"></script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           ,         
      

        
        
        
      

     <div id="Stats-output"></div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     ,    –         ,   : 
      

        
        
        
      

     
      

        
        
        
      

     function initStats() { var stats = new Stats(); stats.setMode(0); stats.domElement.style.position = 'absolute'; stats.domElement.style.left = '0px'; stats.domElement.style.top = '0px'; $("#Stats-output").append(stats.domElement ); return stats; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

        .    setMode
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ().      0,    FPS,    1,     .      FPS,    0.      jQuery        : 
      

        
        
        
      

     
      

        
        
        
      

     $(function () { var stats = initStats(); … }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           render(): 
      

        
        
        
      

     function render() { stats.update(); ... requestAnimationFrame(render); renderer.render(scene, camera); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           ,       ,     : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

       
      

        
        
        
      

        requestAnimationFrame
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ()           .         render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     () ,         .    : 
      

        
        
        
      

     
      

        
        
        
      

     function render() { ... cube.rotation.x += 0.02; cube.rotation.y += 0.02; cube.rotation.z += 0.02; ... requestAnimationFrame(render); renderer.render(scene, camera); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

       ,   ?     –    rotation
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
        0,02      render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     (),        .  ,    ,     . 
      

        
        
        
      

     
      

        
        
        
      

       
      

        
        
        
      

                 render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ()  : 
      

        
        
        
      

     
      

        
        
        
      

     var step=0; function render() { ... step+=0.04; sphere.position.x = 20+( 10*(Math.cos(step))); sphere.position.y = 2 +( 10*Math.abs(Math.sin(step))); ... requestAnimationFrame(render); renderer.render(scene, camera); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           rotation
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ;        position
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      .  ,             ,    .               .  Math.cos()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      Math.sin()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
              step
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     .          .        ,  step+=0.04
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
         .        : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

         . 
      

        
        
        
      

         ,         .    3D-, ,       ,      .   ,        ,         .  ,  . 
      

        
        
        
      

     
      

        
        
        
      

       dat.GUI     
      

        
        
        
      

        Google     dat.GUI(        ),        .         ,      ,   : 
      

        
        
        
      

             
      

        
        
        
      

           ,    dat.GUI     ,   : 
      

        
        
        
      

     
      

        
        
        
      

     <script type="text/javascript" src="../libs/dat.gui.js"></script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

          –   JavaScript ,    ,    ,   dat.GUI.         JavaScript : 
      

        
        
        
      

     
      

        
        
        
      

     var controls = new function() { this.rotationSpeed = 0.02; this.bouncingSpeed = 0.03; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           : this.rotationSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      this.bouncingSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
          .         dat.GUI      ,   : 
      

        
        
        
      

     
      

        
        
        
      

     var gui = new dat.GUI(); gui.add(controls, 'rotationSpeed',0,0.5); gui.add(controls, 'bouncingSpeed',0,0.5);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

      rotationSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      bouncingSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
          0  0,5. ,      –  ,      render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
           ,  ,         dat.GUI,           .    : 
      

        
        
        
      

     
      

        
        
        
      

     function render() { ... cube.rotation.x += controls.rotationSpeed; cube.rotation.y += controls.rotationSpeed; cube.rotation.z += controls.rotationSpeed; step+=controls.bouncingSpeed; sphere.position.x = 20+( 10*(Math.cos(step))); sphere.position.y = 2 +( 10*Math.abs(Math.sin(step))); ... }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     ,    ,     ,          : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

         . 
      

        
        
        
      

     
      

        
        
        
      

      ASCII  
      

        
        
        
      

               3D-      . Three.js     ,      ,     .      ,         : ASCII .        ,      -ASCII,     .            : 
      

        
        
        
      

     
      

        
        
        
      

     $("#WebGL-output").append(renderer.domElement);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

      : 
      

        
        
        
      

     var effect = new THREE.AsciiEffect( renderer ); effect.setSize(window.innerWidth, window.innerHeight ); $("#WebGL-output").append(effect.domElement);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

               .    renderer.render(scene, camera),    effect.render(scene,camera).       : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

        . 
      

        
        
        
      

      ,      ,     ,       Three.js   . 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

           .         ,     Three.js           . 
      

        
        
        
      

          ,      .        ,     Three.js. 
      

        
        
        
      

        ,   : GitHub

    : 
      

        
        
        
      

     
      

        
        
        
      

     <script type="text/javascript" src="../libs/stats.js"></script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           ,         
      

        
        
        
      

     <div id="Stats-output"></div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     ,    –         ,   : 
      

        
        
        
      

     
      

        
        
        
      

     function initStats() { var stats = new Stats(); stats.setMode(0); stats.domElement.style.position = 'absolute'; stats.domElement.style.left = '0px'; stats.domElement.style.top = '0px'; $("#Stats-output").append(stats.domElement ); return stats; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

        .    setMode
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ().      0,    FPS,    1,     .      FPS,    0.      jQuery        : 
      

        
        
        
      

     
      

        
        
        
      

     $(function () { var stats = initStats(); … }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           render(): 
      

        
        
        
      

     function render() { stats.update(); ... requestAnimationFrame(render); renderer.render(scene, camera); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           ,       ,     : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

       
      

        
        
        
      

        requestAnimationFrame
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ()           .         render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     () ,         .    : 
      

        
        
        
      

     
      

        
        
        
      

     function render() { ... cube.rotation.x += 0.02; cube.rotation.y += 0.02; cube.rotation.z += 0.02; ... requestAnimationFrame(render); renderer.render(scene, camera); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

       ,   ?     –    rotation
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
        0,02      render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     (),        .  ,    ,     . 
      

        
        
        
      

     
      

        
        
        
      

       
      

        
        
        
      

                 render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ()  : 
      

        
        
        
      

     
      

        
        
        
      

     var step=0; function render() { ... step+=0.04; sphere.position.x = 20+( 10*(Math.cos(step))); sphere.position.y = 2 +( 10*Math.abs(Math.sin(step))); ... requestAnimationFrame(render); renderer.render(scene, camera); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           rotation
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ;        position
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      .  ,             ,    .               .  Math.cos()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      Math.sin()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
              step
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     .          .        ,  step+=0.04
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
         .        : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

         . 
      

        
        
        
      

         ,         .    3D-, ,       ,      .   ,        ,         .  ,  . 
      

        
        
        
      

     
      

        
        
        
      

       dat.GUI     
      

        
        
        
      

        Google     dat.GUI(        ),        .         ,      ,   : 
      

        
        
        
      

             
      

        
        
        
      

           ,    dat.GUI     ,   : 
      

        
        
        
      

     
      

        
        
        
      

     <script type="text/javascript" src="../libs/dat.gui.js"></script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

          –   JavaScript ,    ,    ,   dat.GUI.         JavaScript : 
      

        
        
        
      

     
      

        
        
        
      

     var controls = new function() { this.rotationSpeed = 0.02; this.bouncingSpeed = 0.03; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           : this.rotationSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      this.bouncingSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
          .         dat.GUI      ,   : 
      

        
        
        
      

     
      

        
        
        
      

     var gui = new dat.GUI(); gui.add(controls, 'rotationSpeed',0,0.5); gui.add(controls, 'bouncingSpeed',0,0.5);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

      rotationSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      bouncingSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
          0  0,5. ,      –  ,      render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
           ,  ,         dat.GUI,           .    : 
      

        
        
        
      

     
      

        
        
        
      

     function render() { ... cube.rotation.x += controls.rotationSpeed; cube.rotation.y += controls.rotationSpeed; cube.rotation.z += controls.rotationSpeed; step+=controls.bouncingSpeed; sphere.position.x = 20+( 10*(Math.cos(step))); sphere.position.y = 2 +( 10*Math.abs(Math.sin(step))); ... }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     ,    ,     ,          : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

         . 
      

        
        
        
      

     
      

        
        
        
      

      ASCII  
      

        
        
        
      

               3D-      . Three.js     ,      ,     .      ,         : ASCII .        ,      -ASCII,     .            : 
      

        
        
        
      

     
      

        
        
        
      

     $("#WebGL-output").append(renderer.domElement);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

      : 
      

        
        
        
      

     var effect = new THREE.AsciiEffect( renderer ); effect.setSize(window.innerWidth, window.innerHeight ); $("#WebGL-output").append(effect.domElement);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

               .    renderer.render(scene, camera),    effect.render(scene,camera).       : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

        . 
      

        
        
        
      

      ,      ,     ,       Three.js   . 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

           .         ,     Three.js           . 
      

        
        
        
      

          ,      .        ,     Three.js. 
      

        
        
        
      

        ,   : GitHub

   : 
      

        
        
        
      

     
      

        
        
        
      

     <script type="text/javascript" src="../libs/stats.js"></script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           ,         
      

        
        
        
      

     <div id="Stats-output"></div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     ,    –         ,   : 
      

        
        
        
      

     
      

        
        
        
      

     function initStats() { var stats = new Stats(); stats.setMode(0); stats.domElement.style.position = 'absolute'; stats.domElement.style.left = '0px'; stats.domElement.style.top = '0px'; $("#Stats-output").append(stats.domElement ); return stats; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

        .    setMode
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ().      0,    FPS,    1,     .      FPS,    0.      jQuery        : 
      

        
        
        
      

     
      

        
        
        
      

     $(function () { var stats = initStats(); … }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           render(): 
      

        
        
        
      

     function render() { stats.update(); ... requestAnimationFrame(render); renderer.render(scene, camera); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           ,       ,     : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

       
      

        
        
        
      

        requestAnimationFrame
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ()           .         render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     () ,         .    : 
      

        
        
        
      

     
      

        
        
        
      

     function render() { ... cube.rotation.x += 0.02; cube.rotation.y += 0.02; cube.rotation.z += 0.02; ... requestAnimationFrame(render); renderer.render(scene, camera); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

       ,   ?     –    rotation
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
        0,02      render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     (),        .  ,    ,     . 
      

        
        
        
      

     
      

        
        
        
      

       
      

        
        
        
      

                 render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ()  : 
      

        
        
        
      

     
      

        
        
        
      

     var step=0; function render() { ... step+=0.04; sphere.position.x = 20+( 10*(Math.cos(step))); sphere.position.y = 2 +( 10*Math.abs(Math.sin(step))); ... requestAnimationFrame(render); renderer.render(scene, camera); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           rotation
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ;        position
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      .  ,             ,    .               .  Math.cos()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      Math.sin()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
              step
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     .          .        ,  step+=0.04
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
         .        : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

         . 
      

        
        
        
      

         ,         .    3D-, ,       ,      .   ,        ,         .  ,  . 
      

        
        
        
      

     
      

        
        
        
      

       dat.GUI     
      

        
        
        
      

        Google     dat.GUI(        ),        .         ,      ,   : 
      

        
        
        
      

             
      

        
        
        
      

           ,    dat.GUI     ,   : 
      

        
        
        
      

     
      

        
        
        
      

     <script type="text/javascript" src="../libs/dat.gui.js"></script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

          –   JavaScript ,    ,    ,   dat.GUI.         JavaScript : 
      

        
        
        
      

     
      

        
        
        
      

     var controls = new function() { this.rotationSpeed = 0.02; this.bouncingSpeed = 0.03; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           : this.rotationSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      this.bouncingSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
          .         dat.GUI      ,   : 
      

        
        
        
      

     
      

        
        
        
      

     var gui = new dat.GUI(); gui.add(controls, 'rotationSpeed',0,0.5); gui.add(controls, 'bouncingSpeed',0,0.5);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

      rotationSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      bouncingSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
          0  0,5. ,      –  ,      render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
           ,  ,         dat.GUI,           .    : 
      

        
        
        
      

     
      

        
        
        
      

     function render() { ... cube.rotation.x += controls.rotationSpeed; cube.rotation.y += controls.rotationSpeed; cube.rotation.z += controls.rotationSpeed; step+=controls.bouncingSpeed; sphere.position.x = 20+( 10*(Math.cos(step))); sphere.position.y = 2 +( 10*Math.abs(Math.sin(step))); ... }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     ,    ,     ,          : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

         . 
      

        
        
        
      

     
      

        
        
        
      

      ASCII  
      

        
        
        
      

               3D-      . Three.js     ,      ,     .      ,         : ASCII .        ,      -ASCII,     .            : 
      

        
        
        
      

     
      

        
        
        
      

     $("#WebGL-output").append(renderer.domElement);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

      : 
      

        
        
        
      

     var effect = new THREE.AsciiEffect( renderer ); effect.setSize(window.innerWidth, window.innerHeight ); $("#WebGL-output").append(effect.domElement);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

               .    renderer.render(scene, camera),    effect.render(scene,camera).       : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

        . 
      

        
        
        
      

      ,      ,     ,       Three.js   . 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

           .         ,     Three.js           . 
      

        
        
        
      

          ,      .        ,     Three.js. 
      

        
        
        
      

        ,   : GitHub

    : 
      

        
        
        
      

     
      

        
        
        
      

     <script type="text/javascript" src="../libs/stats.js"></script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           ,         
      

        
        
        
      

     <div id="Stats-output"></div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     ,    –         ,   : 
      

        
        
        
      

     
      

        
        
        
      

     function initStats() { var stats = new Stats(); stats.setMode(0); stats.domElement.style.position = 'absolute'; stats.domElement.style.left = '0px'; stats.domElement.style.top = '0px'; $("#Stats-output").append(stats.domElement ); return stats; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

        .    setMode
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ().      0,    FPS,    1,     .      FPS,    0.      jQuery        : 
      

        
        
        
      

     
      

        
        
        
      

     $(function () { var stats = initStats(); … }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           render(): 
      

        
        
        
      

     function render() { stats.update(); ... requestAnimationFrame(render); renderer.render(scene, camera); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           ,       ,     : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

       
      

        
        
        
      

        requestAnimationFrame
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ()           .         render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     () ,         .    : 
      

        
        
        
      

     
      

        
        
        
      

     function render() { ... cube.rotation.x += 0.02; cube.rotation.y += 0.02; cube.rotation.z += 0.02; ... requestAnimationFrame(render); renderer.render(scene, camera); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

       ,   ?     –    rotation
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
        0,02      render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     (),        .  ,    ,     . 
      

        
        
        
      

     
      

        
        
        
      

       
      

        
        
        
      

                 render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ()  : 
      

        
        
        
      

     
      

        
        
        
      

     var step=0; function render() { ... step+=0.04; sphere.position.x = 20+( 10*(Math.cos(step))); sphere.position.y = 2 +( 10*Math.abs(Math.sin(step))); ... requestAnimationFrame(render); renderer.render(scene, camera); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           rotation
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ;        position
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      .  ,             ,    .               .  Math.cos()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      Math.sin()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
              step
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     .          .        ,  step+=0.04
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
         .        : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

         . 
      

        
        
        
      

         ,         .    3D-, ,       ,      .   ,        ,         .  ,  . 
      

        
        
        
      

     
      

        
        
        
      

       dat.GUI     
      

        
        
        
      

        Google     dat.GUI(        ),        .         ,      ,   : 
      

        
        
        
      

             
      

        
        
        
      

           ,    dat.GUI     ,   : 
      

        
        
        
      

     
      

        
        
        
      

     <script type="text/javascript" src="../libs/dat.gui.js"></script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

          –   JavaScript ,    ,    ,   dat.GUI.         JavaScript : 
      

        
        
        
      

     
      

        
        
        
      

     var controls = new function() { this.rotationSpeed = 0.02; this.bouncingSpeed = 0.03; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           : this.rotationSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      this.bouncingSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
          .         dat.GUI      ,   : 
      

        
        
        
      

     
      

        
        
        
      

     var gui = new dat.GUI(); gui.add(controls, 'rotationSpeed',0,0.5); gui.add(controls, 'bouncingSpeed',0,0.5);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

      rotationSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      bouncingSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
          0  0,5. ,      –  ,      render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
           ,  ,         dat.GUI,           .    : 
      

        
        
        
      

     
      

        
        
        
      

     function render() { ... cube.rotation.x += controls.rotationSpeed; cube.rotation.y += controls.rotationSpeed; cube.rotation.z += controls.rotationSpeed; step+=controls.bouncingSpeed; sphere.position.x = 20+( 10*(Math.cos(step))); sphere.position.y = 2 +( 10*Math.abs(Math.sin(step))); ... }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     ,    ,     ,          : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

         . 
      

        
        
        
      

     
      

        
        
        
      

      ASCII  
      

        
        
        
      

               3D-      . Three.js     ,      ,     .      ,         : ASCII .        ,      -ASCII,     .            : 
      

        
        
        
      

     
      

        
        
        
      

     $("#WebGL-output").append(renderer.domElement);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

      : 
      

        
        
        
      

     var effect = new THREE.AsciiEffect( renderer ); effect.setSize(window.innerWidth, window.innerHeight ); $("#WebGL-output").append(effect.domElement);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

               .    renderer.render(scene, camera),    effect.render(scene,camera).       : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

        . 
      

        
        
        
      

      ,      ,     ,       Three.js   . 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

           .         ,     Three.js           . 
      

        
        
        
      

          ,      .        ,     Three.js. 
      

        
        
        
      

        ,   : GitHub

   : 
      

        
        
        
      

     
      

        
        
        
      

     <script type="text/javascript" src="../libs/stats.js"></script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           ,         
      

        
        
        
      

     <div id="Stats-output"></div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     ,    –         ,   : 
      

        
        
        
      

     
      

        
        
        
      

     function initStats() { var stats = new Stats(); stats.setMode(0); stats.domElement.style.position = 'absolute'; stats.domElement.style.left = '0px'; stats.domElement.style.top = '0px'; $("#Stats-output").append(stats.domElement ); return stats; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

        .    setMode
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ().      0,    FPS,    1,     .      FPS,    0.      jQuery        : 
      

        
        
        
      

     
      

        
        
        
      

     $(function () { var stats = initStats(); … }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           render(): 
      

        
        
        
      

     function render() { stats.update(); ... requestAnimationFrame(render); renderer.render(scene, camera); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           ,       ,     : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

       
      

        
        
        
      

        requestAnimationFrame
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ()           .         render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     () ,         .    : 
      

        
        
        
      

     
      

        
        
        
      

     function render() { ... cube.rotation.x += 0.02; cube.rotation.y += 0.02; cube.rotation.z += 0.02; ... requestAnimationFrame(render); renderer.render(scene, camera); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

       ,   ?     –    rotation
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
        0,02      render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     (),        .  ,    ,     . 
      

        
        
        
      

     
      

        
        
        
      

       
      

        
        
        
      

                 render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ()  : 
      

        
        
        
      

     
      

        
        
        
      

     var step=0; function render() { ... step+=0.04; sphere.position.x = 20+( 10*(Math.cos(step))); sphere.position.y = 2 +( 10*Math.abs(Math.sin(step))); ... requestAnimationFrame(render); renderer.render(scene, camera); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           rotation
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ;        position
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      .  ,             ,    .               .  Math.cos()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      Math.sin()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
              step
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     .          .        ,  step+=0.04
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
         .        : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

         . 
      

        
        
        
      

         ,         .    3D-, ,       ,      .   ,        ,         .  ,  . 
      

        
        
        
      

     
      

        
        
        
      

       dat.GUI     
      

        
        
        
      

        Google     dat.GUI(        ),        .         ,      ,   : 
      

        
        
        
      

             
      

        
        
        
      

           ,    dat.GUI     ,   : 
      

        
        
        
      

     
      

        
        
        
      

     <script type="text/javascript" src="../libs/dat.gui.js"></script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

          –   JavaScript ,    ,    ,   dat.GUI.         JavaScript : 
      

        
        
        
      

     
      

        
        
        
      

     var controls = new function() { this.rotationSpeed = 0.02; this.bouncingSpeed = 0.03; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           : this.rotationSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      this.bouncingSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
          .         dat.GUI      ,   : 
      

        
        
        
      

     
      

        
        
        
      

     var gui = new dat.GUI(); gui.add(controls, 'rotationSpeed',0,0.5); gui.add(controls, 'bouncingSpeed',0,0.5);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

      rotationSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      bouncingSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
          0  0,5. ,      –  ,      render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
           ,  ,         dat.GUI,           .    : 
      

        
        
        
      

     
      

        
        
        
      

     function render() { ... cube.rotation.x += controls.rotationSpeed; cube.rotation.y += controls.rotationSpeed; cube.rotation.z += controls.rotationSpeed; step+=controls.bouncingSpeed; sphere.position.x = 20+( 10*(Math.cos(step))); sphere.position.y = 2 +( 10*Math.abs(Math.sin(step))); ... }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     ,    ,     ,          : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

         . 
      

        
        
        
      

     
      

        
        
        
      

      ASCII  
      

        
        
        
      

               3D-      . Three.js     ,      ,     .      ,         : ASCII .        ,      -ASCII,     .            : 
      

        
        
        
      

     
      

        
        
        
      

     $("#WebGL-output").append(renderer.domElement);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

      : 
      

        
        
        
      

     var effect = new THREE.AsciiEffect( renderer ); effect.setSize(window.innerWidth, window.innerHeight ); $("#WebGL-output").append(effect.domElement);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

               .    renderer.render(scene, camera),    effect.render(scene,camera).       : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

        . 
      

        
        
        
      

      ,      ,     ,       Three.js   . 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

           .         ,     Three.js           . 
      

        
        
        
      

          ,      .        ,     Three.js. 
      

        
        
        
      

        ,   : GitHub

    : 
      

        
        
        
      

     
      

        
        
        
      

     <script type="text/javascript" src="../libs/stats.js"></script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           ,         
      

        
        
        
      

     <div id="Stats-output"></div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     ,    –         ,   : 
      

        
        
        
      

     
      

        
        
        
      

     function initStats() { var stats = new Stats(); stats.setMode(0); stats.domElement.style.position = 'absolute'; stats.domElement.style.left = '0px'; stats.domElement.style.top = '0px'; $("#Stats-output").append(stats.domElement ); return stats; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

        .    setMode
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ().      0,    FPS,    1,     .      FPS,    0.      jQuery        : 
      

        
        
        
      

     
      

        
        
        
      

     $(function () { var stats = initStats(); … }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           render(): 
      

        
        
        
      

     function render() { stats.update(); ... requestAnimationFrame(render); renderer.render(scene, camera); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           ,       ,     : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

       
      

        
        
        
      

        requestAnimationFrame
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ()           .         render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     () ,         .    : 
      

        
        
        
      

     
      

        
        
        
      

     function render() { ... cube.rotation.x += 0.02; cube.rotation.y += 0.02; cube.rotation.z += 0.02; ... requestAnimationFrame(render); renderer.render(scene, camera); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

       ,   ?     –    rotation
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
        0,02      render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     (),        .  ,    ,     . 
      

        
        
        
      

     
      

        
        
        
      

       
      

        
        
        
      

                 render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ()  : 
      

        
        
        
      

     
      

        
        
        
      

     var step=0; function render() { ... step+=0.04; sphere.position.x = 20+( 10*(Math.cos(step))); sphere.position.y = 2 +( 10*Math.abs(Math.sin(step))); ... requestAnimationFrame(render); renderer.render(scene, camera); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           rotation
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ;        position
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      .  ,             ,    .               .  Math.cos()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      Math.sin()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
              step
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     .          .        ,  step+=0.04
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
         .        : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

         . 
      

        
        
        
      

         ,         .    3D-, ,       ,      .   ,        ,         .  ,  . 
      

        
        
        
      

     
      

        
        
        
      

       dat.GUI     
      

        
        
        
      

        Google     dat.GUI(        ),        .         ,      ,   : 
      

        
        
        
      

             
      

        
        
        
      

           ,    dat.GUI     ,   : 
      

        
        
        
      

     
      

        
        
        
      

     <script type="text/javascript" src="../libs/dat.gui.js"></script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

          –   JavaScript ,    ,    ,   dat.GUI.         JavaScript : 
      

        
        
        
      

     
      

        
        
        
      

     var controls = new function() { this.rotationSpeed = 0.02; this.bouncingSpeed = 0.03; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           : this.rotationSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      this.bouncingSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
          .         dat.GUI      ,   : 
      

        
        
        
      

     
      

        
        
        
      

     var gui = new dat.GUI(); gui.add(controls, 'rotationSpeed',0,0.5); gui.add(controls, 'bouncingSpeed',0,0.5);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

      rotationSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      bouncingSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
          0  0,5. ,      –  ,      render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
           ,  ,         dat.GUI,           .    : 
      

        
        
        
      

     
      

        
        
        
      

     function render() { ... cube.rotation.x += controls.rotationSpeed; cube.rotation.y += controls.rotationSpeed; cube.rotation.z += controls.rotationSpeed; step+=controls.bouncingSpeed; sphere.position.x = 20+( 10*(Math.cos(step))); sphere.position.y = 2 +( 10*Math.abs(Math.sin(step))); ... }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     ,    ,     ,          : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

         . 
      

        
        
        
      

     
      

        
        
        
      

      ASCII  
      

        
        
        
      

               3D-      . Three.js     ,      ,     .      ,         : ASCII .        ,      -ASCII,     .            : 
      

        
        
        
      

     
      

        
        
        
      

     $("#WebGL-output").append(renderer.domElement);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

      : 
      

        
        
        
      

     var effect = new THREE.AsciiEffect( renderer ); effect.setSize(window.innerWidth, window.innerHeight ); $("#WebGL-output").append(effect.domElement);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

               .    renderer.render(scene, camera),    effect.render(scene,camera).       : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

        . 
      

        
        
        
      

      ,      ,     ,       Three.js   . 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

           .         ,     Three.js           . 
      

        
        
        
      

          ,      .        ,     Three.js. 
      

        
        
        
      

        ,   : GitHub

   : 
      

        
        
        
      

     
      

        
        
        
      

     <script type="text/javascript" src="../libs/stats.js"></script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           ,         
      

        
        
        
      

     <div id="Stats-output"></div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     ,    –         ,   : 
      

        
        
        
      

     
      

        
        
        
      

     function initStats() { var stats = new Stats(); stats.setMode(0); stats.domElement.style.position = 'absolute'; stats.domElement.style.left = '0px'; stats.domElement.style.top = '0px'; $("#Stats-output").append(stats.domElement ); return stats; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

        .    setMode
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ().      0,    FPS,    1,     .      FPS,    0.      jQuery        : 
      

        
        
        
      

     
      

        
        
        
      

     $(function () { var stats = initStats(); … }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           render(): 
      

        
        
        
      

     function render() { stats.update(); ... requestAnimationFrame(render); renderer.render(scene, camera); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           ,       ,     : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

       
      

        
        
        
      

        requestAnimationFrame
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ()           .         render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     () ,         .    : 
      

        
        
        
      

     
      

        
        
        
      

     function render() { ... cube.rotation.x += 0.02; cube.rotation.y += 0.02; cube.rotation.z += 0.02; ... requestAnimationFrame(render); renderer.render(scene, camera); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

       ,   ?     –    rotation
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
        0,02      render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     (),        .  ,    ,     . 
      

        
        
        
      

     
      

        
        
        
      

       
      

        
        
        
      

                 render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ()  : 
      

        
        
        
      

     
      

        
        
        
      

     var step=0; function render() { ... step+=0.04; sphere.position.x = 20+( 10*(Math.cos(step))); sphere.position.y = 2 +( 10*Math.abs(Math.sin(step))); ... requestAnimationFrame(render); renderer.render(scene, camera); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           rotation
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ;        position
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      .  ,             ,    .               .  Math.cos()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      Math.sin()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
              step
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     .          .        ,  step+=0.04
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
         .        : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

         . 
      

        
        
        
      

         ,         .    3D-, ,       ,      .   ,        ,         .  ,  . 
      

        
        
        
      

     
      

        
        
        
      

       dat.GUI     
      

        
        
        
      

        Google     dat.GUI(        ),        .         ,      ,   : 
      

        
        
        
      

             
      

        
        
        
      

           ,    dat.GUI     ,   : 
      

        
        
        
      

     
      

        
        
        
      

     <script type="text/javascript" src="../libs/dat.gui.js"></script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

          –   JavaScript ,    ,    ,   dat.GUI.         JavaScript : 
      

        
        
        
      

     
      

        
        
        
      

     var controls = new function() { this.rotationSpeed = 0.02; this.bouncingSpeed = 0.03; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           : this.rotationSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      this.bouncingSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
          .         dat.GUI      ,   : 
      

        
        
        
      

     
      

        
        
        
      

     var gui = new dat.GUI(); gui.add(controls, 'rotationSpeed',0,0.5); gui.add(controls, 'bouncingSpeed',0,0.5);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

      rotationSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      bouncingSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
          0  0,5. ,      –  ,      render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
           ,  ,         dat.GUI,           .    : 
      

        
        
        
      

     
      

        
        
        
      

     function render() { ... cube.rotation.x += controls.rotationSpeed; cube.rotation.y += controls.rotationSpeed; cube.rotation.z += controls.rotationSpeed; step+=controls.bouncingSpeed; sphere.position.x = 20+( 10*(Math.cos(step))); sphere.position.y = 2 +( 10*Math.abs(Math.sin(step))); ... }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     ,    ,     ,          : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

         . 
      

        
        
        
      

     
      

        
        
        
      

      ASCII  
      

        
        
        
      

               3D-      . Three.js     ,      ,     .      ,         : ASCII .        ,      -ASCII,     .            : 
      

        
        
        
      

     
      

        
        
        
      

     $("#WebGL-output").append(renderer.domElement);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

      : 
      

        
        
        
      

     var effect = new THREE.AsciiEffect( renderer ); effect.setSize(window.innerWidth, window.innerHeight ); $("#WebGL-output").append(effect.domElement);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

               .    renderer.render(scene, camera),    effect.render(scene,camera).       : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

        . 
      

        
        
        
      

      ,      ,     ,       Three.js   . 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

           .         ,     Three.js           . 
      

        
        
        
      

          ,      .        ,     Three.js. 
      

        
        
        
      

        ,   : GitHub

: <script type="text/javascript" src="../libs/stats.js"></script> , <div id="Stats-output"></div> , – , : function initStats() { var stats = new Stats(); stats.setMode(0); stats.domElement.style.position = 'absolute'; stats.domElement.style.left = '0px'; stats.domElement.style.top = '0px'; $("#Stats-output").append(stats.domElement ); return stats; } . setMode (). 0, FPS, 1, . FPS, 0. jQuery : $(function () { var stats = initStats(); … } render(): function render() { stats.update(); ... requestAnimationFrame(render); renderer.render(scene, camera); } , , : requestAnimationFrame () . render () , . : function render() { ... cube.rotation.x += 0.02; cube.rotation.y += 0.02; cube.rotation.z += 0.02; ... requestAnimationFrame(render); renderer.render(scene, camera); } , ? – rotation 0,02 render (), . , , . render () : var step=0; function render() { ... step+=0.04; sphere.position.x = 20+( 10(Math.cos(step))); sphere.position.y = 2 +( 10Math.abs(Math.sin(step))); ... requestAnimationFrame(render); renderer.render(scene, camera); } rotation ; position . , , . . Math.cos() Math.sin() step . . , step+=0.04 . : . , . 3D-, , , . , , . , . dat.GUI Google dat.GUI( ), . , , : , dat.GUI , : <script type="text/javascript" src="../libs/dat.gui.js"></script> – JavaScript , , , dat.GUI. JavaScript : var controls = new function() { this.rotationSpeed = 0.02; this.bouncingSpeed = 0.03; } : this.rotationSpeed this.bouncingSpeed . dat.GUI , : var gui = new dat.GUI(); gui.add(controls, 'rotationSpeed',0,0.5); gui.add(controls, 'bouncingSpeed',0,0.5); rotationSpeed bouncingSpeed 0 0,5. , – , render , , dat.GUI, . : function render() { ... cube.rotation.x += controls.rotationSpeed; cube.rotation.y += controls.rotationSpeed; cube.rotation.z += controls.rotationSpeed; step+=controls.bouncingSpeed; sphere.position.x = 20+( 10(Math.cos(step))); sphere.position.y = 2 +( 10Math.abs(Math.sin(step))); ... } , , , : . ASCII 3D- . Three.js , , . , : ASCII . , -ASCII, . : $("#WebGL-output").append(renderer.domElement); : var effect = new THREE.AsciiEffect( renderer ); effect.setSize(window.innerWidth, window.innerHeight ); $("#WebGL-output").append(effect.domElement); . renderer.render(scene, camera), effect.render(scene,camera). : . , , , Three.js . . , Three.js . , . , Three.js. , : GitHub

   : 
      

        
        
        
      

     
      

        
        
        
      

     <script type="text/javascript" src="../libs/stats.js"></script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           ,         
      

        
        
        
      

     <div id="Stats-output"></div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     ,    –         ,   : 
      

        
        
        
      

     
      

        
        
        
      

     function initStats() { var stats = new Stats(); stats.setMode(0); stats.domElement.style.position = 'absolute'; stats.domElement.style.left = '0px'; stats.domElement.style.top = '0px'; $("#Stats-output").append(stats.domElement ); return stats; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

        .    setMode
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ().      0,    FPS,    1,     .      FPS,    0.      jQuery        : 
      

        
        
        
      

     
      

        
        
        
      

     $(function () { var stats = initStats(); … }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           render(): 
      

        
        
        
      

     function render() { stats.update(); ... requestAnimationFrame(render); renderer.render(scene, camera); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           ,       ,     : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

       
      

        
        
        
      

        requestAnimationFrame
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ()           .         render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     () ,         .    : 
      

        
        
        
      

     
      

        
        
        
      

     function render() { ... cube.rotation.x += 0.02; cube.rotation.y += 0.02; cube.rotation.z += 0.02; ... requestAnimationFrame(render); renderer.render(scene, camera); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

       ,   ?     –    rotation
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
        0,02      render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     (),        .  ,    ,     . 
      

        
        
        
      

     
      

        
        
        
      

       
      

        
        
        
      

                 render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ()  : 
      

        
        
        
      

     
      

        
        
        
      

     var step=0; function render() { ... step+=0.04; sphere.position.x = 20+( 10*(Math.cos(step))); sphere.position.y = 2 +( 10*Math.abs(Math.sin(step))); ... requestAnimationFrame(render); renderer.render(scene, camera); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           rotation
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ;        position
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      .  ,             ,    .               .  Math.cos()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      Math.sin()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
              step
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     .          .        ,  step+=0.04
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
         .        : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

         . 
      

        
        
        
      

         ,         .    3D-, ,       ,      .   ,        ,         .  ,  . 
      

        
        
        
      

     
      

        
        
        
      

       dat.GUI     
      

        
        
        
      

        Google     dat.GUI(        ),        .         ,      ,   : 
      

        
        
        
      

             
      

        
        
        
      

           ,    dat.GUI     ,   : 
      

        
        
        
      

     
      

        
        
        
      

     <script type="text/javascript" src="../libs/dat.gui.js"></script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

          –   JavaScript ,    ,    ,   dat.GUI.         JavaScript : 
      

        
        
        
      

     
      

        
        
        
      

     var controls = new function() { this.rotationSpeed = 0.02; this.bouncingSpeed = 0.03; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           : this.rotationSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      this.bouncingSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
          .         dat.GUI      ,   : 
      

        
        
        
      

     
      

        
        
        
      

     var gui = new dat.GUI(); gui.add(controls, 'rotationSpeed',0,0.5); gui.add(controls, 'bouncingSpeed',0,0.5);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

      rotationSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      bouncingSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
          0  0,5. ,      –  ,      render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
           ,  ,         dat.GUI,           .    : 
      

        
        
        
      

     
      

        
        
        
      

     function render() { ... cube.rotation.x += controls.rotationSpeed; cube.rotation.y += controls.rotationSpeed; cube.rotation.z += controls.rotationSpeed; step+=controls.bouncingSpeed; sphere.position.x = 20+( 10*(Math.cos(step))); sphere.position.y = 2 +( 10*Math.abs(Math.sin(step))); ... }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     ,    ,     ,          : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

         . 
      

        
        
        
      

     
      

        
        
        
      

      ASCII  
      

        
        
        
      

               3D-      . Three.js     ,      ,     .      ,         : ASCII .        ,      -ASCII,     .            : 
      

        
        
        
      

     
      

        
        
        
      

     $("#WebGL-output").append(renderer.domElement);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

      : 
      

        
        
        
      

     var effect = new THREE.AsciiEffect( renderer ); effect.setSize(window.innerWidth, window.innerHeight ); $("#WebGL-output").append(effect.domElement);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

               .    renderer.render(scene, camera),    effect.render(scene,camera).       : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

        . 
      

        
        
        
      

      ,      ,     ,       Three.js   . 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

           .         ,     Three.js           . 
      

        
        
        
      

          ,      .        ,     Three.js. 
      

        
        
        
      

        ,   : GitHub

    : 
      

        
        
        
      

     
      

        
        
        
      

     <script type="text/javascript" src="../libs/stats.js"></script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           ,         
      

        
        
        
      

     <div id="Stats-output"></div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     ,    –         ,   : 
      

        
        
        
      

     
      

        
        
        
      

     function initStats() { var stats = new Stats(); stats.setMode(0); stats.domElement.style.position = 'absolute'; stats.domElement.style.left = '0px'; stats.domElement.style.top = '0px'; $("#Stats-output").append(stats.domElement ); return stats; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

        .    setMode
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ().      0,    FPS,    1,     .      FPS,    0.      jQuery        : 
      

        
        
        
      

     
      

        
        
        
      

     $(function () { var stats = initStats(); … }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           render(): 
      

        
        
        
      

     function render() { stats.update(); ... requestAnimationFrame(render); renderer.render(scene, camera); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           ,       ,     : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

       
      

        
        
        
      

        requestAnimationFrame
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ()           .         render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     () ,         .    : 
      

        
        
        
      

     
      

        
        
        
      

     function render() { ... cube.rotation.x += 0.02; cube.rotation.y += 0.02; cube.rotation.z += 0.02; ... requestAnimationFrame(render); renderer.render(scene, camera); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

       ,   ?     –    rotation
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
        0,02      render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     (),        .  ,    ,     . 
      

        
        
        
      

     
      

        
        
        
      

       
      

        
        
        
      

                 render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ()  : 
      

        
        
        
      

     
      

        
        
        
      

     var step=0; function render() { ... step+=0.04; sphere.position.x = 20+( 10*(Math.cos(step))); sphere.position.y = 2 +( 10*Math.abs(Math.sin(step))); ... requestAnimationFrame(render); renderer.render(scene, camera); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           rotation
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ;        position
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      .  ,             ,    .               .  Math.cos()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      Math.sin()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
              step
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     .          .        ,  step+=0.04
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
         .        : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

         . 
      

        
        
        
      

         ,         .    3D-, ,       ,      .   ,        ,         .  ,  . 
      

        
        
        
      

     
      

        
        
        
      

       dat.GUI     
      

        
        
        
      

        Google     dat.GUI(        ),        .         ,      ,   : 
      

        
        
        
      

             
      

        
        
        
      

           ,    dat.GUI     ,   : 
      

        
        
        
      

     
      

        
        
        
      

     <script type="text/javascript" src="../libs/dat.gui.js"></script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

          –   JavaScript ,    ,    ,   dat.GUI.         JavaScript : 
      

        
        
        
      

     
      

        
        
        
      

     var controls = new function() { this.rotationSpeed = 0.02; this.bouncingSpeed = 0.03; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           : this.rotationSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      this.bouncingSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
          .         dat.GUI      ,   : 
      

        
        
        
      

     
      

        
        
        
      

     var gui = new dat.GUI(); gui.add(controls, 'rotationSpeed',0,0.5); gui.add(controls, 'bouncingSpeed',0,0.5);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

      rotationSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      bouncingSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
          0  0,5. ,      –  ,      render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
           ,  ,         dat.GUI,           .    : 
      

        
        
        
      

     
      

        
        
        
      

     function render() { ... cube.rotation.x += controls.rotationSpeed; cube.rotation.y += controls.rotationSpeed; cube.rotation.z += controls.rotationSpeed; step+=controls.bouncingSpeed; sphere.position.x = 20+( 10*(Math.cos(step))); sphere.position.y = 2 +( 10*Math.abs(Math.sin(step))); ... }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     ,    ,     ,          : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

         . 
      

        
        
        
      

     
      

        
        
        
      

      ASCII  
      

        
        
        
      

               3D-      . Three.js     ,      ,     .      ,         : ASCII .        ,      -ASCII,     .            : 
      

        
        
        
      

     
      

        
        
        
      

     $("#WebGL-output").append(renderer.domElement); 
      

        
        
        
      

      : 
      

        
        
        
      

     var effect = new THREE.AsciiEffect( renderer ); effect.setSize(window.innerWidth, window.innerHeight ); $("#WebGL-output").append(effect.domElement);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

               .    renderer.render(scene, camera),    effect.render(scene,camera).       : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

        . 
      

        
        
        
      

      ,      ,     ,       Three.js   . 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

           .         ,     Three.js           . 
      

        
        
        
      

          ,      .        ,     Three.js. 
      

        
        
        
      

        ,   : GitHub

   : 
      

        
        
        
      

     
      

        
        
        
      

     <script type="text/javascript" src="../libs/stats.js"></script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           ,         
      

        
        
        
      

     <div id="Stats-output"></div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     ,    –         ,   : 
      

        
        
        
      

     
      

        
        
        
      

     function initStats() { var stats = new Stats(); stats.setMode(0); stats.domElement.style.position = 'absolute'; stats.domElement.style.left = '0px'; stats.domElement.style.top = '0px'; $("#Stats-output").append(stats.domElement ); return stats; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

        .    setMode
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ().      0,    FPS,    1,     .      FPS,    0.      jQuery        : 
      

        
        
        
      

     
      

        
        
        
      

     $(function () { var stats = initStats(); … }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           render(): 
      

        
        
        
      

     function render() { stats.update(); ... requestAnimationFrame(render); renderer.render(scene, camera); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           ,       ,     : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

       
      

        
        
        
      

        requestAnimationFrame
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ()           .         render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     () ,         .    : 
      

        
        
        
      

     
      

        
        
        
      

     function render() { ... cube.rotation.x += 0.02; cube.rotation.y += 0.02; cube.rotation.z += 0.02; ... requestAnimationFrame(render); renderer.render(scene, camera); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

       ,   ?     –    rotation
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
        0,02      render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     (),        .  ,    ,     . 
      

        
        
        
      

     
      

        
        
        
      

       
      

        
        
        
      

                 render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ()  : 
      

        
        
        
      

     
      

        
        
        
      

     var step=0; function render() { ... step+=0.04; sphere.position.x = 20+( 10*(Math.cos(step))); sphere.position.y = 2 +( 10*Math.abs(Math.sin(step))); ... requestAnimationFrame(render); renderer.render(scene, camera); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           rotation
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ;        position
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      .  ,             ,    .               .  Math.cos()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      Math.sin()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
              step
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     .          .        ,  step+=0.04
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
         .        : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

         . 
      

        
        
        
      

         ,         .    3D-, ,       ,      .   ,        ,         .  ,  . 
      

        
        
        
      

     
      

        
        
        
      

       dat.GUI     
      

        
        
        
      

        Google     dat.GUI(        ),        .         ,      ,   : 
      

        
        
        
      

             
      

        
        
        
      

           ,    dat.GUI     ,   : 
      

        
        
        
      

     
      

        
        
        
      

     <script type="text/javascript" src="../libs/dat.gui.js"></script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

          –   JavaScript ,    ,    ,   dat.GUI.         JavaScript : 
      

        
        
        
      

     
      

        
        
        
      

     var controls = new function() { this.rotationSpeed = 0.02; this.bouncingSpeed = 0.03; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           : this.rotationSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      this.bouncingSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
          .         dat.GUI      ,   : 
      

        
        
        
      

     
      

        
        
        
      

     var gui = new dat.GUI(); gui.add(controls, 'rotationSpeed',0,0.5); gui.add(controls, 'bouncingSpeed',0,0.5);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

      rotationSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      bouncingSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
          0  0,5. ,      –  ,      render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
           ,  ,         dat.GUI,           .    : 
      

        
        
        
      

     
      

        
        
        
      

     function render() { ... cube.rotation.x += controls.rotationSpeed; cube.rotation.y += controls.rotationSpeed; cube.rotation.z += controls.rotationSpeed; step+=controls.bouncingSpeed; sphere.position.x = 20+( 10*(Math.cos(step))); sphere.position.y = 2 +( 10*Math.abs(Math.sin(step))); ... }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     ,    ,     ,          : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

         . 
      

        
        
        
      

     
      

        
        
        
      

      ASCII  
      

        
        
        
      

               3D-      . Three.js     ,      ,     .      ,         : ASCII .        ,      -ASCII,     .            : 
      

        
        
        
      

     
      

        
        
        
      

     $("#WebGL-output").append(renderer.domElement);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

      : 
      

        
        
        
      

     var effect = new THREE.AsciiEffect( renderer ); effect.setSize(window.innerWidth, window.innerHeight ); $("#WebGL-output").append(effect.domElement);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

               .    renderer.render(scene, camera),    effect.render(scene,camera).       : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

        . 
      

        
        
        
      

      ,      ,     ,       Three.js   . 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

           .         ,     Three.js           . 
      

        
        
        
      

          ,      .        ,     Three.js. 
      

        
        
        
      

        ,   : GitHub

    : 
      

        
        
        
      

     
      

        
        
        
      

     <script type="text/javascript" src="../libs/stats.js"></script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           ,         
      

        
        
        
      

     <div id="Stats-output"></div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     ,    –         ,   : 
      

        
        
        
      

     
      

        
        
        
      

     function initStats() { var stats = new Stats(); stats.setMode(0); stats.domElement.style.position = 'absolute'; stats.domElement.style.left = '0px'; stats.domElement.style.top = '0px'; $("#Stats-output").append(stats.domElement ); return stats; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

        .    setMode
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ().      0,    FPS,    1,     .      FPS,    0.      jQuery        : 
      

        
        
        
      

     
      

        
        
        
      

     $(function () { var stats = initStats(); … }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           render(): 
      

        
        
        
      

     function render() { stats.update(); ... requestAnimationFrame(render); renderer.render(scene, camera); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           ,       ,     : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

       
      

        
        
        
      

        requestAnimationFrame
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ()           .         render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     () ,         .    : 
      

        
        
        
      

     
      

        
        
        
      

     function render() { ... cube.rotation.x += 0.02; cube.rotation.y += 0.02; cube.rotation.z += 0.02; ... requestAnimationFrame(render); renderer.render(scene, camera); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

       ,   ?     –    rotation
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
        0,02      render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     (),        .  ,    ,     . 
      

        
        
        
      

     
      

        
        
        
      

       
      

        
        
        
      

                 render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ()  : 
      

        
        
        
      

     
      

        
        
        
      

     var step=0; function render() { ... step+=0.04; sphere.position.x = 20+( 10*(Math.cos(step))); sphere.position.y = 2 +( 10*Math.abs(Math.sin(step))); ... requestAnimationFrame(render); renderer.render(scene, camera); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           rotation
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ;        position
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      .  ,             ,    .               .  Math.cos()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      Math.sin()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
              step
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     .          .        ,  step+=0.04
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
         .        : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

         . 
      

        
        
        
      

         ,         .    3D-, ,       ,      .   ,        ,         .  ,  . 
      

        
        
        
      

     
      

        
        
        
      

       dat.GUI     
      

        
        
        
      

        Google     dat.GUI(        ),        .         ,      ,   : 
      

        
        
        
      

             
      

        
        
        
      

           ,    dat.GUI     ,   : 
      

        
        
        
      

     
      

        
        
        
      

     <script type="text/javascript" src="../libs/dat.gui.js"></script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

          –   JavaScript ,    ,    ,   dat.GUI.         JavaScript : 
      

        
        
        
      

     
      

        
        
        
      

     var controls = new function() { this.rotationSpeed = 0.02; this.bouncingSpeed = 0.03; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           : this.rotationSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      this.bouncingSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
          .         dat.GUI      ,   : 
      

        
        
        
      

     
      

        
        
        
      

     var gui = new dat.GUI(); gui.add(controls, 'rotationSpeed',0,0.5); gui.add(controls, 'bouncingSpeed',0,0.5);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

      rotationSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      bouncingSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
          0  0,5. ,      –  ,      render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
           ,  ,         dat.GUI,           .    : 
      

        
        
        
      

     
      

        
        
        
      

     function render() { ... cube.rotation.x += controls.rotationSpeed; cube.rotation.y += controls.rotationSpeed; cube.rotation.z += controls.rotationSpeed; step+=controls.bouncingSpeed; sphere.position.x = 20+( 10*(Math.cos(step))); sphere.position.y = 2 +( 10*Math.abs(Math.sin(step))); ... }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     ,    ,     ,          : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

         . 
      

        
        
        
      

     
      

        
        
        
      

      ASCII  
      

        
        
        
      

               3D-      . Three.js     ,      ,     .      ,         : ASCII .        ,      -ASCII,     .            : 
      

        
        
        
      

     
      

        
        
        
      

     $("#WebGL-output").append(renderer.domElement);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

      : 
      

        
        
        
      

     var effect = new THREE.AsciiEffect( renderer ); effect.setSize(window.innerWidth, window.innerHeight ); $("#WebGL-output").append(effect.domElement);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

               .    renderer.render(scene, camera),    effect.render(scene,camera).       : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

        . 
      

        
        
        
      

      ,      ,     ,       Three.js   . 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

           .         ,     Three.js           . 
      

        
        
        
      

          ,      .        ,     Three.js. 
      

        
        
        
      

        ,   : GitHub

   : 
      

        
        
        
      

     
      

        
        
        
      

     <script type="text/javascript" src="../libs/stats.js"></script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           ,         
      

        
        
        
      

     <div id="Stats-output"></div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     ,    –         ,   : 
      

        
        
        
      

     
      

        
        
        
      

     function initStats() { var stats = new Stats(); stats.setMode(0); stats.domElement.style.position = 'absolute'; stats.domElement.style.left = '0px'; stats.domElement.style.top = '0px'; $("#Stats-output").append(stats.domElement ); return stats; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

        .    setMode
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ().      0,    FPS,    1,     .      FPS,    0.      jQuery        : 
      

        
        
        
      

     
      

        
        
        
      

     $(function () { var stats = initStats(); … }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           render(): 
      

        
        
        
      

     function render() { stats.update(); ... requestAnimationFrame(render); renderer.render(scene, camera); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           ,       ,     : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

       
      

        
        
        
      

        requestAnimationFrame
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ()           .         render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     () ,         .    : 
      

        
        
        
      

     
      

        
        
        
      

     function render() { ... cube.rotation.x += 0.02; cube.rotation.y += 0.02; cube.rotation.z += 0.02; ... requestAnimationFrame(render); renderer.render(scene, camera); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

       ,   ?     –    rotation
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
        0,02      render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     (),        .  ,    ,     . 
      

        
        
        
      

     
      

        
        
        
      

       
      

        
        
        
      

                 render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ()  : 
      

        
        
        
      

     
      

        
        
        
      

     var step=0; function render() { ... step+=0.04; sphere.position.x = 20+( 10*(Math.cos(step))); sphere.position.y = 2 +( 10*Math.abs(Math.sin(step))); ... requestAnimationFrame(render); renderer.render(scene, camera); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           rotation
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ;        position
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      .  ,             ,    .               .  Math.cos()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      Math.sin()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
              step
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     .          .        ,  step+=0.04
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
         .        : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

         . 
      

        
        
        
      

         ,         .    3D-, ,       ,      .   ,        ,         .  ,  . 
      

        
        
        
      

     
      

        
        
        
      

       dat.GUI     
      

        
        
        
      

        Google     dat.GUI(        ),        .         ,      ,   : 
      

        
        
        
      

             
      

        
        
        
      

           ,    dat.GUI     ,   : 
      

        
        
        
      

     
      

        
        
        
      

     <script type="text/javascript" src="../libs/dat.gui.js"></script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

          –   JavaScript ,    ,    ,   dat.GUI.         JavaScript : 
      

        
        
        
      

     
      

        
        
        
      

     var controls = new function() { this.rotationSpeed = 0.02; this.bouncingSpeed = 0.03; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           : this.rotationSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      this.bouncingSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
          .         dat.GUI      ,   : 
      

        
        
        
      

     
      

        
        
        
      

     var gui = new dat.GUI(); gui.add(controls, 'rotationSpeed',0,0.5); gui.add(controls, 'bouncingSpeed',0,0.5);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

      rotationSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      bouncingSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
          0  0,5. ,      –  ,      render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
           ,  ,         dat.GUI,           .    : 
      

        
        
        
      

     
      

        
        
        
      

     function render() { ... cube.rotation.x += controls.rotationSpeed; cube.rotation.y += controls.rotationSpeed; cube.rotation.z += controls.rotationSpeed; step+=controls.bouncingSpeed; sphere.position.x = 20+( 10*(Math.cos(step))); sphere.position.y = 2 +( 10*Math.abs(Math.sin(step))); ... }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     ,    ,     ,          : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

         . 
      

        
        
        
      

     
      

        
        
        
      

      ASCII  
      

        
        
        
      

               3D-      . Three.js     ,      ,     .      ,         : ASCII .        ,      -ASCII,     .            : 
      

        
        
        
      

     
      

        
        
        
      

     $("#WebGL-output").append(renderer.domElement);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

      : 
      

        
        
        
      

     var effect = new THREE.AsciiEffect( renderer ); effect.setSize(window.innerWidth, window.innerHeight ); $("#WebGL-output").append(effect.domElement);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

               .    renderer.render(scene, camera),    effect.render(scene,camera).       : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

        . 
      

        
        
        
      

      ,      ,     ,       Three.js   . 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

           .         ,     Three.js           . 
      

        
        
        
      

          ,      .        ,     Three.js. 
      

        
        
        
      

        ,   : GitHub

: <script type="text/javascript" src="../libs/stats.js"></script> , <div id="Stats-output"></div> , – , : function initStats() { var stats = new Stats(); stats.setMode(0); stats.domElement.style.position = 'absolute'; stats.domElement.style.left = '0px'; stats.domElement.style.top = '0px'; $("#Stats-output").append(stats.domElement ); return stats; } . setMode (). 0, FPS, 1, . FPS, 0. jQuery : $(function () { var stats = initStats(); … } render(): function render() { stats.update(); ... requestAnimationFrame(render); renderer.render(scene, camera); } , , : requestAnimationFrame () . render () , . : function render() { ... cube.rotation.x += 0.02; cube.rotation.y += 0.02; cube.rotation.z += 0.02; ... requestAnimationFrame(render); renderer.render(scene, camera); } , ? – rotation 0,02 render (), . , , . render () : var step=0; function render() { ... step+=0.04; sphere.position.x = 20+( 10(Math.cos(step))); sphere.position.y = 2 +( 10Math.abs(Math.sin(step))); ... requestAnimationFrame(render); renderer.render(scene, camera); } rotation ; position . , , . . Math.cos() Math.sin() step . . , step+=0.04 . : . , . 3D-, , , . , , . , . dat.GUI Google dat.GUI( ), . , , : , dat.GUI , : <script type="text/javascript" src="../libs/dat.gui.js"></script> – JavaScript , , , dat.GUI. JavaScript : var controls = new function() { this.rotationSpeed = 0.02; this.bouncingSpeed = 0.03; } : this.rotationSpeed this.bouncingSpeed . dat.GUI , : var gui = new dat.GUI(); gui.add(controls, 'rotationSpeed',0,0.5); gui.add(controls, 'bouncingSpeed',0,0.5); rotationSpeed bouncingSpeed 0 0,5. , – , render , , dat.GUI, . : function render() { ... cube.rotation.x += controls.rotationSpeed; cube.rotation.y += controls.rotationSpeed; cube.rotation.z += controls.rotationSpeed; step+=controls.bouncingSpeed; sphere.position.x = 20+( 10(Math.cos(step))); sphere.position.y = 2 +( 10Math.abs(Math.sin(step))); ... } , , , : . ASCII 3D- . Three.js , , . , : ASCII . , -ASCII, . : $("#WebGL-output").append(renderer.domElement); : var effect = new THREE.AsciiEffect( renderer ); effect.setSize(window.innerWidth, window.innerHeight ); $("#WebGL-output").append(effect.domElement); . renderer.render(scene, camera), effect.render(scene,camera). : . , , , Three.js . . , Three.js . , . , Three.js. , : GitHub

   : 
      

        
        
        
      

     
      

        
        
        
      

     <script type="text/javascript" src="../libs/stats.js"></script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           ,         
      

        
        
        
      

     <div id="Stats-output"></div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     ,    –         ,   : 
      

        
        
        
      

     
      

        
        
        
      

     function initStats() { var stats = new Stats(); stats.setMode(0); stats.domElement.style.position = 'absolute'; stats.domElement.style.left = '0px'; stats.domElement.style.top = '0px'; $("#Stats-output").append(stats.domElement ); return stats; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

        .    setMode
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ().      0,    FPS,    1,     .      FPS,    0.      jQuery        : 
      

        
        
        
      

     
      

        
        
        
      

     $(function () { var stats = initStats(); … }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           render(): 
      

        
        
        
      

     function render() { stats.update(); ... requestAnimationFrame(render); renderer.render(scene, camera); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           ,       ,     : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

       
      

        
        
        
      

        requestAnimationFrame
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ()           .         render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     () ,         .    : 
      

        
        
        
      

     
      

        
        
        
      

     function render() { ... cube.rotation.x += 0.02; cube.rotation.y += 0.02; cube.rotation.z += 0.02; ... requestAnimationFrame(render); renderer.render(scene, camera); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

       ,   ?     –    rotation
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
        0,02      render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     (),        .  ,    ,     . 
      

        
        
        
      

     
      

        
        
        
      

       
      

        
        
        
      

                 render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ()  : 
      

        
        
        
      

     
      

        
        
        
      

     var step=0; function render() { ... step+=0.04; sphere.position.x = 20+( 10*(Math.cos(step))); sphere.position.y = 2 +( 10*Math.abs(Math.sin(step))); ... requestAnimationFrame(render); renderer.render(scene, camera); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           rotation
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     ;        position
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      .  ,             ,    .               .  Math.cos()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      Math.sin()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
              step
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     .          .        ,  step+=0.04
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
         .        : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

         . 
      

        
        
        
      

         ,         .    3D-, ,       ,      .   ,        ,         .  ,  . 
      

        
        
        
      

     
      

        
        
        
      

       dat.GUI     
      

        
        
        
      

        Google     dat.GUI(        ),        .         ,      ,   : 
      

        
        
        
      

             
      

        
        
        
      

           ,    dat.GUI     ,   : 
      

        
        
        
      

     
      

        
        
        
      

     <script type="text/javascript" src="../libs/dat.gui.js"></script>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

          –   JavaScript ,    ,    ,   dat.GUI.         JavaScript : 
      

        
        
        
      

     
      

        
        
        
      

     var controls = new function() { this.rotationSpeed = 0.02; this.bouncingSpeed = 0.03; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

           : this.rotationSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      this.bouncingSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
          .         dat.GUI      ,   : 
      

        
        
        
      

     
      

        
        
        
      

     var gui = new dat.GUI(); gui.add(controls, 'rotationSpeed',0,0.5); gui.add(controls, 'bouncingSpeed',0,0.5);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

      rotationSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
      bouncingSpeed
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
          0  0,5. ,      –  ,      render
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
           ,  ,         dat.GUI,           .    : 
      

        
        
        
      

     
      

        
        
        
      

     function render() { ... cube.rotation.x += controls.rotationSpeed; cube.rotation.y += controls.rotationSpeed; cube.rotation.z += controls.rotationSpeed; step+=controls.bouncingSpeed; sphere.position.x = 20+( 10*(Math.cos(step))); sphere.position.y = 2 +( 10*Math.abs(Math.sin(step))); ... }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

     ,    ,     ,          : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

         . 
      

        
        
        
      

     
      

        
        
        
      

      ASCII  
      

        
        
        
      

               3D-      . Three.js     ,      ,     .      ,         : ASCII .        ,      -ASCII,     .            : 
      

        
        
        
      

     
      

        
        
        
      

     $("#WebGL-output").append(renderer.domElement);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

      : 
      

        
        
        
      

     var effect = new THREE.AsciiEffect( renderer ); effect.setSize(window.innerWidth, window.innerHeight ); $("#WebGL-output").append(effect.domElement);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     
      

        
        
        
      

               .    renderer.render(scene, camera),    effect.render(scene,camera).       : 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

     
      

        
        
        
      

        . 
      

        
        
        
      

      ,      ,     ,       Three.js   . 
      

        
        
        
      

     
      

        
        
        
      

      
      

        
        
        
      

           .         ,     Three.js           . 
      

        
        
        
      

          ,      .        ,     Three.js. 
      

        
        
        
      

        ,   : GitHub

थ्री। जेएस सीखना। अध्याय 1: थ्री। जेएस का उपयोग करके हमारा पहला 3 डी दृश्य बनाना

एक HTML पेज संरचना बनाएँ

3D ऑब्जेक्ट्स को रेंडर करना और देखना

सामग्री, प्रकाश और छाया जोड़ना

आइए एनीमेशन के साथ हमारे दृश्य को जटिल करें

परिचय का अनुरोध कर रहा हूँअनामकरणफ्रेम () विधि

More articles: