Three.js 杂记（二）——绘制点、线、面
发布于: 2021 年 03 月 22 日
点和线
Threejs 使用的是右手坐标系，这源于 opengl 默认情况下，也是右手坐标系
图中右边那个手对应的坐标系，就是右手坐标系。在 Threejs 中，坐标和右边的坐标完全一样。x 轴正方向向右，y 轴正方向向上，z 轴由屏幕从里向外。
<br/>
一维指的是一条线，没有宽度和高度
二维指的是一个面，没有高度
三位指的是立体空间，由面组成
示例代码：
<body> <div id="app"></div> <script> // 创建场景 var scene = new THREE.Scene(); // 创建相机 参数：视角、视角比例（宽度和高度比）、最近像素、最远像素 camera = new THREE.PerspectiveCamera(105, window.innerWidth / window.innerHeight, 1, 1000); // 渲染器 // 把眼睛看到的大千世界绘制到HTML页面中 render = new THREE.WebGLRenderer({ antialias: true }); // 计算处理dpi render.setPixelRatio(window.devicePixelRatio); // 设置画布大小 render.setSize(window.innerWidth, window.innerHeight) var app = document.getElementById("app"); // 绘制出一个canvas小面板 app.appendChild(render.domElement); /*********************************内容绘制区域************************************************/ // 创造一个立方体, 点模型 var geometry = new THREE.BoxGeometry(10, 10, 10); //创建一个立方体几何对象Geometry var material1 = new THREE.PointsMaterial({ color:"red", size: 1.0 //点对象像素尺寸 }); //点模型 var point = new THREE.Points(geometry, material1); // 创造一个立方体, 线模型 var material2 = new THREE.LineBasicMaterial({ color:"red", }); var lines = new THREE.Line(geometry, material2); // 创造一个立方体, 网格模型 var material3 = new THREE.MeshBasicMaterial({ color:"red", wireframe:true,//网格模型以线条的模式渲染 }); var meshs = new THREE.Mesh(geometry, material3); //网格模型添加到场景中 scene.add(meshs); // 让渲染器渲染一下 //执行渲染操作 指定场景、相机作为参数 camera.position.z = 50; camera.position.y = 10; camera.position.x = 20; render.render(scene, camera); /*********************************内容绘制区域************************************************/
// 产生动效 网格对象进行旋转 function animate(){ render.render(scene, camera); } setInterval(animate,100); </script></body>复制代码
效果：
绘制渐变色线
// 创建场景var scene = new THREE.Scene();
// 创建相机 参数：视角、视角比例（宽度和高度比）、最近像素、最远像素camera = new THREE.PerspectiveCamera(105, window.innerWidth / window.innerHeight, 1, 1000);
// 渲染器// 把眼睛看到的大千世界绘制到HTML页面中render = new THREE.WebGLRenderer({ antialias: true});// 计算处理dpirender.setPixelRatio(window.devicePixelRatio);// 设置画布大小render.setSize(window.innerWidth, window.innerHeight)
var app = document.getElementById("app");// 绘制出一个canvas小面板app.appendChild(render.domElement);
/*********************************内容绘制区域************************************************/
var light;var geometry = new THREE.Geometry();function initLight() { // 设置线点的颜色 var material = new THREE.LineBasicMaterial({ // color:"red", vertexColors: true }); geometry.vertices.push( new THREE.Vector3(-10,0,0), // 起始点 new THREE.Vector3(0,0,0), new THREE.Vector3(0,10,0), new THREE.Vector3(-10,0,0) //结束回到原点 ); geometry.colors.push( new THREE.Color( "#38E92D" ), new THREE.Color( "#F2EC2D" ), new THREE.Color( "#2B64EE" ), new THREE.Color( "#E75427" ) ) light = new THREE.Line(geometry, material); scene.add(light);}
/*********************************内容绘制区域************************************************/
camera.position.z = 10;camera.position.y = 0;camera.position.x = 0;
function animate() { initLight(); render.clear(); render.render(scene, camera);}setInterval(animate, 100);
复制代码
效果：
绘制完成的线可以进行平移和旋转，通过这些操作可以组成不同的图形
// 创建场景var scene = new THREE.Scene();
// 创建相机 参数：视角、视角比例（宽度和高度比）、最近像素、最远像素camera = new THREE.PerspectiveCamera(105, window.innerWidth / window.innerHeight, 1, 1000);
// 渲染器// 把眼睛看到的大千世界绘制到HTML页面中render = new THREE.WebGLRenderer({ antialias: true});// 计算处理dpirender.setPixelRatio(window.devicePixelRatio);// 设置画布大小render.setSize(window.innerWidth, window.innerHeight)
var app = document.getElementById("app");// 绘制出一个canvas小面板app.appendChild(render.domElement);
/*********************************内容绘制区域************************************************/
var light;var geometry = new THREE.Geometry();
// 随机颜色function fn5(){ var colorValue = "0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f"; var colorArray = colorValue.split(","); var color = "#"; for( var i = 0; i < 6; i++ ){ color += colorArray[ Math.floor( Math.random() * 16 ) ]; } return color;}// 绘制平面坐标系function PlaneCoordinates() { // 设置线点的颜色 var material = new THREE.LineBasicMaterial({ vertexColors: true }); geometry.vertices.push( new THREE.Vector3(0,0,0), // 起始点 new THREE.Vector3(0,10,0) // 结束点 ); for(var i = 0; i < 11; i++) { var color01 = fn5(), color02 = fn5(); geometry.colors.push( new THREE.Color( color01 ), new THREE.Color( color02 ), ); light = new THREE.Line(geometry, material); light.position.x += i; scene.add(light); light = new THREE.Line(geometry, material); light.rotation.z = -90 * Math.PI / 180; light.position.y += i; scene.add(light); console.log(light) }}
/*********************************内容绘制区域************************************************/
camera.position.z = 10;camera.position.y = 0;camera.position.x = 0;
function animate() { PlaneCoordinates(); render.clear(); render.render(scene, camera);}animate()
复制代码
效果：
划线
评论
复制
发布于: 2021 年 03 月 22 日阅读数: 13
版权声明: 本文为 InfoQ 作者【空城机】的原创文章。
原文链接:【http://xie.infoq.cn/article/e38fd948a4e9eaff80cf99ce8】。
本文遵守【CC-BY 4.0】协议，转载请保留原文出处及本版权声明。
空城机
关注
曾经沧海难为水,只是当时已惘然 2021.03.22 加入
业余作者，在线水文
评论