![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
three.js
人工智能-肥鹅
这个作者很懒,什么都没留下…
展开
-
three.js旋转的360全景canvas_geometry_panorama
官方示例canvas_geometry_panorama.html这里的加载贴图应用贴图纹理还有其他方式代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content=&quo原创 2018-02-28 11:15:02 · 1512 阅读 · 0 评论 -
three.js走进WebVR世界(一)之webvr-polyfill.js
因为这是第一节课,我们在学习之前先稍微讲一下webvrWebVR的体验方式可以分为VR模式和裸眼模式VR模式1.Mobile VR如使用cardboard眼镜来体验手机浏览器的webVR网页,浏览器将根据水平陀螺仪的参数来获取用户的头部倾斜和转动的朝向,并告知页面需要渲染哪一个朝向的场景。2.PC VR通过佩戴Oculus Rift的分离式头显浏览连接在PC主机端的网页,现支持WebV...原创 2019-03-06 15:52:13 · 2974 阅读 · 0 评论 -
three.js多场景的应用
其实多场景非常简单,只需要两步:第一步//启用或禁用剪裁检测. 若启用,则只有在所定义的裁剪区域内的像素才会受之后的渲染器影响renderer.setScissorTest( true );第二步// setScissor 将剪裁区域设为(x, y)到(x + width, y + height) renderer.setScissor( x, y, w , h );...原创 2019-02-13 15:06:37 · 2110 阅读 · 0 评论 -
three.js多个canvas画布的网格应用
主要的知识点有两点:1、camera.setViewOffset函数2、context.drawImage 函数我们先来了解setViewOffset官方文档的说明如下:.setViewOffset ( fullWidth : Float, fullHeight : Float, x : Float, y : Float, width : Float, height ...原创 2019-02-13 11:59:04 · 2447 阅读 · 0 评论 -
Three.js使用dat.GUI让调试更简单
首先我们来介绍一下这个库,它能够以界面形式让你操控threejs中的数值,让调试运行效果一目了然。第一步引入这个库 <script src="../js/dat.gui.min.js"></script>第二步就是创建对象了: // 创建datGUI对象 var datGui = new dat.GUI();先给大家看一段核心代码...原创 2019-02-18 15:13:30 · 2087 阅读 · 0 评论 -
three.js利用射线Raycaster进行碰撞检测
学习碰撞检测之前,我们先了解一下Raycaster类Raycaster 应该翻译为“光线投射”,顾名思义,就是投射出去的一束光线。Raycaster的构造函数如下Raycaster( origin, direction, near, far ) {origin — 射线的起点向量。direction — 射线的方向向量,应该归一化。near — 所有返回的结果应该比 near ...原创 2019-03-06 15:52:26 · 4215 阅读 · 0 评论 -
three.js实现拖拽
要想实现拖拽功能需要用到两个库文件//THREE.TrackballControls()轨迹球控件,最常用的控件,可以使用鼠标轻松的移动、平移,缩放场景。TrackballControls.js//DragControls包含两个事件:dragstart、dragend。DragControls.js创建TrackballControls 实例并创建控件并绑定到相机上:/*...原创 2019-03-06 15:52:35 · 2235 阅读 · 1 评论 -
Three.js加载动画模型并控制播放
Three.js支持多种3D模型格式的文件加载。本例中我们以fbx文件为例。首先当然是加载模型了。 loader.load("fbx/Naruto.fbx", function (mesh) { scene.add(mesh); }以上代码为加载模型并添加到场景中。这是一个多动画的模型。那么首先我们先获取它到底有多少个动作动画。 ...原创 2019-02-11 15:42:00 · 10987 阅读 · 3 评论 -
three.js灯光与阴影
不论我们是在生活中,还是在threejs中。说到阴影肯定和光是分不开的。在网上有很多说threejs中阴影与材质有关系。其实说的不准确,准确的说是接收阴影的对象对材质有要求。而投射阴影的对象对材质是没有要求的。以下是我测试的可以正确接收到阴影的材质。(如有错误欢迎指出)Phong网格材质(MeshPhongMaterial)物理网格材质(MeshPhysicalMaterial)...原创 2019-02-15 15:34:24 · 1418 阅读 · 0 评论 -
three.js鼠标交互之Raycaster射线
简介这段是网上抄的,基本能看懂大概意思了。鼠标在屏幕上点击的时候,得到二维坐标p(x, y),再加上深度坐标的范围(0, 1), 就可以形成两个三位坐标A(x1, y1, 0), B(x2, y, 1), 由于它们的Z轴坐标是0和1,则转变到投影坐标系的话,一定分别是前剪切平面上的点和后剪切平面上的点,也就是说,在投影坐标系中,A点一定在能看见的所有模型的最前面,B点一定在能看见的所有...原创 2019-03-06 15:52:57 · 1117 阅读 · 0 评论 -
three.js物理引擎cannon.js之弹跳的小球
一、简介目前在 Github 上搜索到的 3D 物理引擎库有 Cannon.js、Oimo.js、Ammo.js、Energy.js、Physijs 等等,大部分都已许久没有更新迭代了(长达好几年),项目的 Star 数量和 Issues 数量也不多,我们该如何选择?Energy.js :使用 C++ 编写转 JavaScript 的 3D 物理引擎,源码不可读,目前 Github 比较冷...原创 2019-03-06 15:52:48 · 4263 阅读 · 0 评论 -
WebGL(一)认识Three.js
一、简介three.js是JavaScript编写的WebGL第三方库。提供了非常多的3D显示功能。Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景,包括了摄影机、光影、材质等各种对象。你可以在它的主页上看到许多精彩的演示。three.js的代码托管在github上面,截止19-1-12有47966颗星。three.js的文档并不匮乏,并且官网的API有中文...原创 2019-01-12 16:55:30 · 183 阅读 · 0 评论 -
three.js旋转的方块canvas_geometry_cube
官方示例canvas_geometry_cube.html代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, u原创 2018-02-24 10:01:54 · 423 阅读 · 0 评论 -
three.js旋转的场景canvas_camera_orthographic
官方示例canvas_camera_orthographic.html代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wi原创 2018-02-23 11:32:40 · 1029 阅读 · 0 评论 -
three.js加载sea3D模型webgl_loader_sea3d
官方示例:webgl_loader_sea3d.html这是一个最基本的加载示例,最下方我贴了一部分效果组合器的代码<!DOCTYPE html><html lang="en"> <head> <title>three.js webgl - sea3d</title> <meta charset="utf-8&qu原创 2018-03-01 17:02:04 · 1817 阅读 · 0 评论 -
three.js旋转的3D文字canvas_geometry_text
官方示例canvas_geometry_text.html需要注意的都写在代码中的注释里了<!DOCTYPE html><html lang="en"> <head> <title>three.js canvas - geometry - text</title> <meta charset="utf-8&quo原创 2018-03-01 10:31:38 · 1015 阅读 · 0 评论 -
three.js走进WebVR世界(二)之VREffect.js与VRControls.js
上节课已经大致讲解了webvr。所以我们这里不再赘述。那么我们直接进入正题,首先了解一下VREffect.js 它是做什么的。VR 分屏器,这是 three.js 的一个场景分屏的渲染器,提供戴上 VR 头显的显示方式,VREffect.js 重新创建了左右两个相机,对场景做二次渲染,产生双屏效果。VREffect库的使用有一下两点一、把渲染器传入VREffect然后设...原创 2019-03-06 15:52:05 · 2419 阅读 · 1 评论