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