当前位置：网站首页>Three of three JS (webgl) is simple to draw lines / arcs according to points (based on linegeometry / line2 / linematerial, draw two arc segments based on the center of the circle)

Three of three JS (webgl) is simple to draw lines / arcs according to points (based on linegeometry / line2 / linematerial, draw two arc segments based on the center of the circle)

2022-04-23 05:19:00 【Xiankui xan】

Three And three.js （webgl） Simple implementation of drawing lines according to points / Arc ( be based on LineGeometry / Line2 / LineMaterial, Draw two arc segments based on the center of the circle )

Catalog

Three And three.js （webgl） Simple implementation of drawing lines according to points / Arc ( be based on LineGeometry / Line2 / LineMaterial, Draw two arc segments based on the center of the circle )

One 、 Brief introduction

Two 、 Simple schematic diagram of the case

3、 ... and 、 Realization principle

Four 、 matters needing attention

5、 ... and 、 General implementation steps of the case

6、 ... and 、 Key code

 

One 、 Brief introduction

Three js Some knowledge of development , It is convenient to encounter similar problems later , Be able to check and use in time .

This section describes , three.js （webgl） Function of drawing line segments in , Mainly based on LineGeometry Set the point , And then use Line2 Draw a line segment composed of points , There are many ways to draw lines , This is for ideas only , If there are shortcomings , Welcome to point out , Or you have a better way , Welcome to leave a message .

Two 、 Simple schematic diagram of the case

3、 ... and 、 Realization principle

1、 vector angleTo Calculation A Vector and B The angle between vectors

2、 And then according to sin(),cos() Method to obtain the point of the arc

3、 Give me some LineGeometry, Use Line2 Draw the line segments with materials 

 
 
 Four 、 matters needing attention 
 
 
1、 This is based on the origin （0,0,0） Of , If the dot is not at the origin （0,0,0）, The position of the point on the arc is calculated when adding the point ;（ Some ideas are provided ）
 
 
2、 Here it is.   X  Y  Arc drawn by plane , If not , Some angles can be calculated according to （ adopt  z  Point to get the rotation angle ）, And then in  X  Y  Arc drawn by plane   Rotate according to the obtained angle ;（ Some ideas are provided ）
 
 
3、 The subsection accuracy of drawing arc is controllable , You can also set the color of each point of the arc 
 
 
 
 
 5、 ... and 、 General implementation steps of the case 
 
 
 The case is based on Threejs   GitHub - mrdoob/three.js: JavaScript 3D Library.
 
 
 Creation and implementation of engineering framework 
 
 
1、 Create script , introduce  Three, Create basic  Three  Environmental Science , Add scene , The camera , Light, etc 
 
 
 
 
 
 
 
 
 
2、 Add for demonstration of drawing arcs  3D  object 
 
 
 
 
 
3、 According to the vectors of some points, some corresponding drawing angles are obtained 
 
 
 
 
 
 
4、 According to the obtained angle , Combined with circular arc receipt function （sin/cos）, Generate arc position points , Last , adopt  LineGeometry 、Line2  Draw the arc 
 
 
 
 
 
 
 
5、 Calling middle note function in function , Then you can view the effect in the browser 
 
 
 
 
 
 
 6、 ... and 、 Key code 
 
 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>11TestCurveLine</title>
</head>
<body>
<script type="importmap">
			{
				"imports": {
					"three": "../../../build/three.module.js"
				}
			}

</script>

<script type="module">

	import * as THREE from 'three';

	import { OrbitControls } from '../../jsm/controls/OrbitControls.js';
	import Stats from '../../jsm/libs/stats.module.js';
	import { LineMaterial } from '../../jsm/lines/LineMaterial.js';
	import { LineGeometry } from '../../jsm/lines/LineGeometry.js';
	import { Line2 } from '../../jsm/lines/Line2.js';

	let scene, camera, renderer, stats;

	let POSITION_A;
	let POSITION_B;
	let POSITION_Center;
	let targetDegreeT1;
	let targetDegreeT2;
	const radius = 5;

	init();
	animate();

	function init() {

		// scene
		initScene();

		// camera
		initCamera();


		// light
		initLight();

		// renderer
		initRenderer();

		// OrbitControls
		initOrbitControls();

		stats = new Stats();
		document.body.appendChild( stats.dom );

		// onWindowResize
		window.addEventListener( 'resize', onWindowResize );


		axiesHelper();

		stats = new Stats();
		document.body.appendChild( stats.dom );

		// window.location.href = renderer.domElement.toDataURL( 'image/png' );

		addTestRoateLineObject();
	}

	function onWindowResize() {

		camera.aspect = window.innerWidth / window.innerHeight;
		camera.updateProjectionMatrix();
		renderer.setSize( window.innerWidth, window.innerHeight );

	}

	function initScene() {

		scene = new THREE.Scene();

	}

	function initCamera() {

		camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 200 );
		camera.position.set( 0, 0, 25 );

	}

	function initLight() {

		const ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
		scene.add( ambientLight );

		const directionalLight = new THREE.DirectionalLight( 0xffffff, 0.6 );
		directionalLight.position.set( - 1, 1, 100 );
		scene.add( directionalLight );

	}

	function initRenderer() {

		renderer = new THREE.WebGLRenderer( { antialias: true } );
		renderer.setSize( window.innerWidth, window.innerHeight );
		renderer.setPixelRatio( window.devicePixelRatio );
		renderer.setClearColor( 0xcccccc );
		document.body.appendChild( renderer.domElement );

	}

	function initOrbitControls() {

		const controls = new OrbitControls( camera, renderer.domElement );
		controls.minDistance = 5;
		controls.maxDistance = 50;
		controls.enablePan = false; //  Move   prohibit 

	}

	function animate() {

		requestAnimationFrame( animate );
		stats.update();
		render();


	}

	function axiesHelper() {

		var helper = new THREE.AxesHelper( 20 );
		scene.add( helper );

	}

	function render() {

		renderer.render( scene, camera );

	}


	function addTestRoateLineObject() {
		const Degree_A = Math.PI / 4 * 3;
		POSITION_A = new THREE.Vector3( radius * Math.cos( Degree_A ), radius * Math.sin( Degree_A ), 0 );

		const Degree_B = Math.PI / 8;
		POSITION_B = new THREE.Vector3( radius * Math.cos( Degree_B ), radius * Math.sin( Degree_B ), 0 );
		POSITION_Center = new THREE.Vector3( 0, 0, 0 );

		var geometry = new THREE.SphereGeometry( 4, 30 ); // Rectangular plane 
		var material = new THREE.MeshPhongMaterial( {} );
		var spheremesh1 = new THREE.Mesh( geometry, material );
		spheremesh1.position.set( POSITION_Center.x, POSITION_Center.y, POSITION_Center.z );
		scene.add( spheremesh1 );

		var geometryA = new THREE.SphereGeometry( 1, 30 ); // Rectangular plane 
		var materialA = new THREE.MeshPhongMaterial( {
			color: '#cc0000'
		} );
		var spheremeshA = new THREE.Mesh( geometryA, materialA );
		spheremeshA.position.set( POSITION_A.x, POSITION_A.y, POSITION_A.z );
		scene.add( spheremeshA );
		var geometryB = new THREE.SphereGeometry( 1, 30 ); // Rectangular plane 
		var materialB = new THREE.MeshPhongMaterial( {
			color: '#cc00cc'
		} );
		var spheremeshB = new THREE.Mesh( geometryB, materialB );

		spheremeshB.position.set( POSITION_B.x, POSITION_B.y, POSITION_B.z );
		scene.add( spheremeshB );

		rotateLineDataT1T2();

	}

	function rotateLineDataT1T2() {

		const v1T1 = new THREE.Vector3( POSITION_A.x, POSITION_A.y, POSITION_A.z );
		const v2T1 = new THREE.Vector3( POSITION_B.x, POSITION_B.y, POSITION_B.z );
		targetDegreeT1 = v1T1.angleTo( v2T1 );
		console.log( 'targetDegreeT1 ' + targetDegreeT1 );
		const fromDegreeT1 = v2T1.angleTo( new THREE.Vector3( radius, 0, 0 ) );
		console.log( 'fromDegreeT1 ' + fromDegreeT1 );
		const toDegreeT1 = fromDegreeT1 + targetDegreeT1;

		const v1T2 = new THREE.Vector3( POSITION_A.x, POSITION_A.y, POSITION_A.z );
		const v2T2 = new THREE.Vector3( POSITION_B.x, POSITION_B.y, POSITION_B.z );
		targetDegreeT2 = v2T2.angleTo( v1T2 );
		console.log( 'targetDegreeT2 ' + targetDegreeT2 );
		const modifyDegree = Math.PI * 2 - targetDegreeT2;
		console.log( modifyDegree );
		const fromDegreeT2 = toDegreeT1;
		const toDegreeT2 = modifyDegree + fromDegreeT2;

		scene.add(drawCurveLine( radius, 50, fromDegreeT1, toDegreeT1, 1, 0, 0 ));

		scene.add(drawCurveLine( radius, 100, fromDegreeT2, toDegreeT2, 0, 1, 0 ));

	}

	function drawCurveLine( radius, segment, fromDegree, toDegree, colorR, colorG, colorB ) {

		var geometry = new LineGeometry(); // Declare a geometry object Geometry
		var R = radius; //  Radius of arc 
		var N = segment; //  Number of segments 
		const perAddDegree = ( toDegree - fromDegree ) / segment;
		console.log( 'perAddDegree ' + perAddDegree );
		const positionArray = [];
		const colors = [];

		//  Batch generation of vertex data on arcs 
		for ( let i = 0; i < N; i ++ ) {
			var angle = fromDegree + perAddDegree * i;
			var x = R * Math.cos( angle );
			var y = R * Math.sin( angle );
			var z = 0;
			positionArray.push( x, y, z );
			colors.push( colorR, colorG, colorB );

		}

		geometry.setPositions( positionArray );
		geometry.setColors( colors );

		const matLine = new LineMaterial( {

			color: 0xffffff,
			linewidth: 0.01, // in world units with size attenuation, pixels otherwise
			vertexColors: true,

			//resolution:  // to be set by renderer, eventually
			dashed: false,
			alphaToCoverage: true,

		} );

		const line = new Line2( geometry, matLine );

		return line;

	}


</script>
</body>
</html>

 


                

                    
版权声明 

                        本文为[Xiankui xan]所创，转载请带上原文链接，感谢

                        https://yzsam.com/2022/04/202204230516339266.html
                    

                

            


            
            



            


        

        

        

    

    

        



        


边栏推荐





        


猜你喜欢

        



        


随机推荐