WEBGL
关注
分享
扫一扫
HR_Reborn
这个作者很懒，什么都没留下…
展开
-
learnopengl箱子阶段代码
learnopengl代码箱子阶段原创 2022-08-16 16:25:26 · 274 阅读 · 0 评论 -
THREE.JS源码：EventDispatcher
事件调度，是一个事件的容器，Object3D继承自该类，说明该类是three.js的实体基类，作用是隔离事件触发与事件处理的过程，降低实体之间的耦合度。//定义事件调度类function EventDispatcher() {}//定义该类的原型Object.assign( EventDispatcher.prototype, { //添加事件监听，可针对同一个事件添加多个监听 addEventListener: function ( type, lis...原创 2021-09-29 10:31:27 · 550 阅读 · 0 评论 -
WEBGL真实火焰实现（完整）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type = "text/css"> html, body{ margin: 0; height: 100%; } can.原创 2021-09-18 18:05:18 · 628 阅读 · 0 评论 -
WEBGL真实烟雾实现
<!DOCTYPE html><html lang="en"><head> <title>Title</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,user-scalable=no,minimum-scale=1.0,maximum-scale=1.0"> <styl.原创 2021-09-18 18:03:33 · 451 阅读 · 0 评论 -
THREE.JS真实火焰着色器实现
<!DOCTYPE html><html lang="en"><head> <title>Title</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,user-scalable=no,minimum-scale=1.0,maximum-scale=1.0"> <styl.原创 2021-09-18 18:02:33 · 1124 阅读 · 0 评论 -
Three.js求场景高度的问题
工程中导入一个地形，不知道它的高度，如何求出来呢，我们可以用射线求，射线和地形焦点的z值就是地形高度，下面是我写的代码片段，不能通用但是基本结构差不多。定义方向——创建raycaster——将方向向量转换成视点坐标系中——形成归一化的射线——和场景求交。在此贴一个连接写的很好let points = [];let vertexes = [];let directVector = new THREE.Vector3(0,0,-1); //这个是方向let raycaster = new THR原创 2021-09-13 16:43:30 · 745 阅读 · 0 评论 -
webgl+three.js中如何设置模型与相机的相对位置
1、将模型，场景，点云加入camera场景中，camera.add(object),然后object.position.set(0,0,10),这样模型的位置总是相对于相机的z轴正10位置。2、另一种方法是找到相机的前向矢量，可以编写'pLight.position = camera.position + camForwardVec * distance;'。3、还有一种比较笨的方法，就是比较现在和上一次位置移动的情况，x变得比y变得多就是在x轴上移动，同理yz。不过这一种方法仅限于移动位置局限性比原创 2021-09-02 09:23:34 · 2718 阅读 · 0 评论 -
路径漫游系统（完整可用）
1、createPath.html<!DOCTYPE html><html lang="en"> <head> <title>TJH ar.js</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale原创 2021-08-31 10:48:43 · 911 阅读 · 0 评论 -
雨雪粒子特效（完整可用）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type = "text/css"> html, body{ margin: 0; height: 100%; } can.原创 2021-08-31 10:45:08 · 527 阅读 · 0 评论 -
webgl 火焰特效（未证实可用）
jsconst renderer = new THREE.WebGLRenderer({ antialias: true});document.body.appendChild(renderer.domElement);let scene = new THREE.Scene();let camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 2000)原创 2021-08-27 09:28:33 · 284 阅读 · 0 评论 -
webgl火焰特效（证实可用）
1、代码如下<!DOCTYPE html><html lang="en"> <head> <title>TJH ar.js</title> <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <meta原创 2021-08-27 09:26:14 · 521 阅读 · 0 评论 -
路径漫游部分模型导入+动画系统验证代码（非demo_pathroam）
let modelinfor = new THREE.Group();let objModel = new THREE.Group();this.tempObj.add(objModel);upadteProxy.upadte = (context) =>{ if(!mixer && positionSeq && quaternionKF) { clip = new THREE.AnimationClip('Action',-1.原创 2021-08-17 11:27:20 · 280 阅读 · 0 评论