threejs | 易学教程

【webGl】threejs实现一个简单的动画-弹跳的小球

阅读更多关于【webGl】threejs实现一个简单的动画-弹跳的小球

在这里，我们将动态画面简称为动画（animation）。正如动画片的原理一样，动画的本质是利用了人眼的视觉暂留特性，快速地变换画面，从而产生物体在运动的假象。而对于Three.js程序而言，动画的实现也是通过在每秒中多次重绘画面实现的。为了衡量画面切换速度，引入了每秒帧数FPS（Frames Per Second）的概念，是指每秒画面重绘的次数。FPS越大，则动画效果越平滑，当FPS小于20时，一般就能明显感受到画面的卡滞现象。那么FPS是不是越大越好呢？其实也未必。当FPS足够大（比如达到60），再增加帧数人眼也不会感受到明显的变化，反而相应地就要消耗更多资源（比如电影的胶片就需要更长了，或是电脑刷新画面需要消耗计算资源等等）。因此，选择一个适中的FPS即可。 NTSC标准的电视FPS是30，PAL标准的电视FPS是25，电影的FPS标准为24。而对于Three.js动画而言，一般FPS在30到60之间都是可取的。 setInterval方法如果要设置特定的FPS（虽然严格来说，即使使用这种方法， JavaScript也不能保证帧数精确性），可以使用JavaScript DOM定义的方法： setInterval(func, msec) 其中， func 是每过 msec 毫秒执行的函数，如果将 func 定义为重绘画面的函数，就能实现动画效果。 setInterval

制作物联网可视化项目的工具-ThingJS

阅读更多关于制作物联网可视化项目的工具-ThingJS

随着科技的发展，网络逐步的成为了如今时代的主流，手机app、电脑客户端，这些都给我们的生活带来了极大的便捷，随之而来的，则是大量的数据产生，由此大数据方面如火山爆发式的崛起，风头一时无二，在进入4G时代没多久，随后又是5G时代的来临，这使得流量的限制越来越少，同时，物联网可视化行业，这一个摸着石头过河的行业，也随着互联网的推进而不断发展，在全国疫情爆发之后，网上的疫情地图可以说是实时牵动着我们的心，我们无不希望疫情能早日解决，全国人民纷纷伸出援手，可敬的白衣天使们也削去青丝，在面对危难的时候，中华儿女从不会轻易放弃，中华民族始终团结如一。针对疫情，我们首要任务是听党和国家的安排，保护好自己，不成为病毒的传播者与携带者，而这个疫情，却给我们的日常和工作带来了极大的困扰，学校推迟上课，工厂推迟复工，针对学生，老师们选择了网课的形式进行教导，而那些工厂却需要专门的人员去进行操作，即使是目前的全自动化工厂仍然需要工人在前线监测和检控，更不用说半自动化工厂了，那么如何让工厂能够跟老师通过网课教授学生一样，尽最大可能去减少损失呢？这时候，可视化这一行业算是从锦上添花的点缀物变成了雪中送炭的救心丸，虽然说即使拥有了可视化行业解决方案，也不能去给那些工厂、数据中心、智慧楼宇止损，但是在网络没有出现故障的情况下，它能够让你实时监控出对应区域的数据，将庞大的数据通过图表或者是对应产生的变化

解决 three.js 的“Texture has been resized from”警告提示

阅读更多关于解决 three.js 的“Texture has been resized from”警告提示

遇到问题在用threejs中使用canvas作为纹理添加文字的时候，遇到了 three.module.js?325f:21304 THREE.WebGLRenderer: Texture has been resized from (256x118) to (256x64) 类似的提示，添加n个就提示n个，好烦。解决方案网上很少相关信息，最后在外国网站找到了解决方案，只需要把canvas的尺寸改为2的n次幂就可以了，例如 256*256。问题原因图片的纹理像素在threejs、Unity3D等3d引擎中需要遵循2的N次方，由图形学决定的。非2的N次方的图片会转化为2的N次方图片（500 x 500 → 512 x 512）,是因为转化过程比较慢，由运行程序转换十分耗时，所以threejs、Unity3D等引擎提前将资源转化为符合标准的图片。 2的n次幂数值 2^0=1 2^1=2 2^2=4 2^3=8 2^4=16 2^5=32 2^6=64 2^7=128 2^8=256 2^9=512 2^10=1024 2^11=2048 2^12=4096 2^13=8192 2^14=16384 2^15=32768 2^16=65536 2^17=131072 2^18=262144 2^19=524288 2^20=1048576 … 来源： CSDN 作者：大话主席

threejs利用svg拉伸形成立体图

阅读更多关于 threejs利用svg拉伸形成立体图

1.效果 1.svg图片转化成threejs对象这里我们用到了别人写好的函数 transformSVGPathExposed() ，这个函数传入的变量是svg图片的路径字符串，输出的是 threejs 中 shape 对象。 https://johnson2heng.github.io/three.js-demo/lib/js/libs/d3-threeD.js 我们在vue中引入上述js文件需要做一点小小修改。原文件如下： /* This Source Code Form is subject to the terms of the Mozilla Public * License, v. 2.0. If a copy of the MPL was not distributed with this file, * You can obtain one at http://mozilla.org/MPL/2.0/. */ var transformSVGPathExposed ; function d3threeD ( exports ) { const DEGS_TO_RADS = Math . PI / 180 , UNIT_SIZE = 1 ; const DIGIT_0 = 48 , DIGIT_9 = 57 , COMMA = 44 , SPACE = 32 ,

threejs实现天空盒

阅读更多关于 threejs实现天空盒

1.天空盒概述以及效果类似这种全景图片，我们将图片切成六个小图片，分别将六个小图片贴在一个正方体的里面，这样当我们置身于这个正方体里面的时候，就像在看全景图一样。效果如下： 2.threejs代码 var path = '/sky/' var format = '.jpg' var urls = [ path + 'px' + format , path + 'nx' + format , path + 'py' + format , path + 'ny' + format , path + 'pz' + format , path + 'nz' + format ] var materials = [ ] for ( var i = 0 ; i < urls . length ; ++ i ) { var loader = new this . THREE . TextureLoader ( ) // loader.setCrossOrigin( this.crossOrigin ); var texture = loader . load ( urls [ i ] , function ( ) { } , undefined , function ( ) { } ) materials . push ( new this . THREE .

Threejs中的材质贴图

阅读更多关于 Threejs中的材质贴图

最近项目需要折腾three.js，有关three.js几点说明 1.作用 threejs适合创建简单的模型视图 2.对于复杂的模型图（如：室内模型图）需要美术3D制作，前端导成特定格式文件(如*.mtl/*.obj 格式文件 )，之后利用threejs插件MTLLoader.js/OBJLoader.js导入数据即可基础案例 https://github.com/AragornZJF/ThreeExample.js Chapter7 .3.2 或者游戏案例 http://www.w3cmark.com/2016/threejs-mark-02.html 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>材质</title> 6 <style> 7 #canvas-frame { 8 width: 100%; 9 height: 600px; 10 } 11 </style> 12 </head> 13 <body onload="threeStart()"> 14 <div id="canvas-frame" ></div> 15 </body> 16 <script type="text/javascript" src="js/three.js"></script> 17 <script

龙之谷手游WebVR技术分享

阅读更多关于龙之谷手游WebVR技术分享

主要面向Web前端工程师，需要一定Javascript及three.js基础；本文主要分享内容为基于three.js开发WebVR思路及碰到的问题；有兴趣的同学，欢迎跟帖讨论。目录：一、项目体验 1.1、项目简介 1.2、功能介绍 1.3、游戏体验二、技术方案 2.1、为什么使用WebVR 2.2、常用的WebVR解决方案 2.2.1、Mozilla的A-Frame方案 2.2.2、three.js及webvr-polyfill方案三、技术实现 3.1、知识储备 3.2、实现步骤 3.3、工作原理四、技术难点 4.1、程序与用户共同控制摄像头 4.2、多重蒙板贴图 4.3、镜头移动 4.4、3d自适应长度文字提示 4.5、unity3d地形导出 4.6、3dmax动画导出问题五、完整的源代码及相应组件一、项目体验 1.1、项目简介： 1.1.1、名称： “重历阿尔特里亚”——龙之谷手游手首发ChinaJoy2016预热VR小游戏 1.1.2、开发背景：基于龙之谷手游具备的3D属性，全景视角体验，以及ChinaJoy首发的线下场景，我们和品牌讨论除了基于VR的线下体验项目。由于基于Web技术较好的兼容性、开发的高效性，我们采用了WebVR技术来实现整个体验。 1.1.3、使用WebVR优势： 1.1.3.1、普通web前端工程师可以参与VR应用开发，降低了开发门槛

认识Threejs

阅读更多关于认识Threejs

Threejs定义 Threejs运行在浏览器的3d javascript库（three表示3D的意思，js表示javascript） Three主要对象 1.场景(Scene)：是物体、光源等元素的容器， 2.相机（Camera）：控制视角的位置、范围以及视觉焦点的位置,一个3D环境中只能存在一个相机 3.渲染器（Renderer）:指定渲染方式，如webGL\canvas2D\Css2D\Css3D等。 4.物体对象（Mesh）：包括二维物体（点、线、面）、三维物体、粒子 5.光源（Light）：包括全局光、平行光、点光源 6.控制器(Control): 相机控件，可通过键盘、鼠标控制相机的移动场景(Scene) 物体、光源、控制器的添加必须使用secen.add(object)添加到场景中才能渲染出来。一个3D项目中可同时存在多个scene，通过切换render的scene来切换显示场景 var scene = new THREE.Scene(); // 创建场景对象 var mesh=scene.getObjectByName("sky");//获取场景中命名的name=sky的对象方法属性 add(object) 用于向场景中添加对象。使用该方法还可以创建对象组。（几何体、光源等对象） children 用于返回一个场景中所有对象的列表，包括摄像机和光源。

ThreeJS中的点击与交互——Raycaster的用法

阅读更多关于 ThreeJS中的点击与交互——Raycaster的用法

基础概念坐标系我们的手机屏幕是二维的，但是我们展示物体的世界是三维的，当我们在构建一个物体的时候我们是以一个三维世界既是世界坐标来构建，而转化为屏幕坐标展示在我们眼前，则需要经历多道矩阵变化，中间webGL替我们操作了许多事情。世界坐标系：在webGL中，世界坐标系是以屏幕中心为原点(0, 0, 0)，且是始终不变的。你面对屏幕，你的右边是x正轴，上面是y正轴，屏幕指向你的为z正轴。长度单位这样来定：窗口范围按此单位恰好是(-1,-1)到(1,1)，即屏幕左下角坐标为（-1，-1），右上角坐标为（1,1）。屏幕坐标系： webGL的重要功能之一就是将三维的世界坐标经过变换、投影等计算，最终算出它在显示设备上对应的位置，这个位置就称为设备坐标。在屏幕、打印机等设备上的坐标是二维坐标。视点坐标系：是以视点（照相机）为原点，以视线的方向为Z+轴正方向的坐标系中的方向。webGL会将世界坐标先变换到视点坐标，然后进行裁剪，只有在视线范围(视见体)之内的场景才会进入下一阶段的计算。 Raycaster Raycaster threeJs官方文档这个类设计用于鼠标去获取在3D世界被鼠标选中的一些物体 Raycaster( origin, direction, near, far ) origin — 射线的起点向量。 direction — 射线的方向向量，应该归一标准化。

ThreeJS 服务端(node.js)渲染

阅读更多关于 ThreeJS 服务端(node.js)渲染

用node.js 渲染 Three.js。首先,安装依赖: package.json { ... "devDependencies" : { "pngjs" : "^3.4.0" , "three" : "^0.112.1" , "three-software-renderer" : "https://github.com/lanceschi/three-software-renderer.git#feature/projector-update" } , ... } 代码: const THREE = require ( "three" ) ; const SoftwareRenderer = require ( "three-software-renderer" ) ; const PNG = require ( "pngjs" ) . PNG ; const fs = require ( "fs" ) ; // Build scene with cube const width = 1024 ; const height = 768 ; const camera = new THREE . PerspectiveCamera ( 75 , width / height , 1 , 1000 ) ; camera . position . z = 10 ; const

订阅 threejs