zoukankan      html  css  js  c++  java
  • THREE.js代码备份——canvas_ascii_effect(以AscII码显示图形)

    <!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>
  • 相关阅读:
    最接近原点的 K 个点
    水域大小
    根据数字二进制下 1 的数目排序
    有效的山脉数组
    岛屿的周长
    求根到叶子节点数字之和
    数组中的最长山脉
    [转] 结构体file_operations
    获取主机硬件资源 函数
    readdir() 获取文件类型
  • 原文地址:https://www.cnblogs.com/ForRickHuan/p/5742747.html
Copyright © 2011-2022 走看看