static

2024-12-04 10:21:04 +08:00
parent 9d776c65e9
commit c1ac42072f
4042 changed files with 2293732 additions and 1185 deletions
--- a/static/Magic4/js/three.js-dev/docs/manual/en/introduction/Drawing-lines.html
+++ b/static/Magic4/js/three.js-dev/docs/manual/en/introduction/Drawing-lines.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<base href="../../../" />
+		<script src="page.js"></script>
+		<link type="text/css" rel="stylesheet" href="page.css" />
+	</head>
+	<body>
+		<h1>[name]</h1>
+		<div>
+			<p>
+				Let's say you want to draw a line or a circle, not a wireframe [page:Mesh].
+				First we need to set up the [page:WebGLRenderer renderer], [page:Scene scene] and camera (see the Creating a scene page).
+			</p>
+
+			<p>Here is the code that we will use:</p>
+			<code>
+const renderer = new THREE.WebGLRenderer();
+renderer.setSize( window.innerWidth, window.innerHeight );
+document.body.appendChild( renderer.domElement );
+
+const camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 500 );
+camera.position.set( 0, 0, 100 );
+camera.lookAt( 0, 0, 0 );
+
+const scene = new THREE.Scene();
+			</code>
+			<p>Next thing we will do is define a material. For lines we have to use [page:LineBasicMaterial] or [page:LineDashedMaterial].</p>
+			<code>
+//create a blue LineBasicMaterial
+const material = new THREE.LineBasicMaterial( { color: 0x0000ff } );
+			</code>
+
+			<p>
+				After material we will need a geometry with some vertices:
+			</p>
+
+			<code>
+const points = [];
+points.push( new THREE.Vector3( - 10, 0, 0 ) );
+points.push( new THREE.Vector3( 0, 10, 0 ) );
+points.push( new THREE.Vector3( 10, 0, 0 ) );
+
+const geometry = new THREE.BufferGeometry().setFromPoints( points );
+			</code>
+
+			<p>Note that lines are drawn between each consecutive pair of vertices, but not between the first and last (the line is not closed.)</p>
+
+			<p>Now that we have points for two lines and a material, we can put them together to form a line.</p>
+			<code>
+const line = new THREE.Line( geometry, material );
+			</code>
+			<p>All that's left is to add it to the scene and call [page:WebGLRenderer.render render].</p>
+
+			<code>
+scene.add( line );
+renderer.render( scene, camera );
+			</code>
+
+			<p>You should now be seeing an arrow pointing upwards, made from two blue lines.</p>
+		</div>
+	</body>
+</html>