技术标签: threejs 管子
一、页面效果
二、技术选择
中间的建筑相关的显示和效果都是threejs实现的
左右两侧用的是echarts
三、代码结构
1. 画布
用js自己创建一个放置画布的div
container = document.createElement(‘div‘)
document.body.appendChild(container)
2. 场景的创建
之后的比如几何体 摄像机 光源都是放在场景里面
scene = newTHREE.Scene();
renderer= new THREE.WebGLRenderer({ antiakuas: true})
renderer.setClearColor(new THREE.Color("rgba(3,19,52)"), 1)//整个画布的背景颜色
renderer.setSize(window.innerWidth, window.innerHeight)
renderer.shadowMapEnabled= true;//需要阴影映射
container.appendChild(renderer.domElement)
3. 摄像机
摄像机是有两种类型的
透视投影摄像机:PerspectiveCamera会让物体近大远小;
正交投影摄像机:OrthographicCamera物体渲染的大小是一致的;
camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 1, 1000)
camera.position.set(0, 150, 300)//相机位置
camera.lookAt(new THREE.Vector3(0, 0, 0))//相机观看物体的位置
4.光源
光有基本的四种类型:
环境光( AmbientLight ):笼罩在整个空间无处不在的光
点光源( PointLight ):向四面八方发射的单点光源
聚光灯( SpotLight ):发射出锥形状的光, 模拟手电筒,台灯等光源
平行光( DirectinalLight ):平行的一束光,模拟从很远处照射的太阳光
var ambientLight = new THREE.AmbientLight(0x606060)//环境光
scene.add(ambientLight)var spotLight = new THREE.SpotLight(0xffffff)
spotLight.position.set(200, 160, 85)
spotLight.castShadow= truescene.add(spotLight)
5.创建栅格平面
Geometry这是存储几何体相关的信息,是为了减少CPU的消耗
栅格用的是线段画出来的
function plane() {var geometry = newTHREE.Geometry();
geometry.vertices.push(new THREE.Vector3(-800, 0, 0));
geometry.vertices.push(new THREE.Vector3(800, 0, 0));for (var i = 0; i < 50; i++) {var line = new THREE.Line(geometry, new THREE.LineBasicMaterial({ color: "rgba(38,55,84,1)", opacity: 1}));
line.position.z= (i * 50) - 800;
scene.add(line);var line = new THREE.Line(geometry, new THREE.LineBasicMaterial({ color: "rgba(38,55,84,1)", opacity: 1}));
line.position.x= (i * 50) - 800;
line.rotation.y= 90 * Math.PI / 180;
scene.add(line);
}
}
6.建筑
建筑用的是立方体,需要注意的是可以自己设置一个图片,然后将图片作为纹理贴到立方体上面来;
根据移动立方体的位置,来拼合成建筑;
var loader = newTHREE.TextureLoader();
loader.load("./img/cude1.png", (texture) =>{var geometry = new THREE.BoxGeometry(30, 5, 20);var material = new THREE.MeshBasicMaterial({ color: 0x739783, map: texture });
buildArr[i]= newTHREE.Mesh(geometry, material);
buildArr[i].position.x= 10buildArr[i].position.y= 5 + i * 5buildArr[i].position.z= -10scene.add(buildArr[i]);
})
7.视角的移动
当我们看到视角的远近,其实是摄像机的移动,我们通过修改摄像机的位置,来达到响应的目的;
var cameraz = 10;var camerax = 10;vartimer;
timer=setInterval(function () {
cameraz+= 1camerax+= 1camera.position.x= 50 -cameraz
camera.position.z= 100 +camerazif (cameraz >= 300 && camerax >= 50) {
clearInterval(timer)
}
},30)for (var i = 0; i < 30; i++) {
buildArr[i].position.y= 5 + i * 5}
8.车流
我们先是设置一下管道的几何体和小球,然后同样的修改小球的x y z值来进行流动,需要注意的是小球需要根据管道的路径进行流动,
var curve = newTHREE.CatmullRomCurve3([new THREE.Vector3(-150, 2, -280),new THREE.Vector3(-110, 2, -50),new THREE.Vector3(-10, 2, 0),new THREE.Vector3(100, 2, 100),new THREE.Vector3(140, 2, 200)
],false/*是否闭合*/);
function traffic() {//一条
var tubeGeometry2 = new THREE.TubeGeometry(curve, 100, 2, 50, false);var tubeMaterial2 = newTHREE.MeshPhongMaterial({
color:"rgb(45,245,216)",
transparent:true,
opacity:1,
});var tube2 = newTHREE.Mesh(tubeGeometry2, tubeMaterial2);
scene.add(tube2);//物体
geometryP= new THREE.BoxGeometry(5, 5, 5);var materialP = new THREE.MeshBasicMaterial({ color: ‘rgb(165,244,7)‘});
circleP= newTHREE.Mesh(geometryP, materialP);
scene.add(circleP);
geometryP.rotateY(Math.PI/ 2);//circleP.position.set(-80, -40, 0);
}if (progress > 1.0) {
circleP.position.set(-150, 2, -280);
progress= 0
//return;//停留在管道末端,否则会一直跑到起点 循环再跑
}
progress+= 0.001; //0.0009;
if(curve) {
let point=curve.getPoint(progress);if (point &&point.x) {
circleP.position.set(point.x, point.y, point.z);
}
}
9.事件
window.addEventListener("click", onDocumentMouseMove, false)
四、相关资料
原文:https://www.cnblogs.com/GainLoss/p/12706530.html
文章浏览阅读2.2k次,点赞2次,收藏10次。物联网开发技术栈 内容简介作为互联网技术的进化,物联网开发并非孤立的技术栈,而是向上承接了互联网,向下统领了嵌入式硬件开发的一个承上启下的全栈开发技术。虽然我们并不能预测物联网技术栈最终的样子:统一的开发语言是 JavaScript 还是 Python 亦或者其他编程语言;HTTP、WebSockets、MQTT、CoAP 等协议谁会是最后的赢家,并且随着物联网的不断进化,甚至我们..._物联网技术java技术栈
文章浏览阅读674次,点赞10次,收藏11次。Git是一个分布式版本控制工具,通常用来对软件开发过程中的源代码文件进行管理,通过Git仓库来存储和管理这些文件,Git仓库分为两种:指的是存储在各个开发人员自己本机电脑上的Git仓库指的是远程服务器上的Git仓库commit:提交,将本地文件和版本信息保存到本地仓库push:推送(上传),将本地仓库文件和版本信息上传到远程仓库pull:拉取(下载),将远程仓库文件和版本信息下载到本地仓库。
文章浏览阅读4.6k次。pprof (gperftools)使用谷歌的工具集,可查看CPU采样结果。pprof (google-perftool),用于来分析程序,必须保证程序能正常退出。使用步骤:1.准备工具,先安装工具包libunwind-1.1.tar.gzgperftools-2.1.tar.gz解压后 configure到系统默认路径即可,之后直接-lprofiler 2.再安装图形工具sudo yum ins..._gperftools pprof
文章浏览阅读118次。JavaScript BOM:Navigator、History、Location
文章浏览阅读6.2k次,点赞16次,收藏66次。在前面通过使用MongoDB在命令窗口操作数据库,而MySQL数据库也同样可以在命令窗口使用sql语句操作数据库,在安装数据库的时候提到可以安装这个图形化工具的,为了节省安装时间和卡顿选择后续安装MongoDB图形化工具,在MySQL数据中同样也有这个MySQL workbench 图形化工具可以选择进行安装;那么本篇就来安装MongoDB的图形化工具 — MongoDBCompass。_mongodb数据库图形化工具
文章浏览阅读1.4k次,点赞13次,收藏10次。未来城市的大模型包括城市总体规划、城市交通运输管理、城市公共安全和应急管理、经济发展和产业园区发展、社区发展、资源承载调控、污染调控、社会资源优化调控、基础设施调控、人口研究等模型。其对城市要素、关键指标、函数、流程、模型、平台、技术、资金、人才、市场、自然环境等内外部因素进行仿真建模。采用物联网、云计算、大数据、数字孪生和人工智能等技术来获取地、物、人、组织、环境、社会、经济、业务逻辑和运营规律等相关数据。、物联网、大数据、云计算、数字孪生、元宇宙、可穿戴生理传感器、分布式新能源等各类新技术。
文章浏览阅读3.6k次。在上一篇文章中,我们知道了如何使用配置文件自定义主题,以允许商店所有者自己更改Shopify主题。 如上所述,这些设置会在用户单击管理面板的在线商店>主题部分中的自定义主题按钮时显示,并在主题开发文件的config / settings_schema.json文件中定义。在这篇文章中,我们将了解如何访问这些设置并在开发主题时调用它们。调用配置要调用模板中的配置信息,需要使用li..._shopify自定义主题
文章浏览阅读2.6k次。1.查看本地分支git branch绿色表示当前分支#######################################################2.查看远程分支git branch -a#######################################################3.切换分支git checkout branch_name..._本地分支 '(no branch)' (远程分支 = '(no branch)') 是无效的。引用名称必须遵循
文章浏览阅读2.2w次,点赞18次,收藏28次。java连接mysql出现The server time zone value '�й���ʱ��' is unrecognized的解决方法在Idea中连接数据库是抛出The server time zone value ‘�й���ʱ��’ is unrecogni错误 原因是因为使用了Mysql Connector/J 6.x以上的版本,然后就报了时区的错误。解决办法在配置url中添..._java.lang.runtimeexception: the server time zone value '嚙請對蕭嚙踝蕭
文章浏览阅读671次,点赞11次,收藏9次。并且在这个固定的serverless服务中去增加这个,应该不是应用元服务开发者有这个加入权限的,应该是要统一解决,类似实现和手机注册验证一样的,直接可以使用或者少量代码配置即可使用。另外就是如果是新的元服务应用,使用的serverless,如果不支持华为账户功能,就没法上架,这个也是比较麻烦的,前面已经使用serverless开发基本完成或者已经完成的,得用其他方式去实现才行吧。对于已经上架的应用和元服务、升级也没法进行。3月1日的时间是快到了。
文章浏览阅读5.7k次,点赞2次,收藏8次。准备工作:安装XAMPP,登陆apache,mysql,并通过phpadmin来创建数据库,新建一个表,插入一些数据:http://localhost/phpmyadmin,最好设置密码,不然后面连接数据库的时候可能会无法访问设置密码方式:修改密码--->一定要使用生成的密码来登陆,包括后面的数据库url也是。我简历的数据如下:这时候就可以在eclipse中编程开发_xammp进入可视化界面
文章浏览阅读119次。转自:http://blog.csdn.net/cailiang517502214/article/details/4797642spring.jar是包含有完整发布的单个jar包,spring.jar中包含除了spring-mock.jar里所包含的内容外其它所有jar包的内容,因为只有在开发环境下才会用到spring-mock.jar来进行辅助测试,正式应用系统中是用不得这些类的。...