three.js 点、线、坐标轴(02)

文章目录

一、3D世界的组成

在计算机中,3d是由点组成,两个点能够组成一条直线,三个不在一条直线上的点就能够组成一个三角形面,无数三角形面就能够组成各种形状的物体。

网格模型:也叫mesh模型,给物体贴上皮肤也叫纹理,那这个物体就活起来了。

二、在Threejs中定义一个点

在三维空间中,某一个点可以用一个坐标点来表示。一个坐标点由x,y,z三个分量构成。在THREE中,点可以在右手坐标系中表示

右手坐标系:即x轴正方向向右,y轴正方向向上,z轴由屏幕从里向外。

《three.js 点、线、坐标轴(02)》

2.1定义一个点

three.js中的内部定义:

THREE.Vector3 = function(x,y,z){ 
    this.x = x || 0; //当x为Null或undefined时,this.x的值被赋值为0
    this.y = y || 0;
    this.z = z || 0;
};

我们定义一个点时:

var point1 = new THREE.Vector3(2,3,4);
//第二种方法
var point1 = new THREE.Vector3();
point1.set(1,2,3);

2.2 一个栗子—-画一条直线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>画一条彩色的线</title>
    <script src="three.js"></script>
    <style> div #canvas{  border:none; cursor: pointer; width:100%; height:100%; background-color: grey; } </style>
    <script> //封装渲染器 var renderer; function initThree(){  width = document.getElementById('canvas').clientWidth; height = document.getElementById('canvas').clientHeight; renderer = new THREE.WebGLRenderer({  antialias:true //使线条更圆润 }); renderer.setSize(width,height); document.getElementById('canvas').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.BufferGeometry(); //声明一个几何体 var material = new THREE.LineBasicMaterial({ vertexColors:true}); //定义线条的材质 //定义两种颜色,分别表示线条两个端点的颜色 var color1 = new THREE.Color(0x444444),color2 = new THREE.Color(0xFF0000); //线的材质可以由两点的颜色决定 //定义两个顶点的位置,并放在几何体重 var p1 = new THREE.Vector3(-100,0,100); var p2 = new THREE.Vector3(100,0,-100); geometry.vertices.push(p1,p2); //geometry.vertices.push(p2); geometry.colors.push(color1,color2); //为物体添加颜色 //定义一条线 var line = new THREE.Line(geometry,material,THREE.LineSegments); scene.add(line); } //调用所有的函数 function threestart(){  initThree(); initCamera(); initScene(); initLight(); initObject(); renderer.clear(); renderer.render(scene,camera); } </script>
</head>
<body onload="threestart();">
    <div id="canvas"></div>
</body>
</html>

三、几何体THREE.Geometry()

几何体是一个包含必要三维数据的一个数据结构。包括三部分:

  • this.vertices = [];
  • 颜色this.colors = [];
  • this.faces = []

定义一个几何体,并向里面添加点:

var geometry = new THREE.Geometry();
geometry.vertices.push(
	new THREE.Vector3(-100,100,0),
    new THREE.Vector3(100,-100,0),
    new THREE.Vector3(100.-100,0)
);

注:在实际实现的过程中,发现THREE.Geometry会报错,或许是因为版本的原因?把它改成THREE.BufferGeometry();就不会报错了

四、线条的材质THREE.LineBasicMaterial

线条的材质就是表面结合了各种可视属性,这些可视属性包括表面的色彩、纹理、光滑度、透明度、反射率、折射率、发光度等。

使用THREE.LineBasicMaterial类型来定义线的材质,它接受一个集合作为参数,原型如下

LineBasicMaterial(parameters)

THREE.LineBasicMaterial = function(parameters)

parameters是一个定义材质外观的对象,它包含多个属性来定义材质:

  • Color:线条的颜色,用16进制来表示,默认的颜色是白色。
  • Linewidth:线条的宽度,默认是1个单位宽度。(注:普通的renderer渲染器是不支持改变宽度的,只有CanvasRenderer才支持改变宽度)
  • Linecap:线条两端的外观,默认是圆角端点,当线条较粗的时候才看的初效果,如果线条很细,那么几乎看不出效果了。
  • Linejoin:两条线条的连接点处的外观,默认是“round”,表示圆角。
  • VertexColors:定义线条材质是否使用顶点颜色,这是一个Boolean值。意思是,线条各部分的颜色会根据顶点的颜色来进行插值
  • Fog:定义材质的颜色是否受全局雾效的影响。

4.1插值

简单来说,就是颜色的过渡,当我们绘制出一条直线时,如果两个顶点颜色不一样,会发现直线是一条颜色过渡的直线。这就是插值
《three.js 点、线、坐标轴(02)》

五、关于坐标系

在three.js中,使用的是右手坐标系(即x轴正方向向右,y轴正方向向上,z轴由屏幕从里向外。)

  • 关于围绕某个轴旋转:拇指指向旋转轴的正方向,四指弯曲的方向为旋转的正方向。
cube.rotation.y -= 0.01;  //弧度

5.1 世界坐标和本地坐标

世界坐标:一个应用程序可能包含成百上千个单独的对象,我们必须把他们放到一个公共的场景里,这个公共的场景就叫做世界坐标。

  • 相机默认在世界坐标的原点
  • 3D屏幕中的所有物体都可以在该坐标系系统下移动和旋转
  • 对于屏幕上所有的物体来说,这个坐标系是相同的,并且它不会改变
  • 用户默认的观察视角是沿着Z轴的负半轴方向

本地坐标:物体的本身的坐标,即物体中心点。

5.2 AxesHelper三维坐标系

  • 可以在场景中添加辅助坐标系帮助开发
  • 可以使物体绕着本地坐标系旋转,而不绕世界坐标系旋转
  • 用于简单模拟3个坐标轴的对象(红色代表x轴,绿色代表y轴,蓝色代表z轴)
var axeshelper = new THREE.AxesHelper(5);
axesHelper.rotation.y -=0.01; //围绕坐标轴旋转
scene.add(axeshelper)
    原文作者:Sandy_Star
    原文地址: https://blog.csdn.net/weixin_48931875/article/details/113753930
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞