<!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. router-link/ router-view 的使用

    遇到的问题如下: 在菜单栏使用router-link配置菜单连接地址,使用router-view 显示连接地址的详细内容 首次配置的时候,使用router-link 配置好菜单之后,不知道如何使用ro ...

  2. 在docker上构建tomcat容器

    1.查看docker上的镜像 [root@holly ~]# docker images REPOSITORY TAG IMAGE ID CREATED SIZE mysql 5.6 73829d7b ...

  3. 洛谷——P2347 砝码称重

    https://www.luogu.org/problem/show?pid=2347#sub 题目描述 设有1g.2g.3g.5g.10g.20g的砝码各若干枚(其总重<=1000), 输入输 ...

  4. RDS for MySQL Mysqldump 常见问题和处理

    https://help.aliyun.com/knowledge_detail/41732.html?spm=5176.7841698.2.13.u67H3h

  5. Openfire：通过Servlet群发消息

    在Openfire中自带有Broadcase插件,可以让我们群发消息给全部用户或者组.不过如果是我们通过Servlet来实现这一功能,那么是能够增加一定的灵活性的.具体做法直接看Demo代码: pub ...

  6. c++ 11 thread 初试

    最新的 c++11标准整合进了 线程支持.以下写一个小程序測试一下. 測试代码: #include <iostream> #include <thread> void hell ...

  7. iOS学习（3）

    4. 这个写法会出什么问题: @property (copy) NSMutableArray *array; 两个问题:1.加入,删除,改动数组内的元素的时候,程序会由于找不到相应的方法而崩溃.由于 ...

  8. 在Win7中修改 系统盘中 “系统” - “用户” 的环境变量映射关系

    1.在此列表中,选中对应登录帐号 HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows NT\CurrentVersion\ProfileList 2.将Prof ...

  9. luogu1063 能量项链

    题目大意 有一串项链,项链上的每个珠子有首尾两个数字,首尾相连的两个珠子的尾数字和头数字相同.每次选择相连的一对珠子,得到第一个项链的首数字*第一个项链的尾数字(第二个项链的首数字)*第二个项链的尾数 ...

  10. Java-java-com-util-common-service：TreeService.java

    ylbtech-Java-java-com-util-common-service:TreeService.java 1.返回顶部 1. package com.shineyoo.manager.ut ...