<!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>

THREE.js代码备份——canvas_ascii_effect(以AscII码显示图形)的更多相关文章

  1. JS获取字符对应的ASCII码

    有时候会需要用到字符的ASCII码,一时之间调试时可能会忘记字符与ASCII码对应的数字. 最近喜欢用浏览器控制台直接跑JS代码,将这个代码直接贴到浏览器控制台,即可调试(谷歌浏览器快捷键 ctrl+ ...

  2. THREE.js代码备份——canvas - lines - colors(希尔伯特曲线3D、用HSL设置线颜色)

    <!DOCTYPE html> <html lang="en"> <head> <title>three.js canvas - l ...

  3. HTML5 脚本 语言代码 URL 符号实体 ASCII码 颜色

    1.HTML<noscript> 标签 <noscript> 标签提供无法使用脚本时的替代内容,比方在浏览器禁用脚本时,或浏览器不支持客户端脚本时. <noscript& ...

  4. THREE.js代码备份——canvas_lines(随机点、画线)

    <!DOCTYPE html> <html lang="en"> <head> <title>three.js canvas - l ...

  5. THREE.js代码备份——线框cube、按键、鼠标控制

    <!DOCTYPE html> <html lang="en"> <head> <title>three.js canvas - g ...

  6. THREE.js代码备份——webgl - scene animation（通过加载json文件来加载动画和模型）

    <!DOCTYPE html> <html lang="en"> <head> <title>three.js webgl - sc ...

  7. THREE.js代码备份——webgl - geometry - dynamic(模拟海浪，通过时间（毫秒）来控制平面点的运动模拟海浪，鼠标控制写在另外的js中)

    HTML: <!DOCTYPE html> <html lang="en"> <head> <title>three.js webg ...

  8. THREE.js代码备份——canvas - geometry - earth(球体贴纹理)

    <!DOCTYPE html> <html lang="en"> <head> <title>three.js canvas - g ...

  9. THREE.js代码备份——webgl - custom attributes [lines]（自定义字体显示、控制字图的各个属性）

    <!DOCTYPE html> <html lang="en"> <head> <title>three.js webgl - cu ...

随机推荐

  1. hdu2000 ASCII码排序【C++】

    ASCII码排序 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Su ...

  2. Sencha Touch 2.1 Chart属性中文解释

    图表的几大要素: 1.坐标:上.下.左.右. 坐标的类型,数字.分类... 坐标包含需要显示的坐标值,即绑定的字段 坐标值的样式,比如旋转.字体大小.格式 坐标的最大值.最小值.是否显示网格 坐标旁边 ...

  3. cogs 826. [Tyvj Feb11] GF打dota

    826. [Tyvj Feb11] GF打dota ★★☆   输入文件:dota.in   输出文件:dota.out   简单对比时间限制:1 s   内存限制:128 MB 众所周知,GF同学喜 ...

  4. F1: A Distributed SQL Database That Scales GOOGLE F1 论文

    http://research.google.com/pubs/pub41344.html http://research.google.com/pubs/pub36726.html

  5. iOS：解决pod的Insecure world writable dir问题

    当我们运行pod setup的命令的时候,有时候会碰到这个警告: /Library/Ruby/Gems/2.0.0/gems/cocoapods-0.33.1/lib/cocoapods/execut ...

  6. HDU 5226

    公式啊,公式啊....TAT 杭电题解.....高中生...... 对于卢卡斯定理,由于p较大,所以不可能按一般的来算,n,m较小,循处理出n!的逆元对p的,然后可以按照卢卡斯定理,降低,对后面的就可 ...

  7. 使用Linq 查询数据 构建对象 select new{}

    linq 查询数据 /// <summary> /// 汽车品牌及车型 /// </summary> /// <returns></returns> p ...

  8. cocos2d-x 3.7 win7 32+Android 环境配置

    之前用的cocos2d-x 2.2.6 版本号,近期换成了3.7.眼下的最新版.整个过程中也碰到了不少问题.如今已经成功移植到手机上了. 分享下整个过程,希望能帮到别人.(所需软件已打包) [下载软件 ...

  9. WPF学习笔记——在“System.Windows.StaticResourceExtension”上提供值时引发了异常

    在"System.Windows.StaticResourceExtension"上提供值时引发了异常 因应需要,写了一个转换器,然后窗体上引用,结果就出来这个错.编译的时候没事, ...

  10. luogu2152 [SDOI2009]SuperGCD

    要你求两个非常大的数字的GCD. 不要想复杂,用高精度整更相减损术即可. #include <cstdio> #include <cstring> #include <a ...