【threejs】初级demo&案例&一些扩展案例

已于 2023-06-11 14:23:42 修改
阅读量676 收藏
点赞数
分类专栏： threejs 文章标签： three.js vue.js 前端
于 2023-06-08 08:24:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/sinat_41838682/article/details/131099763
版权
文章介绍了在Vue2和Vue3环境中使用three.js创建3D模型的案例，包括无贴图旋转立方体、带贴图旋转正方体和VR看房效果。还探讨了Vue中混入three.js的方法、BufferGeometry的使用以及如何导入和控制外部3D模型。此外，提到了three.js的剖切面技术，为3D场景添加更多视觉效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

初级

前置知识：vue2+threejs

前置知识：vue3+ts+threejs

vue3.0 + ts + threejs 实现简单的demo ：一个旋转贴图的正方体效果，无贴图原图，无demo和源码。

Vue里使用three.js实现3D模型小案例：3d场景效果，vr看房的效果。提供了图源和完整代码。

教程

vue 2 中混入threejs 基本版（一） 有源码，有详细的解说（包括思维导图），用来入门threejs很不错。另外还有些扩展的文章。效果比较简单，无贴图的球体和正方体。
三维空间中绘制点、线、面、UV贴图，万能的BufferGeometry(three.js实战4) 也是一个很不错的入门教程，BufferGeometry还是很常用的。学了画线。

扩展

外部模型的引入和使用

vue2+three.js实现页面引入3d模型并进行简单模型控制 无源码，有代码和效果。

threejs的剖切面

ThreeJS剖切 - 高亮剖切面/切面填充 挺酷的效果，没试过

threejs-demo
weixin_45379180的博客
04-29 337
【代码】threejs-demo。
机器学习(Machine Learning)&深度学习(Deep Learning)资料
weixin_30756499的博客
07-07 1万+
##机器学习(Machine Learning)&深度学习(Deep Learning)资料(Chapter 1)---#####注:机器学习资料[篇目一](https://github.com/ty4z2008/Qix/blob/master/dl.md)共500条,[篇目二](https://github.com/ty4z2008/Qix/blob/master/dl2.md)开始更新...
【第一篇】threeJS入门
最新发布
qq_42808052的博客
04-15 190
Three.js是一个尽可能简化在网页端获取3D 内容的库，是使用WebGL来绘制三维效果的。它封装了诸如场景、灯光、阴影、材质、贴图、空间运算等一系列功能，让你不必要再从底层WebGL开始写起。渲染器(WebGLRenderer)是three.js的主要对象。它负责将你提供的所有数据渲染绘制到canvas上。你传入一个场景(Scene)和一个摄像机(Camera)到渲染器(Renderer)中，然后它会将摄像机视椎体中的三维场景渲染成一个二维图片显示在画布上。
ThreeJS 炫酷特效旋转多面体Web页 Demo 01《ThreeJS 炫酷特效制作》
1_bit 的博客
06-06 6252
本案例为一个 threejs 的特效网页，大小球体进行包裹，外球体为透明材质，但是进行了线框渲染，使其能够通过外球踢查看其内球体。
threeJsDemo
xiyang5678的博客
03-12 1224
threeJsDemoa simple three.js demo兴趣所致，接触一下three.js，决定跟随官网文档入门学习一下。 demo网址
threejs demo
03-15
threejs入门博客http://blog.csdn.net/u010588262/article/details/79570436的配套demo，演示地址: https://www.hugeoyzy.top/threejs/src/demo1.html https://www.hugeoyzy.top/threejs/src/demo2.html
【交互式3D体验教程】：在demo3d中创造互动奇迹
![【交互式3D体验教程】：在demo3d中创造互动奇迹]...通过分析demo3d软件的安装配置、3D模型编辑、场景交互设计、脚本语言基础等关键环节，本文为技术人
[转]高负载并发网站架构分析
热门推荐
bluehire的专栏
12-23 2万+
由于自己正在做一个高性能大用户量的论坛程序，对高性能高并发服务器架构比较感兴趣，于是在网上收集了不少这方面的资料和大家分享。希望能和大家交流 msn: defender_ios@hotmail.com ——————————————————————————————————————— ? 初创网站与开源软件 6 ? 谈谈大型高负载网站服务器的优化心得! 8 ? Lighttpd+Squid+Apach
three.js demo
qiao
08-20 551
【代码】three.js demo。
three.js-demo
05-01
three.js-demo 这是我写的threejs教程的示例代码。 原文地址
ThreeJsDemo:ThreeJs示例代码
05-10
ThreeJsDemo 在线演示地址：
threeJs-vr-demo:three.js加photo-sphere-viewe制作全景图集
05-14
threeJs-vr-demo three.js加photo-sphere-viewe制作全景图集 图片都是大图片，所以加载起来有点慢
threeJS基本配置demo.zip
08-05
threeJS基本配置demo
Three-Memory-Demo:ThreeJS演示仓库
03-16
演示站点： 本地设置： 克隆仓库 npm安装 npm运行开始
4个threejs实战的demo项目源码
02-17
4个threejs实战的项目-资料来源于网络-不喜勿喷
three.js入门 DEMO
在这个数字革命的时代，我们将引领您穿越去中心化、智能合约、加密货币以及分布式应用程序的世界。无论您是初学者还是经验丰富的区块链开发者，我们都致力于为您提供有价值的信息和见解。
09-02 2724
css与js结合完成动画效果 入门 DEMO <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://threejs.org/build/three.j...
three.js---一个基础的demo
weixin_44691220的博客
12-07 954
一个基础的three.js demo
最简单的three.js demo
Winne_Shen的专栏
01-07 2041
 文件目录： 代码： main.html ↓ <!DOCTYPE html> <html> <head> <title>My first three.js app</title> <style> body { margin: 0; } canvas { width: 100%; height:...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值