技术标签: 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
文章浏览阅读606次。浏览器、鼠标、键盘 操作 maximize() 设置浏览器最大化setSize() 设置浏览器宽高back() 模拟浏览器后退按钮forward() 模拟浏览器前进按钮refresh() 刷新页面(F5) Actions 类提供了鼠标操作的常用方法:contextClick() 右击clickAndHold() 鼠标点击并控制doubleClick() 双..._selenium自动化测试进阶使用
文章浏览阅读1.6k次。import java.math.BigDecimal;/** * Utils - 金额转为大写汉字 */public final class NumberToCNUtils { /**汉语中数字大写*/ private static final String[] CN_UPPER_NUMBER = { "零", "壹", "贰", "叁", "肆", "伍", "陆..._java两位小数金额转大写
文章浏览阅读1.4w次,点赞16次,收藏116次。CMM,即“软件能力成熟度模型”,是对组织软件过程的描述,核心内容是将软件开发视为一个过程,并且根据相应的原则对于软件开发进行相应的监控和研究。_cmm
文章浏览阅读2.5k次。在根目录中添加 unocss.config.js 文件是为了提供更细粒度的配置选项给 @unocss/webpack 插件。通过这个配置文件,你可以定制化 UnoCSS 的行为,例如定义主题样式、配置插件、启用或禁用特定功能等。在 Vue CLI 项目中,默认情况下,你应该在根目录创建一个 unocss.config.js 文件来配置 UnoCSS。这个文件会被 @unocss/webpack 插件自动识别并加载。具体配置请查阅官网文档。_vue2 unocss
文章浏览阅读2.9k次,点赞26次,收藏82次。多态需要两个特性:(1)方法重写(override):父类与子类具有函数签名完全相同的方法。(2)向上类型转换(upcasting):用一个父类指针指向子类对象的时候,假如调用的是虚函数,会自动暂时将该指针转换为子类类型的指针。虚函数的存在就是为了类型转换,即使没有虚函数也能重写方法。虚函数并不是为了解决函数重写问题的。假如你去在父类和子类中都写上函数签名相同的方法,同样也能重写函数。例如 我们先写一个没有虚函数的例子结果为是完全没问题的!是的,即使不加virtual,也能实现方法重写!假如我用子类_虚表指针
文章浏览阅读5k次。1、命令格式ffmpeg [global_options] {[input_file_options] -i input_url} ... {[output_file_options] output_url} ...global_options:全局选项input_file_options:输入文件相关的选项output_file_options:输出文件相关的选项-i input_url:输入文件,可以有多个输入文件,每个输入文件前都要加“-i”选项output_url:输出文件2、简述_ffmpeg -vf命令
文章浏览阅读2.7k次。我k40刷完后虽然串号这些都有了也识别卡了但是没信号是因为modem分区用的工厂包的文件还是我手机坏了或者qcn有问题如果你在没有改qcn的情况下刷回原系统的modem分区文件你又会进入nv损坏无限重启[doge]这时你就会发现电脑设备管理器会出现新的4个新设备端口打开QPST就可以刷基带了(k40在正常的系统我觉得应该也可以用这种方式开启端口备份基带,改串号可以用星海之类的软件正常勿改)。以上都是经验之谈具体看个人[坏笑][坏笑][坏笑][坏笑]从折腾了这几天的红米k40来看。从k40救砖经验来看。_9008备份基带
文章浏览阅读4k次。有幸参与了CSDN主办的1024程序员活动-岳麓对话,聆听各位专家畅谈中国软硬件产业的根技术以及前沿科技的发展现状和未来。听程序员们聊技术,都比较实在落地,在谈到如果你有个孩子在读大学你会推荐他学什么专业和技术时,各位大佬都集体推荐本专业或本专业的基础学科,都充满了对自己行业的自豪感。小冰CEO李笛说:学习人工智能,未来如果技术被颠覆了,等于是自杀,而不学人工智能,则相当于是他杀。百度副总裁马杰说:我们应站在时代的肩膀上,人工智能在深刻地改变我们的世界,未来会持续产生影响。国科量子副总裁聂际敏说:学
文章浏览阅读1.2k次。【资源介绍】资源名称:10套知名地产Revit样板文件资源分类: BIM族库、Revit族库其他简介:10套知名地产Revit样板文件【资源下载】链接:https://pan.baidu.com/s/1qsTHMbhGkiXztPQDmJlKfQ提取码:wb33【资源截图】【免责申明】本站提供的资源下载链接均来自互联网,仅供学习研究之用,不得用于商业,请在24小时内删除!资源版权归原作者及其公司所有,如果你喜欢,请购买正版。..._地暖bim效果图
文章浏览阅读288次。课程简介软件体系结构的主题是针对复杂软件系统的高层结构、组织单元之间的相互关系的描述,以及围绕这种描述开展的各项活动,如设计、评估、实现、管理等。课程目标_西电软件体系结构
文章浏览阅读1k次。initialize specified but the data directory has files in it.”意思是初始化数据目录时发现目录里面有文件,可能原因是之前运行过命令目录中已生成文件。只要我们找到MySQL的数据目录并删除里面的文件即可解决。datadir是我们安装MySQL时默认指定的存放文件的数据目录,进入文件中删除里面的目录即可。网上搜了一下绿线标注部分语句,说是缺少libaio这个包,那就装一下。PS:如果我的方法没用的话可以试试网上说的修改文件权限的方法。_job for mysqld.service failed because the control process exited with error
文章浏览阅读1w次。各位听得最多的段子:老司机们,上车了。没错,不管是在电脑端还是移动端,都需要一款好用的浏览器。那么,老司机们都用什么浏览器,什么样的浏览器才是老司机必备的浏览器呢?来咯,这些手机浏览器比UC浏览器还好用,功能可媲美桌面浏览器,一起来看看吧。_比uc好用的手机浏览器