threejs effects -2 AsciiEffect(生成ASCII码模型)

AsciiEffect实现物体ASCII码字化渲染效果①首先引用插件包，该js文件在threejs工程文件夹的example目录下的js/effects/可以找到<script type="text/javascript" src="js/effects/AsciiEffect.js" ></script>②实例化AsciiEffect对象，并传入参数（参数一：r...

凌风子夜

1162人浏览 · 2019-04-09 14:45:35

凌风子夜 · 2019-04-09 14:45:35 发布

AsciiEffect实现物体ASCII码字化渲染效果

①首先引用插件包，该js文件在threejs工程文件夹的example目录下的js/effects/可以找到

<script type="text/javascript" src="js/effects/AsciiEffect.js" ></script>

②实例化AsciiEffect对象，并传入参数（参数一：renderer对象，参数二：字符，参数三：是否开启转换），设置属性，添加到body中

				renderer=new THREE.WebGLRenderer({ 
					antialias:true,
				});
				renderer.setSize(window.innerWidth,window.innerHeight);
				renderer.setPixelRatio(window.devicePixelRatio);
				
				effect=new THREE.AsciiEffect(renderer,' !@#$%^&',{
					invert:true
				});
				effect.setSize(window.innerWidth,window.innerHeight);
				effect.domElement.style.color='white';
				effect.domElement.style.backgroundColor='black';
				document.body.appendChild(effect.domElement);//不同于前两种effects,该效果是独立渲染的，不依赖于renderer渲染

为看到最好效果，模型建议使用MeshPhongMaterial({flatShading:true})，并且添加并调整好灯光

③最后在循环渲染

function render(){
    effect.render(scene,camera);//该渲染基于renderer
}

效果例子查看地址

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>ASCII编码效果</title>
		<script type="text/javascript" src="js/three.js" ></script>
		<script type="text/javascript" src="js/controls/OrbitControls.js" ></script>
		<script type="text/javascript" src="js/libs/stats.min.js" ></script>
		<script type="text/javascript" src="js/libs/dat.gui.min.js" ></script>
		<script type="text/javascript" src="js/WebGL.js" ></script>
		<script type="text/javascript" src="js/effects/AsciiEffect.js" ></script>
		<style>
			body{
				padding: 0;
				margin: 0;
				overflow: hidden;
			}
		</style>
	</head>
	<body>
		<script>
			if(WEBGL.isWebGLAvailable()===false){alert("该浏览器不支持WebGL!");document.body.appendChild(WEBGL.getWebGLErrorMessage());}
			
			var scene,renderer,camera,controls,stats;	
			var effect;
			function init(){
				scene=new THREE.Scene();
								
				camera=new THREE.PerspectiveCamera(70,window.innerWidth/window.innerHeight,1,1000);
				camera.position.set(0,150,500);
				
				controls=new THREE.OrbitControls(camera);
				controls.enableDamping=true;
				controls.minDistance=0.1;
				controls.maxDistance=1000;
				
				stats=new Stats();
				document.body.appendChild(stats.domElement);
				
				var light=new THREE.PointLight(0xffffff,1.5);
				light.position.set(-500,-500,-500);
				scene.add(light);
				
				var light1 = new THREE.PointLight( 0xffffff );
				light1.position.set( 500, 500, 500 );
				scene.add(light1);
				
				renderer=new THREE.WebGLRenderer({ 
					antialias:true,
				});
				renderer.setSize(window.innerWidth,window.innerHeight);
				renderer.setPixelRatio(window.devicePixelRatio);
				
				effect=new THREE.AsciiEffect(renderer,' !@#$%^&',{
					invert:true
				});
				effect.setSize(window.innerWidth,window.innerHeight);
				effect.domElement.style.color='white';
				effect.domElement.style.backgroundColor='black';
				document.body.appendChild(effect.domElement);
			};
			
			var axes;var sphere;
			function initModel(){
				axes=new THREE.AxesHelper(30);
				axes.visible=false;
				scene.add(axes);
				
				var plane=new THREE.Mesh(new THREE.PlaneBufferGeometry(400,400,1),new THREE.MeshBasicMaterial({color:0xe0e0e0}));
				plane.position.y=-200;
				plane.rotation.x=-0.5*Math.PI;
				scene.add(plane);
				
				sphere=new THREE.Mesh(new THREE.SphereBufferGeometry(200,20,10),new THREE.MeshPhongMaterial({flatShading:true}));
				scene.add(sphere);
			}
				
			var setting;
			function initGui(){
				setting={
					axesVisible:false,
				};
				var gui=new dat.GUI();
				gui.add(setting,"axesVisible").onChange(function(e){
					axes.visible=e;
				});
			}
					
			function onWindowResize(){
				camera.aspect=window.innerWidth/window.innerHeight;
				camera.updateProjectionMatrix();
				renderer.setSize(window.innerWidth,window.innerHeight);
				effect.setSize(window.innerWidth,window.innerHeight);
			}
			
			var start=Date.now();
			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;
				
				effect.render(scene,camera);
			}
			
			function animate(){
				render();
				stats.update();
				controls.update();				
				window.onresize=onWindowResize();
				requestAnimationFrame(animate);
			}
			
			function threeStart(){
				init();
				initModel();
				initGui();
				animate();
			}
			threeStart();
		</script>
	</body>
</html>