想挽留

想挽留

13 文章 16661 浏览

Three.js 在前端和 NodeJS 后端使用

如果是为了写一个 demo 可以直接在 .html 文件中编写 threejs 代码,前端工程化开发,肯定需要在nodejs搭建的开发环境下编程,比如在vue脚手架 vue-cli 中使用 threejs,自然需要通过 npm 等工具安装 threejs 模块。 threejs 官方文档介绍:three.js docs 安装 Three.js npm 安装 three.js 依赖 npm inst…

想挽留 2021-09-18 09:07:40 浏览 887 评论 0 收藏 0

Three.js 原点或圆圈效果

通过 Three.js 实现一个圆点或圆圈的效果,如果不自定义着色器的代码情况下,一般有两个思路,一个是通过Three.js几何体API绘制任何一种你想要的轮廓,一个是通过背景透明的纹理贴图来实现。 几何体 通过 CircleGeometry 绘制一个圆形轮廓,RingGeometry 可以绘制一个圆环形状,通过 ShapeGeometry 可以绘制任何轮廓,只要输入轮廓的坐标数据,然后通过几何体…

想挽留 2021-09-01 23:49:25 浏览 817 评论 0 收藏 0

Three.js 渲染性能优化

在 CPU、显卡等硬件设备性能一定情况下,为了更好的用户体验,一般项目开发中需要对 Threejs 项目代码进行性能优化,避免卡顿现象,所以下面就对 Threejs 性能优化几种方式进行简单介绍。 模型面数比较少的情况下,不仅 threejs 渲染模型的时候运行性能高,通过网络加载面数少的模型,因为文件体积小,加载速度自然也快。 合理执行渲染方法 .render() Threejs 渲染器的 .r…

想挽留 2021-08-29 01:02:35 浏览 969 评论 0 收藏 0

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…

想挽留 2021-08-27 19:26:28 浏览 934 评论 0 收藏 0

Three.js 光柱效果、树、草 两个矩形交叉

你如果想在 Three.js 创建一个光柱效果,希望通过很简单的方式在场景中模拟一棵树或一棵草,可以通过 Three.js 的矩形平面几何体 PlaneGeometry 创建一个网格模型,然后把一个背景透明的 .png 格式图片作为矩形网格模型的纹理贴图。 // 创建一个矩形几何体 var plane = new THREE.PlaneGeometry(50,200) var material =…

想挽留 2021-08-27 09:15:32 浏览 843 评论 0 收藏 0

视频作为 Three.js 纹理贴图 VideoTexture

视频本质上就是一帧帧图片流构成,把视频作为 Threejs 模型的纹理贴图使用,就是从视频中提取一帧一帧的图片作为模型的纹理贴图,然后不停的更新的纹理贴图就可以产生视频播放的效果。 下面是一段视频作为纹理贴图的代码,完整代码和视频资源可以查看本站发布的Threejs视频教程8.5节 // 创建video对象 let video = document.createElement('video'); …

想挽留 2021-08-16 21:03:04 浏览 735 评论 0 收藏 0

Three.js 相机位置属性 .position

Threejs 相机位置属性 .position 简单说,就像生活中你拿一个照相机拍照,如果相机在不同的位置,拍照的效果肯定是不同的,对于Threejs中的虚拟相机是一样的,如果从底层矩阵计算的角度看,Threejs相机位置属性.position影响着相机对象视图矩阵的计算,一方面是.lookAt()方法读取相机位置属性.position的值计算视图矩阵的旋转部分,另一面是threejs直接通过位…

想挽留 2021-08-08 13:09:51 浏览 969 评论 0 收藏 0

Three.js 模型沿着任意轨迹线运动

下面的代码功能是控制一个三维模型沿着特定曲线轨迹运动。 曲线通过三维样条曲线曲线类 THREE.CatmullRomCurve3 创建,然后从样条曲线通过曲线的方法 .getPoints() 获取曲线上一系列的顶点坐标,得到顶点坐标就可以通过顶点坐标结合 threejs 帧动画来控制网格模型沿着曲线轨迹移动。 ... // 创建一个模型,用于沿着三维曲线运动 var box = new THREE…

想挽留 2021-08-05 13:07:59 浏览 1005 评论 0 收藏 0

Three.js 全景图

通过 Three.js 引擎可以很容易实现全景图的解析,通过 Threejs 解析渲染全景图,本质上就是把全景图作为 Three.js 立方体或球体的纹理贴图。 球体全景图 一张全景图表示一个全景效果,可以把该全景图作为一个球体的纹理贴图就可以实现,不过要注意设置球体的内面可见,一般 Threejs 系统默认网格模型的前面(外面)可见,具体点说也就是设置材质对象的 side 属性。 在解析全景图的…

想挽留 2021-08-04 12:57:35 浏览 948 评论 0 收藏 0

Three.js 时钟对象 Clock

本文对 Three.js 时钟对象 Clock 进行简单介绍,如果你对 JavaScript 有一定了解,那么JavaScript的时间对象Date你一定不陌生,Clock本质上就是对Date进行封装,提供了一些方法和属性,当你通过Threejs编写一些和时间相关程序时候,不用在对 Date 进行封装,直接调用Clock对象的方法和属性即可。 通过 Three.js 实现一些动画功能往往需要 Cl…

想挽留 2021-08-02 19:39:20 浏览 1069 评论 0 收藏 0

简介

这家伙很懒,什么都还没有填写!

13 文章
3 评论
16661 人气
更多

推荐作者

qq_81h7fk

文章 0 评论 0

Aik

文章 0 评论 0

爱上歆随懿恫

文章 0 评论 0

qq_rvKjBH

文章 0 评论 0