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>