Three.js 在前端和 NodeJS 后端使用
如果是为了写一个 demo 可以直接在 .html 文件中编写 threejs 代码，前端工程化开发，肯定需要在nodejs搭建的开发环境下编程，比如在vue脚手架 vue-cli 中使用 threejs，自然需要通过 npm 等工具安装 threejs 模块。 threejs 官方文档介绍：three.js docs 安装 Three.js npm 安装 three.js 依赖 npm inst…
Three.js 原点或圆圈效果
通过 Three.js 实现一个圆点或圆圈的效果，如果不自定义着色器的代码情况下，一般有两个思路，一个是通过Three.js几何体API绘制任何一种你想要的轮廓，一个是通过背景透明的纹理贴图来实现。 几何体 通过 CircleGeometry 绘制一个圆形轮廓，RingGeometry 可以绘制一个圆环形状，通过 ShapeGeometry 可以绘制任何轮廓，只要输入轮廓的坐标数据，然后通过几何体…
Three.js 渲染性能优化
在 CPU、显卡等硬件设备性能一定情况下，为了更好的用户体验，一般项目开发中需要对 Threejs 项目代码进行性能优化，避免卡顿现象，所以下面就对 Threejs 性能优化几种方式进行简单介绍。 模型面数比较少的情况下，不仅 threejs 渲染模型的时候运行性能高，通过网络加载面数少的模型，因为文件体积小，加载速度自然也快。 合理执行渲染方法 .render() Threejs 渲染器的 .r…
Three.js 和 Vuejs 结合使用
当前搜到这篇文章，说明你对 Threejs 引擎和前框框架 vuejs 都有一定的了解，下面就简单说下在 vue-cli 脚手架中如何使用 threejs。 .html 文件中引入 vuejs <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> 引入 vuejs 相关的 UI…
Three.js 光柱效果、树、草 两个矩形交叉
你如果想在 Three.js 创建一个光柱效果，希望通过很简单的方式在场景中模拟一棵树或一棵草，可以通过 Three.js 的矩形平面几何体 PlaneGeometry 创建一个网格模型，然后把一个背景透明的 .png 格式图片作为矩形网格模型的纹理贴图。 // 创建一个矩形几何体 var plane = new THREE.PlaneGeometry(50,200) var material =…
视频作为 Three.js 纹理贴图 VideoTexture
视频本质上就是一帧帧图片流构成，把视频作为 Threejs 模型的纹理贴图使用，就是从视频中提取一帧一帧的图片作为模型的纹理贴图，然后不停的更新的纹理贴图就可以产生视频播放的效果。 下面是一段视频作为纹理贴图的代码，完整代码和视频资源可以查看本站发布的Threejs视频教程8.5节 // 创建video对象 let video = document.createElement('video'); …
Three.js 相机位置属性 .position
Threejs 相机位置属性 .position 简单说，就像生活中你拿一个照相机拍照，如果相机在不同的位置，拍照的效果肯定是不同的，对于Threejs中的虚拟相机是一样的，如果从底层矩阵计算的角度看，Threejs相机位置属性.position影响着相机对象视图矩阵的计算，一方面是.lookAt()方法读取相机位置属性.position的值计算视图矩阵的旋转部分，另一面是threejs直接通过位…
Three.js 模型沿着任意轨迹线运动
下面的代码功能是控制一个三维模型沿着特定曲线轨迹运动。 曲线通过三维样条曲线曲线类 THREE.CatmullRomCurve3 创建,然后从样条曲线通过曲线的方法 .getPoints() 获取曲线上一系列的顶点坐标，得到顶点坐标就可以通过顶点坐标结合 threejs 帧动画来控制网格模型沿着曲线轨迹移动。 ... // 创建一个模型，用于沿着三维曲线运动 var box = new THREE…
Three.js 全景图
通过 Three.js 引擎可以很容易实现全景图的解析，通过 Threejs 解析渲染全景图，本质上就是把全景图作为 Three.js 立方体或球体的纹理贴图。 球体全景图 一张全景图表示一个全景效果，可以把该全景图作为一个球体的纹理贴图就可以实现，不过要注意设置球体的内面可见，一般 Threejs 系统默认网格模型的前面(外面)可见，具体点说也就是设置材质对象的 side 属性。 在解析全景图的…
Three.js 时钟对象 Clock
本文对 Three.js 时钟对象 Clock 进行简单介绍,如果你对 JavaScript 有一定了解，那么JavaScript的时间对象Date你一定不陌生，Clock本质上就是对Date进行封装，提供了一些方法和属性，当你通过Threejs编写一些和时间相关程序时候，不用在对 Date 进行封装，直接调用Clock对象的方法和属性即可。 通过 Three.js 实现一些动画功能往往需要 Cl…
- 共 2 页
- 1
