当前位置：网站首页>Chapter 2 do you remember the point, line and surface (2)

Chapter 2 do you remember the point, line and surface (2)

2022-06-28 11:40:00 【User 9365514】

We will learn how to draw a grid with straight lines , In order to better understand the position of this grid in space , It's time for us , Let's talk about the space coordinate system .

1、 Right hand coordinate system

Threejs We use the right-hand coordinate system , It comes from opengl By default , It's also the right-hand coordinate system . Here is an illustration of the right-hand coordinate system , If you don't understand this concept , You can baidu , I'm sure you'll understand the moment you reach out , If you don't understand, please leave a message for the author , I will fill in the knowledge about coordinate system as soon as possible .

The coordinate system of the right hand in the figure , Right hand coordinate system . stay Threejs in , The coordinates are exactly the same as those on the right .x Axis positive direction right ,y The axis is going up ,z The axis is from the inside to the outside of the screen .

5、 In depth understanding of lines

stay Threejs in , A line consists of points , Material and color composition .

Point by THREE.Vector3 Express ,Threejs There is no separate dot drawing function provided in , It must be put into a THREE.Geometry In shape , This structure contains an array vertices, This vertices Is to store countless points （THREE.Vector3） Array of . This representation can be shown in the following figure ：

To draw a straight line , First we need to define two points , As shown in the following code ：

var p1 = new THREE.Vector3( -100, 0, 100 );

var p2 = new THREE.Vector3( 100, 0, -100 );

Please think about it , Where are these two points in the coordinate system , Then we declare a THREE.Geometry, And add the dot into , The code is as follows ：

var geometry = new THREE.Geometry();

geometry.vertices.push(p1);

geometry.vertices.push(p2);

geometry.vertices Can be used push Method , Because geometry.vertices Is an array . such geometry There is 2 A little bit .

Then we need to add a material to the thread , You can use materials specially prepared for lines ,THREE.LineBasicMaterial.

We finally passed THREE.Line Draw a line , As shown in the following code :

var line = new THREE.Line( geometry, material, THREE.LinePieces );

ok,line This is the line we want .

6、 Draw the coordinate plane that I loved in high school

I still love the coordinate plane in high school , It reminds me of the long and thin hair of my classmates in the front row …

The effect of this plane is as follows , The screenshot is incomplete ：

It draws... Horizontally and vertically 20 Bar segment , Under the light of the camera , That's what it looks like . You can [ Junior course \chapter2\2-2.html] Find the code ：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Three frame </title>
<script src="js/Three.js"></script>
<style type="text/css">
div#canvas-frame {
border: none;
cursor: pointer;
width: 100%;
height: 600px;
background-color: #EEEEEE;
}

</style>
<script>
var renderer;
function initThree() {
width = document.getElementById('canvas-frame').clientWidth;
height = document.getElementById('canvas-frame').clientHeight;
renderer = new THREE.WebGLRenderer({
antialias : true
});
renderer.setSize(width, height);
document.getElementById('canvas-frame').appendChild(renderer.domElement);
renderer.setClearColor(0xFFFFFF, 1.0);
}

var camera;
function initCamera() {
camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
camera.position.x = 0;
camera.position.y = 1000;
camera.position.z = 0;
camera.up.x = 0;
camera.up.y = 0;
camera.up.z = 1;
camera.lookAt({
x : 0,
y : 0,
z : 0
});
}

var scene;
function initScene() {
scene = new THREE.Scene();
}

var light;
function initLight() {
light = new THREE.DirectionalLight(0xFF0000, 1.0, 0);
light.position.set(100, 100, 200);
scene.add(light);
}

var cube;
function initObject() {
var geometry = new THREE.Geometry();
geometry.vertices.push( new THREE.Vector3( - 500, 0, 0 ) );
geometry.vertices.push( new THREE.Vector3( 500, 0, 0 ) );

for ( var i = 0; i <= 20; i ++ ) {

var line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0x000000, opacity: 0.2 } ) );
line.position.z = ( i * 50 ) - 500;
scene.add( line );

var line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0x000000, opacity: 0.2 } ) );
line.position.x = ( i * 50 ) - 500;
line.rotation.y = 90 * Math.PI / 180;
scene.add( line );

}
}

function threeStart() {
initThree();
initCamera();
initScene();
initLight();
initObject();
renderer.clear();
renderer.render(scene, camera);
}

</script>
</head>

<body onload="threeStart();">
<div id="canvas-frame"></div>
</body>
</html>

The key to drawing a grid initObject Function , We don't waste paper , But waste some electricity , Repeat the above code below ：

var cube;
function initObject() {
var geometry = new THREE.Geometry();
// B begin
geometry.vertices.push( new THREE.Vector3( - 500, 0, 0 ) );
geometry.vertices.push( new THREE.Vector3( 500, 0, 0 ) );
// B end

for ( var i = 0; i <= 20; i ++ ) {

var line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0x000000, opacity: 0.2 } ) );
line.position.z = ( i * 50 ) - 500;
scene.add( line );

var line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0x000000, opacity: 0.2 } ) );
line.position.x = ( i * 50 ) - 500;
line.rotation.y = 90 * Math.PI / 180;
scene.add( line );

}
}

Ideas ： We're going to draw the coordinates of a grid , Then we should find the point of the line . Make the grid into a virtual square , Find several bisectors on the boundary of the square , Connect these points in pairs , You can draw the whole grid .

1、 Definition 2 A little bit

stay x Two points are defined on the axis p1(-500,0,0),p2(500,0,0).

geometry.vertices.push( new THREE.Vector3( - 500, 0, 0 ) );

geometry.vertices.push( new THREE.Vector3( 500, 0, 0 ) );

2、 Algorithm

These two points determine x A line segment on an axis , Copy this line segment 20 Time , Move in parallel to z Different positions of the shaft , Can form a group of parallel line segments .

Empathy , take p1p2 This line first surrounds y Shaft rotation 90 degree , And then copy 20 Share , Parallel to the z The axis moves to a different position , It can also form a group of parallel lines .

Go through the above steps , You can get the coordinate grid . The code is as follows ：

for ( var i = 0; i <= 20; i ++ ) {

var line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0x000000, opacity: 0.2 } ) );
line.position.z = ( i * 50 ) - 500;
scene.add( line );

var line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0x000000, opacity: 0.2 } ) );
line.position.x = ( i * 50 ) - 500;
line.rotation.y = 90 * Math.PI / 180; // rotate 90 degree
scene.add( line );

}

Okay , This class is over , I feel like I have written for a long time . Give attention to both depth and beginners , There are some difficulties . Last , I hope you like it .

原网站

版权声明
本文为[User 9365514]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/179/202206281052045731.html