Three.js Example 注解 —— canvas_ascii_effect.html

最新推荐文章于 2022-01-20 15:57:32 发布

福州司马懿

最新推荐文章于 2022-01-20 15:57:32 发布

阅读量1k

点赞数

分类专栏： # Three.js

转载请注明出处——https://blog.csdn.net/chy555chy

本文链接：https://blog.csdn.net/chy555chy/article/details/104858078

版权

Three.js 专栏收录该内容

47 篇文章 4 订阅

订阅专栏

本文搬自我的Github，https://github.com/555chy/three.js-example-comment，有兴趣的可以一起来完善，这个为Three.js的Example进行注解，方便初学者阅读

three.js 官网 Example 地址：https://threejs.org/examples/

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>three.js - ASCII Effect</title>
		<meta charset="utf-8">
		<!--
		如果没有设置viewport的width的话，网页很可能会超出手机屏幕宽度，具体多宽，要看浏览器定义的默认宽度是多少
		user-scalable=no，规定了用户不能缩放网页，但有些浏览器对该项支持不是很好，故需要设置minimum-scale和maximum-scale相同来限制用户缩放
		-->
		<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>
		
		<!-- ASCII文本画效果 -->
		<script src="js/effects/AsciiEffect.js"></script>

		<!--
		想要使用CanvasRenderer，必须添加如下两个js文件 
		Projector.js顾名思义上将3d图像投影到Canvas("2d")上，如果没有该文件会报如下错误
		THREE.Projector has been moved to /examples/js/renderers/Projector.js. three.js:42883:3
		TypeError: THREE.RenderableVertex is not a constructor 
		-->
		<script src="js/renderers/Projector.js"></script>
		<script src="js/renderers/CanvasRenderer.js"></script>

		<!--
		统计插件(FPS，渲染时间，chrome内存使用率)，min表示js代码经过压缩
		-->
		<script src="js/libs/stats.min.js"></script>

		<script>
			var container, stats;

			var camera, controls, scene, renderer;

			var sphere, plane;

			//Date.now()得到的是当前时间戳，单位毫秒
			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';
				/*
				relative的div：width默认是window.innerWidth
				absolute的div：width默认是内容大小
				*/
				info.style.width = '100%';
				info.style.textAlign = 'center';
				info.textContent = 'Drag to change the view';
				//info.innerHTML = 'Drag to change the view';
				container.appendChild( info );

				/*
				透视相机
				PerspectiveCamera(fov, aspect, near, far)
                    fov(视场)：从相机位置能够看到的部分场景。推荐默认值45
                    aspect(长宽比)：渲染结果输出区域的横向长度和纵向长度的比值。推荐默认值window.innerWidth/window.innerHeight
                    near(近面)：定义从距离相机多近的地方开始渲染场景。推荐默认值0.1
                    far(远面)：定义相机可以从它所处的位置看多远。默认值1000
                */
				camera = new THREE.PerspectiveCamera( 70, width / height, 1, 1000 );
				//定义相机的位置，有如下两种方式。如果不设置的话，相机位置为默认的Vector3{x:0,y:0,z:0}
                //camera.position.set(0,150,500);
				camera.position.y = 150;
				camera.position.z = 500;

				//设置鼠标控制的对象为相机
				controls = new THREE.TrackballControls( camera );

				scene = new THREE.Scene();

				/*
				点光源，空间中的一点，朝所有方向发射光线 
				PointLight( color, intensity, distance, decay );
					color：光的颜色
					intensity：光照强度，默认为1
					distance：光最长能照射的距离，默认为0
					decay：光的衰减系数，默认为1
				*/
				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.MeshLambertMaterial() );
				//没有设置position，默认是{x:0,y:0,z:0}
				scene.add( sphere );

				// Plane
				/*
				MeshBasicMaterial：与光照无关，仅根据材质的颜色或贴图来渲染物体
					color：材质的颜色
					map：材质的贴图
					wireframe: 显示三角形线框还是显示面
					side：可选的值有THREE.FrontSide(仅渲染正面)、THREE.BackSide(仅渲染背面)、THREE.DoubleSide(双面渲染)
					overdraw:过渡描绘。如果用THREE.CanvasRenderer对象，有缝隙时需设置该值。例如当前如果使用0.5以下的值，三角形的分界线就很明显。但是使用WebGLRenderer则不会有分割线
				*/
				plane = new THREE.Mesh( new THREE.PlaneBufferGeometry( 400, 400 ), new THREE.MeshBasicMaterial( { color: 0xe0e0e0 } ) );
				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 );

				
				//使用renderer初始化Ascii效果
				effect = new THREE.AsciiEffect( renderer );
				//设置需要ASCII渲染场景的大小，如果不设置则不会渲染出任何图像，如果设置的比renderer的小(或大)则会进行缩放(或放大)
				effect.setSize( width, height );
				container.appendChild( effect.domElement );
				
				//如果不适用AsciiEffect，则直接将renderer的domElement元素加入布局即可
				//container.appendChild( renderer.domElement );

				//统计插件(FPS，渲染时间，chrome内存使用率)
				stats = new Stats();
				//这里注意，统计插件的dom元素是"dom"，而不是domElement
				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 );
				//这里可以在render前后使用stats.begin和stats.end，也可以在每次渲染的时候调用一次stats.update
				stats.begin();
				render();
				stats.end();
			}

			function render() {
				//计算从开始到现在一共经过了多少毫秒
				var timer = Date.now() - start;
				
				sphere.position.y = Math.abs( Math.sin( timer * 0.002 ) ) * 150;
				//按照右手螺旋定则绕X轴旋转
				//sphere.rotation.x = timer * 0.0003;
				sphere.rotateX(timer * 0.0003);
				//按照右手螺旋定则绕Z轴旋转
				//sphere.rotation.z = timer * 0.0002;
				sphere.rotateZ(timer * 0.0002);

				//更新轨迹控制器，这里轨迹控制器与相机关联，所以也会更新相机的位置和角度。注意这里就不用设置相机的lookAt了
				controls.update();

				effect.render( scene, camera );
				//renderer.render( scene, camera );
			}
		</script>
	</body>
</html>