Three.js Example 注解 —— canvas_lines_dashed.html

你的名字 2023-07-14 10:44 13阅读 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 - dashed lines</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 {
    				color: #ffffff;
    				font-family:Monospace;
    				font-size:13px;
    				text-align:center;
    				font-weight: bold;
    
    				background-color: #000000;
    				margin: 0px;
    				overflow: hidden;
    			}
    			#info {
    				color: #fff;
    				position: absolute;
    				top: 0px; width: 100%;
    				padding: 5px;
    				z-index:100;
    			}
    		</style>
    	</head>
    
    	<body>
    		<div id="info"><a href="http://threejs.org" target="_blank">three.js</a> - dashed lines example</div>
    		<div id="container"></div>
    
    		<script src="../build/three.js"></script>
    
    		
    		<script src="js/renderers/Projector.js"></script>
    		<script src="js/renderers/CanvasRenderer.js"></script>
    
    		
    		<script src="js/geometries/hilbert3D.js"></script>
    
    		
    		<script src="js/Detector.js"></script>
    		
    		
    		<script src="js/libs/stats.min.js"></script>
    
    		<script>
    			//如果不支持webgl，则会在当前的父布局上添加一个不支持的提示信息DIV
    			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
    
    			var renderer, scene, camera, stats;
    			var objects = [];
    			var WIDTH = window.innerWidth,
    				HEIGHT = window.innerHeight;
    
    			init();
    			animate();
    
    			function init() {
    				/*
    				透视相机
    				PerspectiveCamera(fov, aspect, near, far)
                        fov(视场)：从相机位置能够看到的部分场景。推荐默认值45
                        aspect(长宽比)：渲染结果输出区域的横向长度和纵向长度的比值。推荐默认值window.innerWidth/window.innerHeight
                        near(近面)：定义从距离相机多近的地方开始渲染场景。推荐默认值0.1
                        far(远面)：定义相机可以从它所处的位置看多远。默认值1000
                    */
    				camera = new THREE.PerspectiveCamera( 60, WIDTH / HEIGHT, 1, 200 );
    				camera.position.z = 150;
    
    				scene = new THREE.Scene();
    				/*
    				场景的两种雾化效果(这里没有打光，因此雾不会显示出来)
    				1. scene.fog = new THREE.Fog(color, near, far)
    				第一个参数是雾化效果或者颜色(0xffffff)，后面两个属性用来调节雾的显示，重什么地方开始到什么地方结束
    				2. scene.fog = new THREE.Fog(color, concentration)
    				第一个参数是雾化效果或者颜色(0xffffff)，第二个参数是雾的浓度(0.015)
    				*/
    				scene.fog = new THREE.Fog( 0x111111, 150, 200 );
    
    				root = new THREE.Object3D();
    
    				//样条曲线分的段数
    				var subdivisions = 6;
    				//希尔伯特曲线递归的次数
    				var recursion = 1;
    				/*
    				希尔伯特曲线
    				hilbert3D
    				 * @param center     Center of Hilbert curve.
    				 * @param size       Total width of Hilbert curve.
    				 * @param iterations Number of subdivisions.
    							curve's count -> 4 ^ iterations 个首尾相连两边竖起的凹线
    				 * @param v0         Corner index -X, +Y, -Z. 从上矩形的第二象限开始，先以逆时针画左矩形，再连到右侧，以顺时针画右矩形
    				 * @param v1         Corner index -X, +Y, +Z.
    				 * @param v2         Corner index -X, -Y, +Z.
    				 * @param v3         Corner index -X, -Y, -Z.
    				 * @param v4         Corner index +X, -Y, -Z.
    				 * @param v5         Corner index +X, -Y, +Z.
    				 * @param v6         Corner index +X, +Y, +Z.
    				 * @param v7         Corner index +X, +Y, -Z.
    				 */
    				var points = hilbert3D( new THREE.Vector3( 0,0,0 ), 25.0, recursion, 0, 1, 2, 3, 4, 5, 6, 7 );
    
    				/*
    				样条曲线(CatmullRomCurve3)与贝赛尔曲线的区别(CubicBezierCurve、QuadraticBezier)
    				贝塞尔曲线只会穿过首尾两个控制点而不过中间的控制点，在某些场合希望曲线穿过所有控制点的话可以使用catmull-rom spline（简称CR-Spline）
    				CR-Spline需要至少4个控制点，首尾两个控制点为辅助点，曲线不会穿过，其余控制点在t=[0,1]之间平滑地穿过，t=0时值等于第2个顶点，而t=1时值等于倒数第2个顶点
    				如果传入的控制点首尾相等形成闭合环，那么不用计算，直接取值p0=pN-1，pN=p1就会成为一条光滑的曲线了。
    				*/
    				var spline = new THREE.CatmullRomCurve3( points );
    				var geometrySpline = new THREE.Geometry();
    
    				for ( var i = 0; i < points.length * subdivisions; i ++ ) {
    					//index是当前点占分段后的点索引的百分比
    					var index = i / ( points.length * subdivisions );
    					//通过插值得到的新点
    					var position = spline.getPoint( index );
    
    					geometrySpline.vertices[ i ] = new THREE.Vector3( position.x, position.y, position.z );
    				}
    
    				var geometryCube = cube( 50 );
    
    				//计算相邻两点的距离，目前还没发现有什么实际用途
    				//geometryCube.computeLineDistances();
    				//geometrySpline.computeLineDistances();
    
    				/*
    				THREE.Line使用WebGL中的gl.LINE_STRIP(一系列的连续直线，即折线)渲染
    				THREE.LineSegments使用WebGL中的gl.LINES(每一对顶点被解释为一条直线，即线段)渲染
    				
    				LineDashedMaterial是虚线材质，dashSize定义了短划线的长度，gapSize定义了间隔的宽度
    				*/
    				var object = new THREE.LineSegments( geometrySpline, new THREE.LineDashedMaterial( { color: 0xffffff, dashSize: 1, gapSize: 0.5 } ) );
    
    				objects.push( object );
    				scene.add( object );
    
    				var object = new THREE.LineSegments( geometryCube, new THREE.LineDashedMaterial( { color: 0xffaa00, dashSize: 3, gapSize: 1, linewidth: 2 } ) );
    
    				objects.push( object );
    				scene.add( object );
    
    				renderer = new THREE.CanvasRenderer();
    				//设置渲染器的"清除色"和"透明度"
    				renderer.setClearColor( 0x111111 );
    				//设置屏幕像素比，与Android上的DIP相仿，作用是在所有设备上的显示效果都相近
    				renderer.setPixelRatio( window.devicePixelRatio );
    				//设置待渲染场景的大小
    				renderer.setSize( WIDTH, HEIGHT );
    
    				var container = document.getElementById( 'container' );
    				//将渲染器的DOM元素(即Canvas)添加到HTML中
    				container.appendChild( renderer.domElement );
    
    				//左上角的统计信息(FPS，渲染时间，chrome内存使用率)
    				stats = new Stats();
    				//这里注意，统计插件的dom元素是"dom"，而不是domElement
    				container.appendChild( stats.dom );
    
    				window.addEventListener( 'resize', onWindowResize, false );
    			}
    
    			//通过线段来构建一个边长为size的立方体
    			function cube( size ) {
    				var h = size * 0.5;
    				var geometry = new THREE.Geometry();
    
    				geometry.vertices.push(
    					new THREE.Vector3( -h, -h, -h ),
    					new THREE.Vector3( -h, h, -h ),
    
    					new THREE.Vector3( -h, h, -h ),
    					new THREE.Vector3( h, h, -h ),
    
    					new THREE.Vector3( h, h, -h ),
    					new THREE.Vector3( h, -h, -h ),
    
    					new THREE.Vector3( h, -h, -h ),
    					new THREE.Vector3( -h, -h, -h ),
    
    					new THREE.Vector3( -h, -h, h ),
    					new THREE.Vector3( -h, h, h ),
    
    					new THREE.Vector3( -h, h, h ),
    					new THREE.Vector3( h, h, h ),
    
    					new THREE.Vector3( h, h, h ),
    					new THREE.Vector3( h, -h, h ),
    
    					new THREE.Vector3( h, -h, h ),
    					new THREE.Vector3( -h, -h, h ),
    
    					new THREE.Vector3( -h, -h, -h ),
    					new THREE.Vector3( -h, -h, h ),
    
    					new THREE.Vector3( -h, h, -h ),
    					new THREE.Vector3( -h, h, h ),
    
    					new THREE.Vector3( h, h, -h ),
    					new THREE.Vector3( h, h, h ),
    
    					new THREE.Vector3( h, -h, -h ),
    					new THREE.Vector3( h, -h, h )
    				 );
    				return geometry;
    			}
    
    			function onWindowResize() {
    				//重新设置相机的宽高比。如果宽高比不对，那么正方形可能就不是正方形了
    				camera.aspect = window.innerWidth / window.innerHeight;
    				//更新透视相机的投影矩阵
    				camera.updateProjectionMatrix();
    				//更新待渲染场景的大小
    				renderer.setSize( window.innerWidth, window.innerHeight );
    			}
    
    			function animate() {
    				requestAnimationFrame( animate );
    
    				render();
    				//这里可以在render前后使用stats.begin和stats.end，也可以在每次渲染的时候调用一次stats.update
    				stats.update();
    			}
    
    			function render() {
    				//Date.now()得到的是当前时间戳，单位毫秒
    				var time = Date.now() * 0.001;
    
    				for ( var i = 0; i < objects.length; i ++ ) {
    					var object = objects[ i ];
    					/*
    					将旋转的角度按右手螺旋定则更新到原旋转角上
    					rotation.y是绕Y轴旋转
    					*/
    					//object.rotation.x = 0.25 * time * ( i%2 == 1 ? 1 : -1);
    					object.rotation.x = 0.25 * time;
    					object.rotation.y = 0.25 * time;
    				}
    				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/