zoukankan      html  css  js  c++  java
  • THREE.js代码备份——canvas_ascii_effect(以AscII码显示图形)

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>three.js - ASCII Effect</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <style>
            body {
                font-family: Monospace;
                background-color: #f0f0f0;
                margin: 0px;
                overflow: hidden;
            }
        </style>
    </head>
    <body>
    
    <script src="../build/three.js"></script>
    
    <script src="js/controls/TrackballControls.js"></script>
    <script src="js/effects/AsciiEffect.js"></script>
    
    <script src="js/renderers/Projector.js"></script>
    <script src="js/renderers/CanvasRenderer.js"></script>
    
    <script src="js/libs/stats.min.js"></script>
    
    <script>
    
        var container, stats;
    
        var camera, controls, scene, renderer;
    
        var sphere, plane;
    
        var start = Date.now();
    
        init();
        animate();
    
        function init() {
    
            var width = window.innerWidth || 2;
            var height = window.innerHeight || 2;
    
            container = document.createElement( 'div' );
            document.body.appendChild( container );
    
            var info = document.createElement( 'div' );
            info.style.position = 'absolute';
            info.style.top = '10px';
            info.style.width = '100%';
            info.style.textAlign = 'center';
            info.innerHTML = 'Drag to change the view';
            container.appendChild( info );
    
            camera = new THREE.PerspectiveCamera( 70, width / height, 1, 1000 );
            camera.position.y = 150;
            camera.position.z = 500;
    
            controls = new THREE.TrackballControls( camera );
    
            scene = new THREE.Scene();
    
            var light = new THREE.PointLight( 0xffffff );
            light.position.set( 500, 500, 500 );
            scene.add( light );
    
            var light = new THREE.PointLight( 0xffffff, 0.25 );
            light.position.set( - 500, - 500, - 500 );
            scene.add( light );
    
            sphere = new THREE.Mesh( new THREE.SphereGeometry( 200, 20, 10 ), new THREE.MeshPhongMaterial({ color:0xffcc00 }) );
            scene.add( sphere );
    
    
            // Plane
    
            plane = new THREE.Mesh( new THREE.PlaneBufferGeometry( 400, 400 ), new THREE.MeshBasicMaterial( { color: 0xffcc00 } ) );
            plane.position.y = - 200;
            plane.rotation.x = - Math.PI / 2;
            scene.add( plane );
    
            renderer = new THREE.CanvasRenderer();
            renderer.setClearColor( 0xf0f0f0 );
            renderer.setSize( width, height );
            // container.appendChild( renderer.domElement );
    
            //注意是effect
            effect = new THREE.AsciiEffect( renderer );
            effect.setSize( width, height );
            container.appendChild( effect.domElement );
    
            stats = new Stats();
            container.appendChild( stats.dom );
    
            //
    
            window.addEventListener( 'resize', onWindowResize, false );
    
        }
    
        function onWindowResize() {
    
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
    
            renderer.setSize( window.innerWidth, window.innerHeight );
            effect.setSize( window.innerWidth, window.innerHeight );
    
        }
    
        //
    
        function animate() {
    
            requestAnimationFrame( animate );
    
            stats.begin();
            render();
            stats.end();
    
        }
    
        function render() {
    
            var timer = Date.now() - start;
    
            sphere.position.y = Math.abs( Math.sin( timer * 0.002 ) ) * 150;
            sphere.rotation.x = timer * 0.0003;
            sphere.rotation.z = timer * 0.0002;
    
            controls.update();
    
            effect.render( scene, camera );  //注意与render区分
            //renderer.render(scene,camera);
    
        }
    
    </script>
    </body>
    </html>
  • 相关阅读:
    ASP.NET MVC案例——————拦截器
    Windows Azure Virtual Network (10) 使用Azure Access Control List(ACL)设置客户端访问权限
    Windows Azure Storage (20) 使用Azure File实现共享文件夹
    Windows Azure HandBook (5) Azure混合云解决方案
    Windows Azure Service Bus (6) 中继(Relay On) 使用VS2013开发Service Bus Relay On
    Azure PowerShell (9) 使用PowerShell导出订阅下所有的Azure VM的Public IP和Private IP
    Windows Azure Service Bus (5) 主题(Topic) 使用VS2013开发Service Bus Topic
    Azure China (9) 在Azure China配置CDN服务
    Windows Azure Storage (19) 再谈Azure Block Blob和Page Blob
    Windows Azure HandBook (4) 分析Windows Azure如何处理Session
  • 原文地址:https://www.cnblogs.com/ForRickHuan/p/5742747.html
Copyright © 2011-2022 走看看