<!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. JavaWeb+MySql分页封装

    前段时间因为需要所以写一个JavaWeb+MySql的分页封装类,附上代码.技术有限写得不好请多多指教. 1.首先贴上Eneity类 package com.zx.pageUtil; import j ...

  2. 清北学堂模拟赛d2t4 最大值(max)

    题目描述LYK有一本书,上面有很多有趣的OI问题.今天LYK看到了这么一道题目:这里有一个长度为n的正整数数列ai(下标为1~n).并且有一个参数k.你需要找两个正整数x,y,使得x+k<=y, ...

  3. JS判断浏览器类型和屏幕分辨率来调用不同的CSS样式

    代码如下: <!-- if (window.navigator.userAgent.indexOf("MSIE")>=1) { var IE1024="&qu ...

  4. Configuration must specify a spooling directory

    启动spooling源时报错: 原因:spooling配置文件有误 a1.sources.r1.type = spooldir a1.sources.r1.spooldir = /usr/local/ ...

  5. bootstrap-table设置height后表头与内容无法对齐的问题

    bootstrap-table项目官网:https://github.com/wenzhixin/bootstrap-table bootstrap-table各版本下载:https://github ...

  6. 怎样给你的Android 安装文件（APK）瘦身

    本文源地址:怎样给你的Android 安装文件(APK)瘦身 Android的apk文件越来越大了这已经是一个不争的事实. 在Android 还是最初版本号的时候,一个app的apk文件大小也还仅仅有 ...

  7. android 用java代码设置布局、视图View的宽度/高度或自适应

    在achat项目中,对话内容的长宽设置为自适应.可是假设文本内容太多,则宽度几乎相同布满,若自己说的和对方说的都非常多内容.则满屏都是文字.则不easy分辨出是来自别人说的还是自己说的.那么须要对本身 ...

  8. hdu 1010 Tempter of the Bone （奇偶性剪枝）

    题意:有一副二维地图'S'为起点,'D'为终点,'.'是可以行走的,'X'是不能行走的.问能否只走T步从S走到D? 题解:最容易想到的就是DFS暴力搜索,,但是会超时...=_=... 所以,,要有其 ...

  9. 前端页面a标签嵌套a标签效果的两种解决方案

    这是由工作中的一个小改动需求得到的这个解决方案的:那个需求是这样的,如图: 需求原来是球队名字没有点击功能的,而蓝色方框两队之间的比赛点击的时候会跳转到比赛文字直播页面.现在需要要求点击球队名字要跳转 ...

  10. the solution of CountNonDivisible by Codility

    question:https://codility.com/programmers/lessons/9 To solve this question , I get each element's di ...