THREEJS案例-坐标系之点线面

Posted 2021-04-21 开源编程案例

本篇作为ThreeJS案例系列的第一篇，我们先来整体了解下构成整个3D世界坐标系统，并在坐标系里面展示3D世界的点线面。先看下整体效果图。

本系列并没有一上来先让大家了解场景、相机和渲染器这些内容，是因为大多数学习者一个盲区不在于这些基本概念，而在于整个3D世界的概念，比如空间坐标系，坐标系里面元素的空间变换这些内容，所以我这里以3D世界的坐标系作为开篇。 场景、相机和渲染器这些内容作为下一篇讲解。

• 画线

画线扫盲连接：https://threejs.org/docs/index.html#manual/zh/introduction/Drawing-lines

function createLine(lineColor,points) { var material = new THREE.LineBasicMaterial({ color: lineColor });
 var geometry = new THREE.Geometry(); geometry.vertices=points;
 var line = new THREE.Line(geometry, material, THREE.LineSegments); scene.add(line); return line; }  //调用 createLine(0x00FF00, [new THREE.Vector3(0, 0, 0), new THREE.Vector3(500, 0, 0)]);

• 画面

  ThreeJS平面扫盲连接：
  https://threejs.org/docs/index.html#api/zh/geometries/PlaneGeometry

function createShape(){ var geometry = new THREE.PlaneGeometry( 500, 300, 32 ); var material = new THREE.MeshBasicMaterial( {color: 0xE1FFFF} ); var plane = new THREE.Mesh( geometry, material ); plane.position.set(250,150,0); scene.add( plane ); }

文字

ThreeJS文字扫盲连接：

https://threejs.org/docs/index.html#api/zh/geometries/TextGeometry

function createText(text,x,y,z,c){ var loader = new THREE.FontLoader();      //可以在 C:\Windows\Fonts 下面找到中文字体库，用下面的链接转换      //http://gero3.github.io/facetype.js/ loader.load( './css/fonts/helvetiker_regular.typeface.json', function ( font ) { var geometry = new THREE.TextGeometry( text, { font: font, size: 30, height: 10, curveSegments: 3, bevelEnabled: true, bevelThickness: 3, bevelSize: 3, bevelSegments: 5 } ); var material = new THREE.MeshBasicMaterial( {color: c} ); var xMesh = new THREE.Mesh( geometry, material ); xMesh.position.set(x,y,z); scene.add( xMesh ); } ); }

本篇作为开篇，我们不具体的了解整个3D世界，下一篇开始我们结合所学的数学知识一点一点的学习3D世界的坐标系以及几何体在3D世界中的变换。

在这里诚信结交3D爱好者共同进步，可以公众号留V，加群交流。