【three.js学习笔记】线

最新推荐文章于 2024-06-20 10:12:56 发布
最新推荐文章于 2024-06-20 10:12:56 发布
阅读量190 收藏
点赞数
原文链接：https://segmentfault.com/a/1190000014352010
版权

线

一条连续的线

var material = new THREE.LineBasicMaterial({
    color: 0x0000ff
});

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

var line = new THREE.Line( geometry, material,THREE.LineSegments);
scene.add( line );

线条Line api

构造器

Line( geometry, material, mode );
  • geometry:表示线段的顶点
  • material:线条材料。默认为 LineBasicMaterial
  • mode:线条绘制方式(THREE.LineSegments);

属性

  • geometry:表示线段的顶点
  • material:线条材料

方法

.raycast ( raycaster, intersects )

得到光线投射和该线条之间的交点。 Raycaster.intersectObject 将调用该方法。

.clone ()

返回该线条对象及其后代的克隆。

三维向量(Vector3)api 

var a = new THREE.Vector3( 1, 0, 0 );
var b = new THREE.Vector3( 0, 1, 0 );

var c = new THREE.Vector3();
c.crossVectors( a, b );

构造器（Constructor）

Vector3( x, y, z )
  • x: Float 向量的x值。
  • y: Float 向量的y值。
  • z: Float 向量的z值。

使用

创建几何体并将三维向量放入几何体

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

线材质

简单的说就是物体看起来是什么质地。材质可以看成是材料和质感的结合。在程序中，它是表面各可视属性的结合，这些可视属性是指表面的色彩、纹理、光滑度、透明度、反射率、折射率、发光度等。

THREE.LineBasicMaterial

THREE.LineBasicMaterial = function ( parameters )
  • Color：线条的颜色，用16进制来表示，默认的颜色是白色。
  • Linewidth：线条的宽度，默认时候1个单位宽度。
  • Linecap：线条两端的外观，默认是圆角端点，当线条较粗的时候才看得出效果，如果线条很细，那么你几乎看不出效果了。
  • Linejoin：两个线条的连接点处的外观，默认是“round”，表示圆角。
  • VertexColors：定义线条材质是否使用顶点颜色，这是一个boolean值。意思是，线条各部分的颜色会根据顶点的颜色来进行插值。

线条绘制

图片描述

THREE.LinePieces(GL_LINES)

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

THREE.LineSegments(GL_LINE_STRIP)

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

实例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Three框架</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();
                var material = new THREE.LineBasicMaterial( { vertexColors: true } );
                var color1 = new THREE.Color( 0x444444 ), color2 = new THREE.Color( 0xFF0000 );

                // 线的材质可以由2点的颜色决定
                var p1 = new THREE.Vector3( -100, 0, 100 );
                var p2 = new THREE.Vector3(  100, 0, -100 );
                geometry.vertices.push(p1);
                geometry.vertices.push(p2);
                geometry.colors.push( color1, color2 );

                var line = new THREE.Line( geometry, material, THREE.LinePieces );
                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>
Rank92
关注
【轻松压缩，一键搞定】您的图片处理神器来了！
小豆包
05-26 553
长图片分割：再也不用担心长图无法完整显示或处理了，我们的工具能轻松将长图分割成多张图片，方便您进行后续编辑和分享。📷 无论是从相机导出的大图，还是手机拍摄的生活照，我们的工具都能轻松应对，让您的图片处理变得简单又高效！一个功能强大的图片处理工具，它可以满足用户对于图片压缩、格式转换、质量调节以及长图片分割等多种需求。批量压缩：无论您有多少张图片，无论尺寸大小，我们的工具都能一次性处理，让您的工作效率翻倍！还是追求更小的文件大小？格式转换：支持多种图片格式之间的轻松转换，满足您在不同场景下的使用需求。
THREE绘制线段、虚线 THREE.LineSegments
宏斌的博客
01-21 1055
【代码】THREE绘制选段虚线 THREE.LineSegments。
`THREE.LineSegments`是Three.js中的一个类，用于创建由线段组成的对象。每个线段由两个顶点定义，多个线段可以组合成一个`THREE.LineSegments`对象。
最新发布
小豆包
06-20 520
demo地址是Three.js中的一个类，用于创建由线段组成的对象。每个线段由两个顶点定义，多个线段可以组合成一个对象。它通常用于绘制多条独立的线段，例如边框、网格或粒子连接线。 入参 geometry: 或对象，包含线段的顶点数据。 material: 对象，指定线段的材质属性。 属性 继承自，它又继承自，因此它具有这些类的所有属性。以下是一些重要属性：继承了和的所有方法，常用的方法包括：以下是一个使用创建线段的简单示例： 在这个示例中，我们创建了一个包含三个顶点的，然后使用创建材质。最后，我们用这
线条Line，LinLoop，LineSegments
atu1111的博客
05-27 951
线条Line，LinLoop，LineSegments   THREE.Line、THREE.LineLoop、THREE.LineSegments三个构造函数定义的是描点划线的方式，对应WebGL中的绘制模式mode，初学的时候不用深究，有个影响即可， 对于LineSegments方式而言，两个点确定一条直线，四个点确定2条直线；对于Line方式，四个点可以连续绘制出3条直线；对于LineLoop方式，与line模式基本一样，最后会产生闭合， 四个点可以连续绘制出4条直线。   代码如下：
Threejs MeshBasicMaterial材质改用LineMaterial材质，实现线条宽度自定义
imcholl的博客
02-08 1667
把正方体网格作为参数，实际上是根据geometry.vertices的Vector3点集和computeBoundingBox()方法计算的。参考：https://blog.csdn.net/m0_49399323/article/details/107461063。//line2材质的边界值判断。计算和世界轴对齐的一个对象 Object3D （含其子对象）的包围盒，计算对象和子对象的世界坐标变换。但是，我当前使用的项目只支持ES5语法，所以需要将所有需要的文件都由ES6改成ES5。
深入理解Three.js中线条Line，LinLoop，LineSegments
baby_duoduo的博客
09-27 5541
在可视化开发中，无论是2d（canvas）开发还是3d开发，线条的绘制应用都是比较普遍的。比如绘制城市之间的迁徙图，运行轨迹图等。本文主要讲解的是Three.js中三种线条Line，LineLoop，LineSegments之间的区别，每种线条的原理和对应参数的含义，以及如何选择使用场景等问题。Three.js中提供了两种线条材质，分别是LineBasicMaterial和LineDashedMaterial，本文中讲解到的示例都使用LineBasicMaterial材质，后续也会专门总结相关材质的文章为读
WebGL学习教程之Three.js学习笔记(第一篇)
12-04
Three.js则是一个非常实用的JavaScript库，它为WebGL提供了一套高级的抽象层，极大地简化了3D图形编程的过程。Three.js将WebGL底层的复杂性进行了封装，让开发者可以通过更直观的方式来创建3D对象、光照、相机视角等...
Three.js线条光波动画特效.zip
10-08
Three.js是JavaScript的一个开源库，它为开发者提供了在Web浏览器中进行3D图形编程的能力，无需深入学习底层的WebGL API。 首先，理解Three.js的基本概念至关重要。Three.js提供了一个完整的框架，包括场景(Scene)...
WebGL three.js学习笔记之阴影与实现物体的动画效果
01-21
实现物体的旋转、跳动以及场景阴影的开启与优化 本程序将创建一个场景，并实现物体的动画效果 ...Three.js</title> [removed][removed] [removed][removed] <script src=../../../Import/Setting
Three.js碎片化图片切换特效.zip
10-08
Three.js是一个基于WebGL的JavaScript 3D库，它允许开发者在浏览器中创建和展示复杂的3D图形。下面将详细介绍这些技术及其在实现图片切换特效中的应用。 1. **Three.js**：Three.js的核心功能是通过WebGL API在...
threejs(一) 点,线,网格
Jinming Su
05-22 3868
ps:本系列会通过例子,来学习three.js入门<!DOCTYPE html> <html> <head> <title></title> <style>canvas { width: 100%; height: 100% }</style> <script src="js/three.js"></script> </head> <body> <script> //
ThreeJS-3D教学九-line的绘制
weixin_44384273的博客
10-13 1325
Line，LineLoop，LineSegments
three.js教程一场景的基本组件
天才
04-05 981
这段代码展现了three.js scene场景的基本使用法则，其中初始化，渲染器，相机，几何体，都写好了有注释。这里面值得注意的就是坐标的关系了，我已经写好了坐标的展现 位置，大家可以用肉眼观看到。 场景的基本组件 div#canvas-frame { border: none; cursor
three 模型对象、材质
前端学习杂记，记录学习中的前端知识。
02-29 1683
点模型Points、线模型LineMesh等模型对象的父类都是，如果想对这些模型进行旋转、缩放、平移等操作，如何实现，可以查询Threejs文档对相关属性和方法的介绍。
three.js 中THREE.Vector3 源代码，带个人注释
soraduo的博客
07-31 3101
import { _Math } from './Math.js'; import { Matrix4 } from './Matrix4.js'; import { Quaternion } from './Quaternion.js'; /** * @author mrdoob / http://mrdoob.com/ * @author kile / http://kile.strav...
Three.js——向量操作函数
離殇
03-11 2558
克隆.clone()和复制.copy() 对象执行克隆方法**.clone()**，返回一个新的对象，和原来对象属性的值一样。 var p1 = new THREE.Vector3(10,20,15); var v1 = p1.clone(); console.log(`查看克隆的结果`,v1); 执行**.copy()**方法，向量p1三个分量xyz的值覆盖向量p2三个分量。 var p1 = new THREE.Vector3(10,42,28); var p2 = new THREE.Vector3
Threejs入门之七:Threejs中的几何体
九仞山的专栏
04-02 2523
介绍Threejs中常见的几何体
three.js 学习总结
diaohu0796的博客
09-05 153
看了一个星期的three.js写了一个拖拽的几何体，总结一下，由于three.js93dev 和 73dev两个版本的差异还是有点坑的，官方教程也没有更新； 这次我用的93dev版本，并且自己写了一个小拖拽 1 var renderer; 2 function initThree() { 3 width = doc...
three.js学习二
qq_40504108的博客
09-27 506
物体： 物体由两部分组成，材质和形状 形状： 物体的形状，球体，正方体，线条，粒子等 直线线条： var material = new THREE.LineBasicMaterial({//这是线段材质 color: 0x0000ff }); var points = []; points.push( new THREE.Vector3( - 10, 0, 0 ) ); points.push( new THREE.Vector3( 0, 10, 0 ) ); points.push( new THRE
WebGL three.js学习笔记 阴影与实现物体的动画
05-30
WebGL three.js是一款基于WebGL的JavaScript 3D库，可以帮助我们快速搭建3D场景和应用。接下来我们来讲解阴影和实现物体动画的方法。 一、阴影 阴影是模拟物体之间的阴影效果，让3D场景更加真实。在three.js中，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值