<!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. C/C++ uchar的一个有趣用法

    本系列文章由 @yhl_leo 出品,转载请注明出处. 文章链接: http://blog.csdn.net/yhl_leo/article/details/51377490 图像处理中常常使用的一种 ...

  2. Pie POJ 3122 二分搜索

    Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 17324   Accepted: 5835   Special Judge ...

  3. 记一次ruby的安装

    1,下载rubyinstall 安装包及devkit包 登陆网站 :http://rubyinstaller.org/downloads/ 安装rubyinstall包时添加到环境变量 2,安装完in ...

  4. MyBatis 3模糊查询（like）写法（转）

    说明:以下写法可以同时支持XML和注解的形式. 1.SQL中字符串拼接 SELECT * FROM tableName WHERE name LIKE CONCAT(CONCAT('%', #{tex ...

  5. MOS文章翻译

    http://blog.csdn.net/column/details/msdnchina.html?&page=1 http://blog.csdn.net/staricqxyz/artic ...

  6. SQLServer到底支持多少连接数的并发？

    1)不启用连接池 当创建到101个连接的时候,就无法再创建新连接了.也就是说,如果连接字符串不做任何处理,我们的程序只能够跟SQLServer建立101个连接. 2)启用连接池 在连接字符串中加入代码 ...

  7. c++ 双冒号的作用

    转:原文:http://www.cnblogs.com/charley_yang/archive/2011/02/24/1964217.html #define FLY 10 #line 100 &q ...

  8. POJ2777 Count Color 线段树区间更新

    题目描写叙述: 长度为L个单位的画板,有T种不同的颜料.现要求按序做O个操作,操作分两种: 1."C A B C",即将A到B之间的区域涂上颜色C 2."P A B&qu ...

  9. 泛型和面向对象C++

    1. 在类内部定义的函数默觉得inline,内联函数应该在头文件里定义,由于其定义对编译器必须是可见的,以便编译器可以在调用点内联展开该函数的代码. 此时,仅有函数原型是不够的. 2.assert 3 ...

  10. Mongo 中间件 pre find 修改query

    需求:在所有find查询的时候,默认添加查询参数 name:bennman //创建一个query中间件 myMid.js module.exports = function(schema){ //这 ...