Three.js Example 注解 —— canvas_camera_orthographic2.html

谁借莪１个温暖的怀抱￠ 2023-07-14 10:40 2阅读 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 - combo camera - orthographic + perspective</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;
    				color: purple;
    			}
    			/*
    			未访问		a:link    {color:blue;}
    			已访问		a:visited {color:blue;}
    			鼠标悬停	a:hover   {color:red;}
    			鼠标按下	a:active  {color:yellow;}
    			*/
    			a {
    				color: red;
    			}
    		</style>
    	</head>
    	<body>
    		<script src="../build/three.js"></script>
    		
    		
    		<script src="js/cameras/CombinedCamera.js"></script>
    
    		
    		<script src="js/renderers/Projector.js"></script>
    		<script src="js/renderers/CanvasRenderer.js"></script>
    
    		
    		<script src="js/libs/stats.min.js"></script>
    
    		<div style="position: absolute; top: 10px; width: 100%; text-align: center; ">
    			<a href="http://threejs.org" target="_blank">three.js</a> - Combo Camera<br>
    			
    			View: <a href="#" onclick="setOrthographic();return false;"> Orthographic</a> |
    				<a href="#" onclick="setPerspective();return false;">Perspective</a><br>
    			(焦距)Lens: <a href="#" onclick="setLens(12);return false;">12mm</a> |
    				<a href="#" onclick="setLens(16);return false;">16mm</a> |
    				<a href="#" onclick="setLens(24);return false;">24mm</a> |
    				<a href="#" onclick="setLens(35);return false;">35mm</a> |
    				<a href="#" onclick="setLens(50);return false;">50mm</a> |
    				<a href="#" onclick="setLens(60);return false;">60mm</a> |
    				<a href="#" onclick="setLens(85);return false;">85mm</a> |
    				<a href="#" onclick="setLens(105);return false;">105mm</a><br>
    			(视场)Fov: <a href="#" onclick="setFov(30);return false;">30°</a> |
    				<a href="#" onclick="setFov(50);return false;">50°</a> |
    				<a href="#" onclick="setFov(70);return false;">70°</a> |
    				<a href="#" onclick="setFov(100);return false;">100°</a><br>
    			(缩放)Zoom: <a href="#" onclick="camera.setZoom(0.5);return false;">0.5x</a> |
    					<a href="#" onclick="camera.setZoom(1);return false;">1x</a> |
    					<a href="#" onclick="camera.setZoom(2);return false;">2x</a> |
    
    				<br/>
    			Views: <a href="#" onclick="camera.toTopView();lookAtScene=false;return false;">Top view</a> |
    				<a href="#" onclick="camera.toBottomView();lookAtScene=false;return false;">Bottom view</a> |
    				<a href="#" onclick="camera.toLeftView();lookAtScene=false;return false;">Left view</a> |
    				<a href="#" onclick="camera.toRightView();lookAtScene=false;return false;">Right view</a> |
    				<a href="#" onclick="camera.toFrontView();lookAtScene=false;return false;">Front view</a> |
    				<a href="#" onclick="camera.toBackView();lookAtScene=false;return false;">Back view</a> |
    				<a href="#" onclick="lookAtScene=true;return false;">Look at Scene</a>
    				<br/>
    			<div id="fov"></div>
    		</div>
    		<script>
    			var container, stats;
    			var camera, scene, renderer;
    			var lookAtScene = true;
    
    			init();
    			animate();
    
    			//Fov(Field of View，视场)
    			function setFov( fov ) {
    				camera.setFov( fov );
    
    				document.getElementById('fov').innerHTML = 'FOV '+ fov.toFixed(2) +'°' ;
    			}
    
    			//焦距(Focal Length)
    			function setLens( lens ) {
    				// try adding a tween effect while changing focal length, and it'd be even cooler!
    				// 尝试当改变焦距时，添加一个在两者之间的效果，这不是更酷
    				var fov = camera.setLens( lens );
    
    				document.getElementById('fov').innerHTML = 'Converted ' + lens + 'mm lens to FOV '+ fov.toFixed(2) +'°' ;
    			}
    
    			//切换为正交相机
    			function setOrthographic() {
    				camera.toOrthographic();
    				document.getElementById('fov').innerHTML = 'Orthographic mode' ;
    			}
    
    			//切换为透视相机
    			function setPerspective() {
    				camera.toPerspective();
    				document.getElementById('fov').innerHTML = 'Perspective mode' ;
    			}
    
    			function init() {
    				container = document.createElement( 'div' );
    				document.body.appendChild( container );
    				
    				//透视相机的near必须在相机位置前，而正交相机的near也可以在相机之后
    				camera = new THREE.CombinedCamera( window.innerWidth / 2, window.innerHeight / 2, 70, 1, 1000, - 500, 1000 );
    				//定义相机的位置，有如下两种方式。如果不设置的话，相机位置为默认的Vector3{x:0,y:0,z:0}
    				//camera.position.x = 200;
    				//camera.position.y = 100;
    				//camera.position.z = 200;
    				camera.position.set(200,100,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
    				//环境光，提供的是在不同位置和方向上强度都相同的光源，相当于光照模型中各物体之间的反射光，因此通常用来表现光强中非常弱的那部分光
    				var ambientLight = new THREE.AmbientLight( Math.random() * 0x10 );
    				scene.add( ambientLight );
    				
    				//平行光，也称作无限光，平行光光源就如同太阳，若在场景中添加了一个平行光，它可以影响场景中的所有物体，而无论平行光光源设置在任何位置。平行光的方向为它的位置指向场景中心。
    				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.setSize( window.innerWidth, window.innerHeight );
    					//更新透视相机的投影矩阵
    					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;
    				
    				//调整相机视角，对着场景中央
    				if ( lookAtScene ) 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/