WEBGL/ThreeJS
关注
分享
扫一扫
文章平均质量分 73
ThreeJS是基于原生WebGL封装运行的三维引擎，使得我们可以在Web浏览器上实现3D 场景和模型。
xyphf_和派孔明
全栈工程师，熟悉原生JavaScript、TypeScript、ES6、Webpack、VUE全家桶、JAVA SSM框架、Spring boot 、Spring cloud、MySql、Oracle、Linux等，可独立构建多页面、单页面应用项目。
展开
-
WebGL/threeJS面试题扫描与总结
WebGL/threeJS面试题扫描原创 2023-11-24 20:31:56 · 4804 阅读 · 1 评论 -
WebGL(threeJS)给物体打标签
threeJS给物体打标签有以下几种方法，今天我们就郭老师的例子，依次来看看区别三中标签的区别,今天咱们现年看看效果，下次咱们分析代码。原创 2022-06-02 00:30:00 · 2449 阅读 · 0 评论 -
WebGL(Threejs)工程师与三维设计师沟通注意事项
WebGL(Threejs)工程师与三维设计师沟通注意事项原创 2022-05-30 23:45:00 · 1150 阅读 · 0 评论 -
Three.js的物体点击选中拾取原理剖析
Hello, 大家好，今天来说一下three.js的物体拾取原理！声明：本文介绍的是three.js全屏模式下的原理，如果涉及到three.js渲染在网页的一部分，请自行推导。第一节 介绍Three.js的坐标系先来粗浅的介绍一下Three的拾取原理，我们先介绍一下Three.js的坐标系，我们知道Three.js是右手坐标系。我用最浅显的一句话介绍就是，Z轴指向屏幕前的自己时就是右手坐标系。第二节 介绍Three.js物体点击选中拾取原理选中物体的原理就是如果点A在物体内，那.原创 2022-05-23 01:06:15 · 2564 阅读 · 2 评论 -
three.js常见灯光及阴影的使用
three.js常见灯光的使用环境光(AmbientLight)点光源(PointLight)聚光灯(SpotLight)平行光(DirectinalLight)原创 2022-05-19 22:22:12 · 1718 阅读 · 0 评论 -
three.js透视投影相机PerspectiveCamera
这里我们演示three.js透视相机的使用<!-- https://threejs.org/docs/index.html#api/zh/cameras/PerspectiveCamera --><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>透视投影相机PerspectiveCamera</title>原创 2022-05-19 19:13:09 · 1316 阅读 · 0 评论 -
three.js正投影相机OrthographicCamera
<!-- https://threejs.org/docs/index.html#api/zh/cameras/OrthographicCamera --><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>正投影相机OrthographicCamera</title> <style> body...原创 2022-05-19 15:32:46 · 482 阅读 · 0 评论 -
ThreeJS思维导图总结
ThreeJS思维导图总结原创 2022-01-07 14:16:28 · 1694 阅读 · 0 评论 -
ThreeJS的性能优化方面
1、网格合并简介多数情况下使用组可以很容易地操纵和管理大量网格。但是当对象的数量非常多时，性能就会成为一个瓶颈。使用组，每个对象还是独立的，仍然需要对它们分别进行处理和渲染。通过THREE.Geometry.merge() 函数，你可以将多个几何体合并起来创建一个联合体。当我们使用普通组的情况，绘制20000个立方体，帧率在15帧左右，如果我们选择合并以后，再绘制两万，就会发现，我们可以轻松的渲染20000个立方体，而且没有性能的损失。合并的代码如下：//合并模型，则使用merge方法合并原创 2022-01-06 20:49:07 · 5837 阅读 · 1 评论 -
ThreeJS渲染尺寸非浏览器窗体尺寸时选中会有问题方案解决
1、通过重新计算解决ThreeJS渲染尺寸非浏览器窗体尺寸时问题mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;改为：mouse.x = ((event.clientX - PX) / container.clientWidth) * 2 - 1;// 标准设备横坐标mouse.y = -((event.c原创 2022-01-06 19:13:13 · 631 阅读 · 0 评论 -
ThreeJS第一人称视角处理
ThreeJS第一人称视角处理原创 2022-01-05 16:35:48 · 6176 阅读 · 9 评论 -
ThreeJS后期处理
threejs的后期处理通道包提供了各种强大的效果，有了这些效果会大大降低代码难度，并且可以直接使用内置的着色器包，避免了复杂的着色器代码编写。后期处理通道一般都按顺序执行，后加入的会覆盖前面的通道。如ThreeJS的选中效果1、使用方法1、初始化效果组合器composer=new THREE.EffectComposer(renderer);//该参数是WebGLRenderer对象为了保证组合器的正常使用，有三个必要的引用包，在工程文件下可找到，并且注意引用的顺序，如果顺序不原创 2021-12-13 09:35:52 · 4716 阅读 · 0 评论 -
ThreeJS创建天空盒的几种方法
本文创建的天空盒是用六张图片来创建的。论述三种方法来创建，前两种比较简单，第三中牵扯到着色器的使用，但是只要会使用即可，无需深入的理解。一种是创建一个盒子，然后将图片作为盒子6个面的纹理贴上来创建。另一种则是简单的将纹理作为场景的背景来创建。第三种是通过着色器的形式三种方法视觉效果是几乎没区别的，会给人身临其境的效果，感觉身处在这个3维空间里，最明显的区别就在于当你在用鼠标滚轮缩进的时候，天空盒会“原形毕露”，暴露出其盒子的本性，视觉效果原理展现在你的眼前。如图所示：而作为背景的方法创建.原创 2021-12-10 14:18:27 · 7638 阅读 · 1 评论 -
怎么让ThreeJS场景跟随浏览器大小自适应
场景跟随浏览器窗口大小自适应function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight);}window.addEventListener('resize', this.onWindowRe原创 2021-12-09 17:02:02 · 1317 阅读 · 0 评论 -
tweenjs动画库配合ThreeJS使用
tween.js是一款可生成平滑动画效果的js动画库。其官方网站为：http://www.createjs.cc/tweenjs/docs/modules/TweenJS.htmltween.js允许你以平滑的方式修改元素的属性值。你只需要告诉tween你想修改什么值，以及动画结束时它的最终值是什么，动画花费多少时间等信息，tween引擎就可以计算从开始动画点到结束动画点之间值，来产生平滑的动画效果。例如，假设你有一个对象 position ，它的坐标为 x 和 y ：var position =原创 2021-12-09 16:18:36 · 2392 阅读 · 0 评论 -
ThreeJS使用Curve曲线让物体沿轨迹运动
创建几何体的顶点数据可以手动定义，可以自定义一个函数创建，也可使用three.js提供的函数创建，本节课主要讲解一些2D或3D线条的构造函数及其方法属性， 如何通过这些构造函数获得一系列曲线上的顶点数据。线性曲线（直线）LineCurveLineCurve3圆弧、椭圆弧EllipseCurve样条曲线SplineCurve三维样条曲线CatmullRomCurve3贝塞尔曲线QuadraticBezierCurve（二次贝塞尔曲线）QuadraticBezierCurve3（三维二次贝塞..原创 2021-12-09 14:51:49 · 5605 阅读 · 0 评论 -
ThreeJS导出三维模型、导入三维模型、导入三维动画
模型文件加载实际开发中，大多数项目，通常是3D美术设计师或建筑、机械等行业工程师提供的由3dmx、blender、substence、Solidworks等软件创建好的三维模型文件。本章节第一小节以Threejs引擎自身为例，讲解Threejs模型导入导出，对Threejs模型文件本身进行了讲解，让你明白你加载的三维模型文件里面都是包含什么内容。通过Three.js模型数据导入导出过程的学习，可以让你对Threejs解析加载外部模型的过程更为了解。Threejs导出模型信息你可以通过下面代码原创 2021-12-07 17:38:35 · 7438 阅读 · 0 评论 -
ThreeJS中选中物体，并显示相关信息
博文参考选中物体的原理1、如果一个点A在被另一个物体B里面。2、则从点A到空间另一点(C)的射线一定与物体B的边缘相交。3、通过以物体B中心为起点，向物体的各个顶点发出射线，检测射线是否与其他点（A）相交，若相交则 检查最近的一个交点与射线起点的距离，如果这个距离比物体中心到物体顶点的距离都要小，则点A在 物体B里面 点A就是鼠标点击到世界坐标系中的坐标 物体B就是选中的物体 而点C就是相机的位置。点A就是鼠标点击到世界坐标系中的坐标物体B就是选中的物体而点C就是相机的位置。Rayc原创 2021-12-07 14:54:19 · 4092 阅读 · 0 评论 -
如何将echarts集成到我ThreeJS的场景中
1、通过TextTrue创建THREE.jS封装了TextGeometry类可以很容易地生成E维文字TextGeometry(text : String, parameters : object )参数说明text - The text that needs to be shown. (要显示的字符串)parameters一object that can contains the following par ameters.font - an instance of THREE.Fo原创 2021-12-07 13:59:14 · 2008 阅读 · 0 评论 -
WebGL/ThreeJS关于merge方法合并对效率的影响
1、merge方法合并多数情况下使用组可以很容易地操纵和管理大量网格。但是当对象的数量非常多时，性能就会成为一个瓶颈。使用组，每个对象还是独立的，仍然需要对它们分别进行处理和渲染。THREE.Geometry.merge() 函数，你可以将多个几何体合并起来创建一个联合体。当我们使用普通组的情况，绘制20000个立方体，帧率在15帧左右，如果我们选择合并以后，再绘制两万，就会发现，我们可以轻松的渲染20000个立方体，而且没有性能的损失。合并的代码如下://合并模型，则使用merge方法合并原创 2021-12-01 22:40:54 · 1239 阅读 · 0 评论 -
WebGL/ThreeJS如何在场景中创建立体文字TextGeometry，认识精灵模型
1、通过TextTrue创建THREE.jS封装了TextGeometry类可以很容易地生成E维文字TextGeometry(text : String, parameters : object )参数说明text - The text that needs to be shown. (要显示的字符串)parameters一object that can contains the following par ameters.font - an instance of THREE.Fo原创 2021-12-01 20:13:43 · 1555 阅读 · 0 评论 -
使用ThreeBSP库进行实现差集(相减)、并集(组合、相加)、交集(两几何体重合的部分)
简介之前我们一直使用Three.js默认提供的几何体，今天我们使用ThreeBSP库，可以将现有的模型组合出更多个性的模型来使用。我们可以使用ThreeBSP库里面的三个函数进行现有模型的组合，分别是:差集(相减)、并集(组合、相加)、交集(两几何体重合的部分)。下面我们介绍一下三个函数, 并提供每个方法的简单案例。使用方法:<script src="../../1ib/ThreeBSP.js"></script>var sphereBSP = new ThreeBS.原创 2021-11-29 22:36:30 · 1893 阅读 · 0 评论 -
ThreeJs常用的工具，便于调试和项目效果
1、相机控件OrbitControls.js通过Three.js的相机控件OrbitControls.js可以对Threejs的三维场景进行缩放、平移、旋转操作,本质上改变的并不是场景，而是相机的参数,通过前面的学习应该知道，相机的位置角度不同，同-个场景的渲染效果是不一样,比如一个相机绕着一个场景旋转, 就像场景旋转-样。如果你想深入了解相机控制器OrbitControls的每一个功能， OrbitControls是如何对Three.js正投影 相机和透视投影相机对象进行封装的,可以阅读Three.原创 2021-11-29 22:07:20 · 1988 阅读 · 0 评论 -
WebGL/ThreeJS项目结构介绍2-创建地板并贴图
OrbitControls.js的作用先讲一下WebGL/ThreeJS的代码基础的顺序第一步：index.html中启动项目let store=new Store3D();store.start();第二步：Store3D.jsstart开启运行方法1、初始化场景initScene 方法2、初始化相机initCamera 方法3、初始化渲染器initRenderer 方法4、初始化模型 initBuilding 方法 4.1 编写...原创 2021-11-29 18:09:58 · 1161 阅读 · 0 评论 -
WebGL/ThreeJS几何体、材质、纹理贴图，给几何体披上好看的外衣
1、ThreeJS的常见几何体BufferGeometry和Geometry有什么不同？如果你想简单理解BufferGeometry和Geometry有什么不同,就是两者的数据结构不同，缓冲类型几何体BufferGeometry相比普通几何体Geometry性能更好。Three.js渲染器在解析几何体对象的时候，如果几何体对象是普通几何体对象Geometry, Three.js的WebGL渲染器 会把普通几何体对象Geometry转化为缓冲类型几何体对象BufferGeometry,然后再提取Buf原创 2021-11-29 16:46:05 · 3519 阅读 · 0 评论 -
WebGL/ThreeJS项目结构介绍
WebGL/Three JS demo项目入门原创 2021-11-29 12:57:25 · 859 阅读 · 0 评论 -
ThreeJS入门——场景(scene)、相机(camera)、渲染器(renderer)
ThreeJS官网Three.js – JavaScript 3D LibraryThreeJS的三要素——场景(scene)、相机(camera)、渲染器(renderer)。ThreeJS的灯光。只有有了灯光，我们的东西才能在场景中显现出来。ThreeJS的坐标系。ThreeJS 画一个立方体Hello World.2、场景在Threejs中场景只有一种，用THREE.Scene来表示，要构建一个场景也很简单，只要new一个对象就可以了，代码如下:var scene =.原创 2021-11-28 16:06:51 · 5541 阅读 · 2 评论