Three.js Example 注解 —— canvas_camera_orthographic.html

迈不过友情╰ 2023-07-14 10:38 41阅读 0赞

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

three.js 官网 Example 地址：[https://threejs.org/examples/][https_threejs.org_examples]

<!DOCTYPE html>
    <html lang="en">
    	<head>
    		<title>three.js canvas - camera - orthographic</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/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, scene, renderer;
    
    			init();
    			animate();
    
    			function init() {
    				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 = '<a href="http://threejs.org" target="_blank">three.js</a> - orthographic view';
    				container.appendChild( info );
    
    				/*
    				正投影相机
    				function OrthographicCamera( left, right, top, bottom, near, far )
    					left(左边界):	可被渲染空间的最左面
    					right(右边界):	可被渲染空间的最右面
    					top(上边界):	可被渲染空间的最上面
    					bottom(下边界):	可被渲染空间的最下面
    					near(近面):		可被渲染空间的最近面
    					far(远面):		可被渲染空间的最远面
    				*/
    				camera = new THREE.OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, - 500, 1000 );
    				//定义相机的位置，有如下两种方式。如果不设置的话，相机位置为默认的Vector3{x:0,y:0,z:0}
                    //camera.position.set(200,100,200);
    				camera.position.x = 200;
    				camera.position.y = 100;
    				camera.position.z = 200;
    
    				scene = new THREE.Scene();
    
    				// Grid
    
    				var size = 500, step = 50;
    
    				var geometry = new THREE.Geometry();
    
    				//绘制网格
    				for ( var i = - size; i <= size; i += step ) {
    					//从左下角到右上角，先画横线，在画竖线
    					//绘制与X轴平行的横线
    					geometry.vertices.push( new THREE.Vector3( - size, 0, i ) );
    					geometry.vertices.push( new THREE.Vector3(   size, 0, i ) );
    					//绘制与Z轴平行的竖线
    					geometry.vertices.push( new THREE.Vector3( i, 0, - size ) );
    					geometry.vertices.push( new THREE.Vector3( i, 0,   size ) );
    				}
    
    				var material = new THREE.LineBasicMaterial( { color: 0x000000, opacity: 0.2 } );
    
    				/*
    				THREE.Line使用WebGL中的gl.LINE_STRIP(一系列的连续直线，即折线)渲染
    				THREE.LineSegments使用WebGL中的gl.LINES(每一对顶点被解释为一条直线，即线段)渲染
    				*/
    				var line = new THREE.LineSegments( geometry, material );
    				scene.add( line );
    
    				// Cubes
    				var geometry = new THREE.BoxGeometry( 50, 50, 50 );
    				/*
    				MeshLambertMaterial，这种材质会考虑光照的影响，可以用来创建颜色暗淡的、不光亮的物体
    				color: 即diffuse，漫射颜色，默认为0xffffff，白色
    				ambient: 环境色，默认为0xffffff, 白色, 乘以环境光得到对象的颜色
    				emissive: 自发光(荧光)颜色，默认为0x000000,黑色，实体颜色，不受其他灯光的影响.
    				overdraw: 过渡描绘。如果用THREE.CanvasRenderer对象，有缝隙时需设置该值。例如当前如果使用0.5以下的值，三角形的分界线就很明显。但是使用WebGLRenderer则不会有分割线
    				morphTargets: 表示是否启用变形
    				*/
    				var material = new THREE.MeshLambertMaterial( { color: 0xffffff, overdraw: 0.5 } );
    
    				for ( var i = 0; i < 100; i ++ ) {
    					var cube = new THREE.Mesh( geometry, material );
    					
    					//对Y方向上的高度进行[1,2]的缩放
    					cube.scale.y = Math.floor( Math.random() * 2 + 1 );
    					
    					//cube.position为立方体的中心
    					cube.position.x = Math.floor( ( Math.random() * 1000 - 500 ) / 50 ) * 50 + 25;
    					cube.position.y = ( cube.scale.y * 50 ) / 2;
    					cube.position.z = Math.floor( ( Math.random() * 1000 - 500 ) / 50 ) * 50 + 25;
    
    					scene.add( cube );
    
    				}
    
    				// Lights
    				/*
    				环境光，提供的是在不同位置和方向上强度都相同的光源，它的颜色会添加到整个场景和所有对象的当前颜色上，相当于光照模型中各物体之间的反射光，因此通常用来表现光强中非常弱的那部分光
    				AmbientLight( color, intensity)
    				color		光源的颜色
    				intensity	光照强度，默认为1
    				*/
    				var ambientLight = new THREE.AmbientLight( Math.random() * 0x10 );
    				scene.add( ambientLight );
    
    				/*
    				平行光，也称作无限光，平行光光源就如同太阳，若在场景中添加了一个平行光，它可以影响场景中的所有物体，而无论平行光光源设置在任何位置。平行光的方向为它的位置朝向场景中心。
    				DirectionalLight( color, intensity)
    				color		光源的颜色
    				intensity	光照强度，默认为1
    				*/
    				var directionalLight = new THREE.DirectionalLight( Math.random() * 0xffffff );
    				directionalLight.position.x = Math.random() - 0.5;
    				directionalLight.position.y = Math.random() - 0.5;
    				directionalLight.position.z = Math.random() - 0.5;
    				//normalize(): 单位化向量，使其长度为1
    				directionalLight.position.normalize();
    				scene.add( directionalLight );
    
    				var directionalLight = new THREE.DirectionalLight( Math.random() * 0xffffff );
    				directionalLight.position.x = Math.random() - 0.5;
    				directionalLight.position.y = Math.random() - 0.5;
    				directionalLight.position.z = Math.random() - 0.5;
    				directionalLight.position.normalize();
    				scene.add( directionalLight );
    
    				renderer = new THREE.CanvasRenderer();
    				//设置渲染器的"清除色"和"透明度"
    				renderer.setClearColor( 0xf0f0f0 );
                    //设置屏幕像素比，与Android上的DIP相仿，作用是在所有设备上的显示效果都相近
    				renderer.setPixelRatio( window.devicePixelRatio );
    				//设置待渲染场景的大小
    				renderer.setSize( window.innerWidth, window.innerHeight );
    				//将渲染器的DOM元素(即Canvas)添加到HTML中
    				container.appendChild( renderer.domElement );
    
    				//统计插件(FPS，渲染时间，chrome内存使用率)
    				stats = new Stats();
    				//这里注意，统计插件的dom元素是"dom"，而不是domElement
    				container.appendChild( stats.dom );
    
    				window.addEventListener( 'resize', onWindowResize, false );
    			}
    
    			function onWindowResize() {
    				//重新调整正投影相机的上下左右4个面
    				camera.left = window.innerWidth / - 2;
    				camera.right = window.innerWidth / 2;
    				camera.top = window.innerHeight / 2;
    				camera.bottom = window.innerHeight / - 2;
    				//更新透视相机的投影矩阵
    				camera.updateProjectionMatrix();
    				//重新设置渲染场景的大小
    				renderer.setSize( window.innerWidth, window.innerHeight );
    			}
    
    			function animate() {
    				requestAnimationFrame( animate );
    
    				//这里可以在render前后使用stats.begin和stats.end，也可以在每次渲染的时候调用一次stats.update
    				stats.begin();
    				render();
    				stats.end();
    			}
    
    			function render() {
    				//Date.now()得到的是当前时间戳，单位毫秒
    				var timer = Date.now() * 0.0001;
    				
    				//相机绕着场景中央，在半径200的圆周上往复运动
    				camera.position.x = Math.cos( timer ) * 200;
    				camera.position.z = Math.sin( timer ) * 200;
    				
    				//调整相机视角，对着场景中央
    				camera.lookAt( scene.position );
    
    				renderer.render( scene, camera );
    			}
    		</script>
    	</body>
    </html>

[https_github.com_555chy_three.js-example-comment]: https://github.com/555chy/three.js-example-comment
[https_threejs.org_examples]: https://threejs.org/examples/