THREE.js代码备份——canvas_ascii_effect(以AscII码显示图形)

时间：2016-08-05 21:33:49 阅读：195 评论：0 收藏：0 [点我收藏+]

标签：

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

标签：

原文地址：http://www.cnblogs.com/ForRickHuan/p/5742747.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行