写点什么

three.js

5 人感兴趣 · 28 次引用

  • 最新
  • 推荐
https://static001.geekbang.org/infoq/c1/c17d1d8dcacfda02002f7a7f83b305e4.png?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

Three.js 进阶之旅:全景漫游 - 高阶版在线看房 🏡

本文使用Three.js实现一个可以应用到实际项目中的3D在线看房案例。通过阅读本文和实践案例,你将学到的知识包括:使用 Three.js 实现多个场景的加载和场景间的丝滑过渡切换、随着空间一直和角度实时变化的房源小地图、在全景场景中添加如地面指引、空间物体展

https://static001.geekbang.org/infoq/fb/fbd933b2d29ec34768aab207f7e77551.png?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

Three.js 进阶之旅:全景漫游 - 初阶移动相机版

3D 全景技术可以实现日常生活中的很多功能需求,比如地图的街景全景模式、数字展厅、在线看房、社交媒体的全景图预览、短视频直播平台的全景直播等。Three.js 实现全景功能也是十分方便的,本文将介绍如何一步步优雅实现在多个3D全景中穿梭漫游

https://static001.geekbang.org/infoq/5f/5f8d0947da9732fdd62cbf8838e8e43a.png?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

Three.js 进阶之旅:物理效果 -3D 乒乓球小游戏 🏓

本文将使用技术栈 React Three Fiber 和 Cannon.js 来实现一个具有物理特性的乒乓球小游戏,通过本文的阅读,你将学习到的知识点包括:了解什么是 React Three Fiber 及它的相关生态、使用 React Three Fiber 搭建基础三维场景...

https://static001.geekbang.org/infoq/85/854757f5b1f25f665b1d657077b11975.png?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

Three.js 进阶之旅:物理效果 - 碰撞和声音 💥

本文内容主要汇总如何在 Three.js 创建的 3D 世界中添加物理效果,使其更加真实。所谓物理效果指的是对象会有重力,它们可以相互碰撞,施加力之后可以移动,而且通过铰链和滑块还可以在移动过程中在对象上施加约束。

https://static001.geekbang.org/infoq/3d/3d999d582a77dce810ac179493af3427.png?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

“程”风破浪的开发者|THREE.JS 实现看房自由(VR 看房)

用户头像
知心宝贝
2022-10-21

目前随着元宇宙概念的爆火,THREE技术已经深入到了物联网、VR、游戏、数据可视化等多个平台,今天我们主要基于THREE实现一个三维的VR看房小项目

https://static001.geekbang.org/infoq/5f/5f4750f101b2c9fec5f8e832b519f161.png?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

基于 threejs 中秋佳节之际带你遨游星空🌃

用户头像
南城FE
2022-09-09

海上生明月,天涯共此时。又是一年中秋时,回想上一次赏月已是那遥远的童年时光,忙碌使我们忘却了假日应有的舒缓。今天在这假期即将开始的时候,让我们用代码来过个节。

https://static001.geekbang.org/infoq/0a/0a1f038abbc699640b388cde511d53fe.png?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

基于 threejs 的商品 VR 展示平台的设计与实现思路

用户头像
Five
2022-08-02

本设计针对目前互联网销售传统展示的现状,考虑当前市场形式,利用虚拟现实技术理论,结合计算机网络、交互设计实现一个以普通终端浏览器为载体的适用于用户或消费者需求的VR展示平台系统,打造一种全新的商品展示方式,拉近用户或者消费者于商品的距离

https://static001.geekbang.org/infoq/dc/dcc05d35c036c76452b1898314e9df82.jpeg?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

使用 Vue + Three.js 构建交互式 WEB 作品展示集(一)

用户头像
devpoint
2022-07-23

可以肯定地说,WEB作品集是展示项目和分享品牌的最佳方式之一。但这对于 WEB 开发人员来说更为重要,个人网站是展示个人能力的最佳方式。

https://static001.geekbang.org/infoq/ac/ac1c61e219800e40e00c3c928f407423.jpeg?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

HTML5 网页 3D 场景制作之 Three.js 初体验 - 制作 3D 字体

用户头像
迷彩
2022-07-07

WebGL(全写Web Graphics Library)是一种3D绘图协议,这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的一个JavaScript绑定,WebGL可以为HTML5 Canvas提供硬件3D加速渲染,这样Web开发人员就可以借助系统显卡来在浏览器里

https://static001.geekbang.org/infoq/e2/e2e552a809d10ce192af048da888f35c.gif?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

『Three.js』场景 Scene

用户头像
德育处主任
2022-06-13

关于你想知道 Three.js 场景的用法,这里全都有。Scene的属性和方法本来也不多,本文将详细讲解场景的每个方法和属性~

https://static001.geekbang.org/infoq/56/56bef78a44a0fb2c0935eec9b7e263a5.gif?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

『Three.js』辅助坐标轴

用户头像
德育处主任
2022-06-12

如果你使用 Three.js 开发时,我建议你把辅助坐标轴加上,这样比较方便你观察元素的位置和关系~

https://static001.geekbang.org/infoq/dd/dd8ace27e3bf9f2e7436589a1e4bd300.jpeg?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

『Three.js』起飞!

用户头像
德育处主任
2022-06-10

0基础学Three.js,使用原生三件套的方式快速开启学习旅程,不需要麻烦的环境搭建。一文搞懂Three核心概念~

https://static001.geekbang.org/infoq/88/88721c6fdcd943fe12a74dedf59e2ee2.jpeg?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

Three.js 入门: 构建一个立方体

用户头像
devpoint
2022-01-20

Three.js 是一个 JavaScript 库,用于在 Web 浏览器中创建 3D Web 图形。前面介绍过一些基本的知识和实现简单的效果,本文从简单的构建立方体出发,介绍一些基础概念。

https://static001.geekbang.org/infoq/3e/3e14f4b75b259f2fe44305894dd7eceb.jpeg?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

Three.js 入门指南

用户头像
devpoint
2022-01-16

Three.js 是一个 JavaScript 库,用于在 Web 浏览器中创建 3D Web 图形。

https://static001.geekbang.org/infoq/b2/b28e3a1af5646496bb0dd131116c8a5a.jpeg?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

【Three.js】WEB3D 项目开发中实用工具推荐

用户头像
devpoint
2021-12-12

据说百度即将发布元宇宙产品,应该算是国内第一家,过去介绍的元宇宙相关产品都是国外的。上一篇谈到元宇宙设想了一个由虚拟世界和3D技术广泛应用重塑的未来。Three.js 是一个非常令人印象深刻的 JavaScript 3D 库,它也使用 WebGL(或 2d Canvas)进行渲染。

https://static001.geekbang.org/infoq/8e/8e1ece9344f8b40586c3ec8827ae4088.jpeg?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

【Three.js】随着元宇宙开启 WEB3D 之路

用户头像
devpoint
2021-11-19

元宇宙设想了一个由虚拟世界和3D技术广泛应用重塑的未来。Three.js 是一个非常令人印象深刻的 JavaScript 3D 库,它也使用 WebGL(或 2d Canvas)进行渲染。

https://static001.geekbang.org/infoq/c7/c7441d1beeb8a22a4b446ad9f7edc659.webp?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

Three.js 杂记(十二)—— VR 全景效果制作·中

用户头像
空城机
2021-06-19

在web的前端发展过程中,对于视觉化的要求已经越来越高

https://static001.geekbang.org/infoq/c2/c2187ed464d0c31a20cbadd87d87b35b.png?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

Three.js 杂记(十一)—— 精灵与粒子(绘制中国地图)

用户头像
空城机
2021-03-22

精灵模型对象Sprite。精灵模型对象和网格模型一样需要设置材质,不过精灵模型不需要程序员设置几何体,Threejs系统渲染的时候会自动设置。

https://static001.geekbang.org/infoq/c2/c2187ed464d0c31a20cbadd87d87b35b.png?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

Three.js 杂记(十一)—— 精灵与粒子(绘制中国地图)

用户头像
空城机
2021-03-22

精灵模型对象Sprite。精灵模型对象和网格模型一样需要设置材质,不过精灵模型不需要程序员设置几何体,Threejs系统渲染的时候会自动设置。

https://static001.geekbang.org/infoq/c2/c2187ed464d0c31a20cbadd87d87b35b.png?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

Three.js 杂记(八)—— 文本几何体

用户头像
空城机
2021-03-22

在three.js中,如果想要显示出文本文字的效果,可以使用FontLoader,这是使用JSON格式中加载字体的一个类。返回Font, 返回值是表示字体的Shape类型的数组。 其内部使用FileLoader来加载文件。

https://static001.geekbang.org/infoq/c2/c2187ed464d0c31a20cbadd87d87b35b.png?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

Three.js 杂记(七)—— 全景效果制作·上(含 python 爬虫偷碎图,canvas 重组图片)

用户头像
空城机
2021-03-22

Three.js杂记(七)—— 全景效果制作·上(含python爬虫偷碎图,canvas重组图片)

https://static001.geekbang.org/infoq/c2/c2187ed464d0c31a20cbadd87d87b35b.png?x-oss-process=image%2Fresize%2Cw_416%2Ch_234

Three.Js 杂记(一)——起步

用户头像
空城机
2021-03-22

Three.js是基于原生WebGL封装运行的三维引擎,在所有WebGL引擎中,Three.js是国内文资料最多、使用最广泛的三维引擎。

three.js_three.js技术文章_InfoQ写作社区