three.js a-frame 3D展厅

three.js-走进3d的奇妙世界一创建一个三维场景

一.git代码仓库地址 git clone https://github.com/josdirksen/learning-threejs-third 下载并解压二.创建一个三维场景如下图所示是一个三维场景,包括了一个几何体,球,平面,坐标系等等. 那么这些东西究竟是怎么实现呢,在未了解three.js之前,我也一直对这些东西感到疑惑.今天就带大家一起走进3d的奇妙世界. 大家都知道在现实生活中,我们能看到或者感觉到阳光,雨水,高山,风等等,那么在3d的世界中这么东西都是以怎么样子构建的

如何用webgl(three.js)搭建一个3D库房,3D密集架,3D档案室（升级版）

很长一段时间没有写3D库房,3D密集架相关的效果文章了,刚好最近有相关项目落地,索性总结一下与之前我写的3D库房密集架文章<如何用webgl(three.js)搭建一个3D库房,3D密集架,3D档案室,-第二课>相比,本次做了一些效果上的升级,以及更加贴合用户应用实际. 密集架库房再档案管理,土壤监测,标本存储等各个行业应用的比较多,从早期的货架到后来的手摇式密集架再到现在的全自动密集架,硬件上都做了升级改进. 在环境.安防监控这一块,密集架方案提供商也配套的加上了八方感知,视频监控,温湿度

js渲染的3d玫瑰

参看下面链接: 程序员最美情人节礼物:JS渲染的3D玫瑰

Selenium常用API用法示例集----下拉框、文本域及富文本框、弹窗、JS、frame、文件上传和下载

元素识别方法.一组元素定位.鼠标操作.多窗口处理.下拉框.文本域及富文本框.弹窗.JS.frame.文件上传和下载元素识别方法: driver.find_element_by_id() driver.find_element_by_name() driver.find_element_by_class_name() driver.find_element_by_tag_name() driver.find_element_by_link_text() driver.find_element_b

使用webgl(three.js)搭建一个3D智慧园区、3D建筑，3D消防模拟，web版3D,bim管理系统——第四课

序:这段时间忙于奔波,好久没有更新了,今天更新一下,继续上节课的完善讲解,算是对前段时间的一个总结吧.披星戴月的时光也算有点应用效果了. 对于webgl(three.js)性能这一块我在上节课<使用webgl(three.js)搭建一个3D建筑,3D消防模拟——第三课>已经给了详细的说明比较与解决方案技术交流邮箱1203193731@qq.com 本节概要: 继上节课我们说的消防相关的操控模拟,本节课我们继续讲解用three.js创建大场景模拟与实现本节课我们主要实现一个园区的消防三维模拟

echart.gl.js实现动态3D柱状图

echart.gl.js实现动态3D柱状图一.总结一句话总结:演示页面的源代码里面一定有所需的所有的js. 二.[js实践篇]——echart.gl.js实现动态3D柱状图前言本公司的项目需求主要是根据各个省的信用度的高低情况做一个动态的3D动态,能够展示省的信用高低值! 内容 1.准备工作 jquery.min.js 最新的echart.min.js,官网在此自行下载 echart-gl.min.js 2.代码实现 <!DOCTYPE html> <html> <h

three.js实现世界3d地图

概况如下: 1.THREE.Shape绘制世界地图平面地图: 2.THREE.ExtrudeGeometry将绘制的平面沿着Z轴拉伸,实现3d效果: 效果图如下: 预览地址:three.js实现世界3d地图初始化场景.相机.渲染器,设置相机位置,初始化光源,光源采用HemisphereLight,设置光源位置为场景中心位置,并将光源加入场景中. // 初始化场景 var scene = new THREE.Scene(); // 初始化相机,第一个参数为摄像机视锥体垂直视野角度,第二个参数为摄

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

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

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

接着上一篇文章,<如何用webgl(three.js)搭建处理3D园区.3D楼层.3D机房管线问题(机房升级版)-第九课(一)> 继续讲解关于三维数据中心管线可视化的解决方案. 上一篇我们主要讲解了园区的方案,这一片主要讲解楼层内的以及机房内的可视化管线方案. 因为是继着上一篇文章,这里就不做概念性讲解了. 闲话少叙,我们继着上一篇直接上干货. 1.首先,我们双击某移动楼,进入楼层内部,看一下楼层结构,效果如下: 进入楼层后,线展开显示楼层以及主要管线全貌,然后再合并楼层,隐藏管线. 实现代码

如何用webgl(three.js)搭建处理3D隧道、3D桥梁、3D物联网设备、3D高速公路、三维隧道桥梁设备监控-第十一课

开篇废话: 跟之前的文章一样,开篇之前,总要写几句废话,大抵也是没啥人看仔细文字,索性我也想到啥就聊啥吧. 这次聊聊疫情,这次全国多地的疫情挺严重的,本人身处深圳,深圳这几日报导都是几十几十的新增病例,整个深圳都按下了暂停键.在此也真诚的感谢在一线辛苦抗疫的医护工作者.自愿者以及政府工作人员们. 疫情起起伏伏,着实对经济的冲击还是挺大的,大家也都切身感受到了疫情对我们的生活影响了,社会上也出现了一些质疑的声音,有质疑动态清零的,也有标榜国外放弃抗疫的.国外的国情.政治文化,我们且按下不表. 且说

如何用three.js(webgl)搭建3D粮仓、3D仓库、3D物联网设备监控-第十二课

序: 最近因为疫情,居家办公,索性翻翻之前的项目案例,总结总结. 这次疫情,深圳停摆,群众也挺恐慌的,封闭前一天,超市被抢购一空,虽然官方媒体一再强调,材米油盐蔬菜肉类管够,但是任然挡不住群众们的抢购"热情".从大家角度出发,此操作虽然不可取,但是也是无可厚非吧.毕竟从古至今,都是民以食为天. 不过大家真不用担心,我国粮食储备在任何时候都是绝对保障的了人民群众的基本需求的.想想08年的粮食大战,大量国际资本出逃股市等资本市场,将目光投向了石油.粮食等大宗商品,想通过粮食来收割其它国家,

如何用webgl(three.js)搭建一个3D库房,3D仓库,3D码头,3D集装箱可视化孪生系统——第十五课

序又是快两个月没写随笔了,长时间不总结项目,不锻炼文笔,一开篇,多少都会有些生疏,不知道如何开篇,如何写下去.有点江郎才尽,黔驴技穷的感觉. 写随笔,通常三步走,第一步,搭建框架,先把你要写的内容框架搭建出来:第二步,添砖,在框架基础上,填写各部分内容:第三步,加瓦,再写好的内容上进行修改,润湿.然后文章的质量,就因人而异了.但不管怎么说,得写,得练,得经受的起各路能人志士的批评指教,至于改不改,那也是写文章的人的事了(通常我是认真接受批评指教的). 你看,写道这里,我又不知道再序些啥了,索性

如何用webgl(three.js)搭建一个3D库房,3D仓库3D码头,3D集装箱,车辆定位,叉车定位可视化孪生系统——第十五课

序又是快两个月没写随笔了,长时间不总结项目,不锻炼文笔,一开篇,多少都会有些生疏,不知道如何开篇,如何写下去.有点江郎才尽,黔驴技穷的感觉. 写随笔,通常三步走,第一步,搭建框架,先把你要写的内容框架搭建出来:第二步,添砖,在框架基础上,填写各部分内容:第三步,加瓦,再写好的内容上进行修改,润湿.然后文章的质量,就因人而异了.但不管怎么说,得写,得练,得经受的起各路能人志士的批评指教,至于改不改,那也是写文章的人的事了(通常我是认真接受批评指教的). 你看,写道这里,我又不知道再序些啥了,索性

如何用webgl(three.js)搭建一个3D库房-第二课

闲话少叙,我们接着第一课继续讲(http://www.cnblogs.com/yeyunfei/p/7899613.html),很久没有做技术分享了.很多人问第二课有没有,我也是抽空写一下第二课. 第一课程提到了在库房的基础上添加上下架消防温湿度等等控制刚好最近有接到一个客户的需求是和库房差不多的项目只是不是库房了是档案室但是基本操控还是差不多的也有文件上下架什么的那么第二课我们就按照客户的需求先做一个概述性的展现特此说明:为了减少网络传输带宽我特意用ScreenT

如何用webgl(three.js)搭建一个3D库房,3D密集架,3D档案室,-第二课

闲话少叙,我们接着第一课继续讲(http://www.cnblogs.com/yeyunfei/p/7899613.html),很久没有做技术分享了.很多人问第二课有没有,我也是抽空写一下第二课. 第一课程提到了在库房的基础上添加上下架消防温湿度等等控制刚好最近有接到一个客户的需求是和库房差不多的项目只是不是库房了是档案室但是基本操控还是差不多的也有文件上下架什么的那么第二课我们就按照客户的需求先做一个概述性的展现特此说明:为了减少网络传输带宽我特意用ScreenT

js中Frame框架的属性获取(1)

js中window和document对象及如何操作iframe 一. window对象 . 什么是window对象? Window对象表示浏览器打开的窗口.如果文档包含iframe或者是frame标签,浏览器会为HTML文档创建一个window对象.所有浏览器都支持该对象. 补充:什么是父窗口和子窗口? 打开一个html页面就是一个窗口.如果该html中包含iframe或者是frame标签,则iframe或者frame就是子窗口,包含iframe或者是frame标签的窗口就是父窗口.个人理解,一

如何用webgl(three.js)搭建一个3D库房-第一课

今天我们来讨论一下如何使用当前流行的WebGL技术搭建一个库房并且实现实时有效交互第一步.搭建一个3D库房首先你得知道库房长啥样,我们先来瞅瞅库房长啥样(这是我在网上找的一个库房图片,百度了“库房”一下,找不到合适的全景,我们也只能窥一斑思全豹了,就它了,特此声明:此图片归原作者所有非被人所拍,拿来只是给读者做个案例) 下面是我用webgl做出来的3D效果图(当前展示没有货物时的整体模拟): 第二部.开干 1. 首先我们创建一个页面,引入各种需要的库文件 <script src="/j

使用webgl(three.js)搭建一个3D建筑，3D消防模拟——第三课

项目背景消防安全一直是各大都市关注的重要课题,在消防体系中,特别是高楼消防体系中,消防系统整体布控与监控,火情有效准确定位,防火器材定位,人员逃生路径规划,火情预警,消防演习都是特别重要的环节.所以一套直观的,迅速治控的系统展现,可体验式演戏游戏也就变得那么的不可或缺了. 解决方案技术选型:使用webGL技术,无插件无安装方案.创建三维建筑消防模拟在模型的建模方案选择上有两种方式: 1.使用建模工具(3dmax.autocad.blender等等)创建模型优点:模型搭建速度快,开发周期短

JS实现类似图片3D效果

其实这样的效果目前很多网站上都有其实以前也写过一个只是当时代码只是为了实现而已,代码很乱,所以现在有业余时间研究了下,其实也并没有什么特殊地方很类似于左右控制按钮切换图片的思路.效果如下: 可能录制的时候有点卡 . 具体思路: 1. 首先和左右箭头切换图片思路是一模一样的点击下一页按钮时候外层容器left = 一张图片的宽度×当前的索引index 同理点击上一页按钮也一样然后加点动画效果改变相对应的宽度和高度就可以实现.思路其实很简单的.所以就半斤八两就写了一个,希望各位高

Selenium示例集锦--常见元素识别方法、下拉框、文本域及富文本框、鼠标操作、一组元素定位、弹窗、多窗口处理、JS、frame、文件上传和下载

元素定位及其他操作 0.常见的识别元素的方法是什么? driver.find_element_by_id() driver.find_element_by_name() driver.find_element_by_class_name() driver.find_element_by_tag_name() driver.find_element_by_link_text() driver.find_element_by_partial_link_text() driver.find_eleme

js实现frame框架部分页面的刷新

一.先来看一个简单的例子: 下面以三个页面分别命名为frame.html.top.html.bottom.html为例来具体说明如何做. frame.html 由上(top.html)下(bottom.html)两个页面组成,代码如下: 复制代码代码如下:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> frame &

three.js a-frame 3D展厅

热门专题