<!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. linux学习8-正则表达式基础

    正则表达式基础 实验介绍 虽然我们这一节的标题是正则表达式,但实际这一节实验只是介绍grep,sed,awk这三个命令,而正则表达式作为这三个命令的一种使用方式(命令输出中可以包含正则表达式).正则表 ...

  2. （39.1） Spring Boot Shiro权限管理【从零开始学Spring Boot】

    (本节提供源代码,在最下面可以下载)距上一个章节过了二个星期了,最近时间也是比较紧,一直没有时间可以写博客,今天难得有点时间,就说说Spring Boot如何集成Shiro吧.这个章节会比较复杂,牵涉 ...

  3. noip模拟赛 对刚

    3 分析:约瑟夫环问题,可以用链表模拟做,也可以套用公式,比较水. #include <cmath> #include <cstdio> #include <cstrin ...

  4. oracle导入少量数据（少于10M）

    工具用PL/SQL Developer select * from temp1 for update;开锁,点+号,直接从Excel复制,然后粘贴. 程序猿必读

  5. Linux终止进程的工具kill/killall/pkill/xkill/skill用法区别（转）

    一. 终止进程的工具kill .killall.pkill.xkill 终止一个进程或终止一个正在运行的程序,一般是通过kill .killall.pkill.xkill等进行.比如一个程序已经死掉, ...

  6. PHP array_combine()

    定义和用法 array_combine() 函数通过合并两个数组来创建一个新数组,其中的第一个数组是键(索引),第二个数组为值. 如果其中一个数组为空,或者两个数组的长度不同,则该函数返回 false ...

  7. HIHO 16 C

    树分治.对于一棵子树的根节点,至少有一条边与儿子相连的属于重边.对于一条轻边,它的贡献值是两端子树大小的乘积,所以,重边应该是贡献值最大的一边. 至于要求所有的点,进行深度优先搜索,因为移动一个点只会 ...

  8. LA 3695 部分枚举

    运用部分枚举的思想,很明显完全枚举点的思想是不可能的.改为枚举上下边界,当确定右边界j后,对左边界i,可以有点数为on[j]+on[i]+(leftu[j]-leftu[i])+leftd[j]-le ...

  9. Flash-制作空心文字

    常常看到站点上用很多空心文字作为站点的名称或者特色项目的名称等等,那这些空心文字是怎么做出来的呢? 用Flash事实上非常快就能做出来.过程例如以下: (1)新建空白文件.工具箱中选择"文本 ...

  10. tabBar颜色改动

    //未点击的颜色 [[UITabBarItem appearance] setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKey ...