three.js 画管道

2024-09-03

如何用webgl(three.js)搭建处理3D园区、3D楼层、3D机房管线问题（机房升级版）-第九课（一）

写在前面的话: 说点啥好呢?就讲讲前两天的小故事吧,让我确实好好反省了一下. 前两天跟朋友一次技术对话,对方问了一下Geometry与BufferGeometry的具体不同,我一下子脑袋短路,没点到重点定义,被朋友嘲笑一番,亏还搞了three.js 这么久,这么简单的基础知识尽然不能对答如流,原来都是假把式.着实尴尬至极,尴尬至极.... 朋友间的调侃,本是玩笑,但认真思考,不无道理.正所谓温故而知新,也是我们程序员的必须课程,不仅仅是学习利用新技术,对自己常用的老技术也要时长翻看一下,加强记忆

用JS画斐波那契螺旋线（黄金螺旋线）

偶然看到斐波那契螺旋线(黄金螺旋线)的定义及画图方法,试着用JS画了一下,很漂亮,很好玩具体定义及画法大家查一下就有了,很简单. 以下是代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>FibonacciSequence</title> </head> <body> <

体验usually.js的管道函数——pipe函数

体验usually.js的管道函数——pipe函数 usually.js 是一个面向现代 Web 开发的 JavaScript 函数库,基于 ES6 开发.最新版本2.4.1,最新版本usually.js增加管道函数—— pipe 函数.什么是管道函数?管道函数,其作用是将前一步的结果直接传参给下一步的函数,从而省略了中间的赋值步骤,可以大量减少内存中的对象,节省内存. 基本使用 usually.js 管道函数 pipe 的管道操作符 |> 允许以一种易读的方式去对函数链式调用.本质上来说,管道

js画一棵树

用纯js画一棵树.思路: 1.一棵树的图片,作为页面背景: 2.通过html5中的canvas画布进行遮罩: 3.定时每隔10ms,从下往上清除1px的遮罩: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>My JS tree</title> <style> body { width: 1000px; height: 570px;

jquery.wordexport.js打印echarts.js画出的柱状图

jquery.wordexport.js打印echarts.js画出的柱状图. echarts画出的图是不能直接打印出来的(echarts的柱状图是用canvas画出来的),而jquery.wordexport.js只能打印出图片,所以我先把echarts柱状图换成图片再去打印的. 用echarts.js的API中的getDataURL()方法:导出图表图片,返回一个 base64 的 URL,可以设置为Image的src. <div id="tubi"></div&

纯JS画点、画线、画圆的方法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

JS画几何图形之三【正弦曲线】

数学式:y=Asin(ωx+φ)+k 样例:http://www.zhaojz.com.cn/demo/draw7.html 依赖:[点].[直线] JS函数的声明: //画正弦曲线 //dot 原点 //amplitude 振幅 -- A //initialPhase 初相 -- φ //setover 偏距 -- k //palstance 角速度 -- ω //len 周期数 function drawSinusoid(dot, amplitude,initialPhase,palstan

JS画几何图形之一【直线】

JS画图的想法经过大脑的时候,觉得有点意思,所以就实践了一番.JS画图为系列文章,本是讲点.线和面先看样例:http://www.zhaojz.com.cn/demo/draw5.html 一.点这里的点我们使用span标签表示 //描点,参数有点的大小,颜色,点的坐标和标签; 很明显opts参数是一个对象 function drawPoint(opts){ document.write("<span id='"+opts.point[0]+""+opts

用 D3.js 画一个手机专利关系图, 看看苹果,三星,微软间的专利纠葛

前言本文灵感来源于Mike Bostock 的一个 demo 页面原 demo 基于 D3.js v3 开发, 笔者将其使用 D3.js v5 进行重写, 并改为使用 ES6 语法. 源码: github 在线演示 : demo 效果可以看到, 上图左上角为图例, 中间为各个手机公司之间的专利关系图. 图例中有三种线段: 红色实线: 正在进行专利诉讼 (箭头指向方为被诉讼方) 蓝色虚线: 诉讼已经结束绿色实线: 专利已经授权实现下面让我们看看如何一步步实现上图的效果. 分析数据 [

js画线

<body> <div id="main"> </div> <div id="fd" style="filter:alpha(opacity=100);opacity:1;position: absolute;text-align: center; z-index:9999; width: 100px; height: 78px; left: 155px; top: 177px; border-right: #00

【示例代码】HTML+JS 画图板源码分享

一个有趣的画图板, 用了 HTML5中的本地存储.下载.canvas 等技术,这个项目中用到了canvas 的很多基础功能,初学者可以学习一下 . 建议开发童鞋使用统一开发环境UDE来进行查看.调试.开发~~~统一开发环境是一款HTML5跨平台一站式应用开发.调试和部署工具.通过整合多种手机应用的开发包(SDK)及对应的Eclipse Plugin.跨平台中间件.中国移动开发者社区服务件,支持HTML5跨平台开发,原有Java跨平台插件支持Android.Symbian.Kjava的跨平台和原生

JS画几何图形之六【过直线外一点作垂线】

样例:http://www.zhaojz.com.cn/demo/draw10.html 依赖:[点].[直线] //过直线外一点画垂线 function drawVerticalLine(point, line){ //画辅助线-start var color = 'DarkRed'; //垂线的颜色 var color2 = "#ccc"; //其它辅助线的颜色 drawPoint({ pw:2,ph:2,color:'DarkRed',point: line[0] }); dra

JS画几何图形之五【过圆外一点作切线】

样例:http://www.zhaojz.com.cn/demo/draw9.html 依赖:[点].[直线].[圆] //画切线 //point 圆外的一点 //dot 圆心 //r 半径 function drawCircleTangent(point, dot, r){ //画辅助线-start var color = 'DarkRed'; //切线的颜色 var color2 = "#ccc"; //其它辅助线的颜色 drawLine(dot, [dot[0]+9*r,dot[

JS画几何图形之四【饼图】

饼图是将一个圆分割为多个扇形. 样例:http://www.zhaojz.com.cn/demo/draw8.html 依赖:[扇形] //饼图 //dot 圆点 //r 半径 //data 数据(一维数组) function drawPie(dot, r, data){ if(data && data.length > 0){ var accumulationAngleOfSlope = new Number(0); //累计偏移角度 var total = new Number(

JS画几何图形之二【圆】

半径为r的圆上的点p(x,y)与圆心O(x0,y0)的关系: x = x0+rcosA; y = y0+rsinA ,A为弧度样例:http://www.zhaojz.com.cn/demo/draw6.html 依赖:[点].[直线] 一.圆 //圆形/椭圆 //dot 圆点 //r 半径 //compressionRatio 垂直压缩比 function drawCircle(dot, r, compressionRatio, data){ var pstart = [dot[0]+r,

d3.js画折线图

下载d3.zip,并解压到网页文件所在的文件夹 windows下,在命令行进入网页文件夹,输入 python -m http.server 在浏览器中输入127.0.0.1:8000/xxx.html 示例如下,html文件和data存在同一个目录下 https://bl.ocks.org/mbostock/3884955 <!DOCTYPE html> <meta charset="utf-8"> <style> path { stroke-wid

canvas+js画饼状图

效果: 源码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>饼状图</title> </head> <body> <canvas id="canvas"></canvas> <script> (function () {

D3.js画思维导图（转）

思维导图的节点具有层级关系和隶属关系,很像枝叶从树干伸展开来的形状.在前面讲解布局的时候,提到有五个布局是由层级布局扩展来的,其中的树状图(tree layout)和集群图(cluster layout)布局制作出来的图具有“树形”.因此,可以凭借这两种布局来制作思维导图. 1. 构造思路树状图布局,将一个具有层级关系的对象root转换成节点数组nodes时,情况如下.有一个root对象: { name: "node1", children: [ { name: "node

用D3.js画树状图

做项目遇到一个需求,将具有层级关系的词语用树状图的形式展示它们之间的关系,像这样: 或者是这样: 上面的图片只是样例,跟我下面的代码里面用的数据不同网上有很多这种数据可视化展示的js控件,我这里选择了D3.js. 首先在html页面需要包含D3的js文件,其次我们需要将数据构造成json格式,然后存入到一个d3.json文件 { "name":"如何学习D3", "children": [ { "name":"预备

SVG.JS 画弧线

需求描述: 使用svg.js,绘制一个弧线.下图绿色弧线. 准备工作: 1.了解SVG Path中的A指令详细文档,请戳这里给定x半径.y半径后,经过指定的两点,可以有2个椭圆,因此两点间有2条弧线,一条大弧线,一条小弧线. 所以,A指令的参数设置如下: 绝对坐标 A rx ry x-axis-rotation large-arc-flag sweep-flag x y 相对坐标 a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy

d3.js ---画坐标轴

画坐标轴 //使用d3的svg的axis()方法生成坐标轴 var x_axis = d3.svg.axis().scale(scale_x), y_axis = d3.svg.axis().scale(scale_y) g.append("g") .call(x_axis) 页面效果如下:这个时候x轴在页面的上方,不在我们想要的位置,可以通过设置transform属性将坐标轴移到自己想要的位置画y轴 g.append("g") .call(y_axis) 效果如

three.js 画管道

热门专题