【Threejs】06blender使用方法

最新推荐文章于 2024-03-21 12:16:46 发布
最新推荐文章于 2024-03-21 12:16:46 发布
阅读量406 收藏 3
点赞数 11
文章标签： blender 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_54367095/article/details/135878711
版权

移动视角

  • 按住鼠标滚轮

缩放画布

  • 滑动滚轮

添加物体

  • shift+a

移动物体

  • 点击右上角红框位置
  • 选择移动
    在这里插入图片描述

缩放物体

  • 选中物体
  • 按住键盘s键
    ##查看视角
  • 按住波浪键（tab键上方）
    在这里插入图片描述

调整相机视角

  • 按住波浪键

  • 点击相机视角
    在这里插入图片描述

  • 点击坐标轴右侧箭头
    在这里插入图片描述

  • 选择视图
    在这里插入图片描述

  • 勾上锁定相机

  • 移动相机到合适角度
    在这里插入图片描述

  • 按住快捷键F12进行渲染
    在这里插入图片描述
    ·

给物体添加材质

  • 选中物体

  • 点击右侧材质
    在这里插入图片描述

  • 点击新建
    在这里插入图片描述

  • 在材质中选择高光反射材质
    在这里插入图片描述

  • 选择基础色，点击右上角红框着色模式
    就可以看到上色后的物体
    在这里插入图片描述

垂直分割显示

  • 鼠标移动到右侧分界线处
    在这里插入图片描述

  • 出现箭头符号后右击鼠标，选择垂直分割1
    在这里插入图片描述

改变图形形状

  • 添加一个立方体

  • 点击右侧修改器，并添加倒角
    在这里插入图片描述

  • 选择数量和段数
    在这里插入图片描述

##导出

  • FBX
    • 可编辑的3D模型，适用于游戏引擎
  • gltf
    适用于web渲染
    • glb文件
      • 需要配置相关属性
      • 文件为二进制流
    • gltf
      适用于web渲染
    • glb文件
      • 需要配置相关属性
      • 文件为二进制流
    • gltf
      • 文件可打开
言馨
关注
  • 11
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Blend文件库.zip
09-22
Blend4.5版本文件库
使用Blender导出ThreeJS的JSON模型
BrandoLv
05-28 1万+
1. 软件版本:    ThreeJS 版本: 0.92.0    Blender 版本: 2.792. Blender 安装 ThreeJS 导出插件.    1). 安装插件             拷贝导出插件( three.js-master\three.js-master\utils\exporters\blender\addons\io_three ) 到        Blender...
three.js学习笔记（一）：THREE.Materail五种基础材质的使用
qq_43641110的博客
02-10 3517
THREE.Materail五种基础材质的基本使用：属性介绍，代码示例
Blender导出gltf设置半透明材质
u014291990的博客
03-21 618
本节课继续上街内容讲解，通过Blender设置模型材质透明相关属性，threejs加载gltf，gltf模型默认实现如下材质的半透明效果。上面材质设置好以后，导出glb模型，使用上节课代码测试，你会发现Blender绘制的立方体和下面代码立方体一样具有透明效果。回顾：上节课给大家演示了Blender创建一个模型，设置材质颜色，并导出gltf，最后threejs加载。相当于threejs材质里面设置。提醒：不同版本Blender交互界面可能有差异，但是整体思路都一样。Blender材质设置。
three.js学习笔记(十二)——使用Blender自定义模型
hongsir的博客
12-16 7735
这次我们将学习如何用3D软件创建自己的模型 选择软件 有很多软件如Cinema 4D、Maya、3DS Max、Blender、ZBrush、Marmoset Toolbag、Substance Painter等都很不错。当然它们在用户体验、性能、功能、兼容性、价格等方面也有所不同。 这次我们选择Blender，因为它是免费的，性能卓越同时适用于所有主要的操作系统，还有一个广泛的社区。 下载Blender 官网下载地址https://www.blender.org/download/ 界面 区域 默认区域
blender+Three.js 三维数据可视化
仅次于狼的博客
12-16 1万+
接到了一个需求，一个物联网的电力保障系统实时监控。实施用到了Web 3D技术，以前用过一段时间的Three.js，因为太耗资源，没怎么铺开，现在硬件条件好了，就拿出来试试。 环境：blender-2.93.6-windows-x64+Three.js0.91.0+Echart2.0 我习惯不用最新版本的软件做开发，一方面新版的稳定性不如旧版，主要是基于js的前端开发，新版大部分对IE都不友好，国内的需求现状就是，问就是随便，验收就拿IE说是，所以多一事不如少一事，就用旧的成熟版本对付了。 首.
vue + threejs实现导入blender动画并控制其播放
CodingNoob
04-28 3618
<template> <div class="modelsBox"> <div class="modelsBox_wrapper"></div> <div class="opara-pannel" @click.stop> <div> <button @click="playAnimate(idx)" v-for="(v, idx) in this.animations" :key="i...
Three.js和Blender入门元宇宙 | 大帅老猿threejs特训
hugh
01-15 1618
Three.js是基于原生WebGL封装运行的三维引擎，就是使用javascript来实现3D效果。为了真正能够让场景借助three.js来进行显示，需要场景、相机和渲染器几个对象，这样就能透过摄像机渲染出场景。Three.js官网地址：https://threejs.org/。Blender可以运行于不同的平台，而且安装后占很少空间（相较于其它同类型软件）。虽然它经常不支持说明文档或示例发布，但其拥有极丰富的功能，而且绝大部分是高端模块塑造软件。
如何用Three.js + Blender打造一个web 3D展览馆
vivo互联网技术
07-14 5125
3D展览馆是什么，先来预览下效果：看起来像个3D冒险类手游，用户可以操纵屏幕中央的虚拟摇杆，以第一人称视角在房间内自由移动、看展览。现在，我们基本完成了整个3D展览馆的开发。虽然有一些细节没有在文中涉及到，但开发过程大致如此。（1）了解Blender、GLTF / GLB模型（2）js导入GLTF / GLB模型（3）还原设计稿添加光源调整模型材质、增加环境纹理增加阴影（4）实现虚拟移动摇杆，控制镜头移动（5）增加碰撞检测（6）性能调优：纹理烘培：通过纹理烘焙降低实时光影的性能损耗。
关于3d建模threejs和blender
最新发布
04-16
关于3d建模threejs和blender
Blender 3D可视化建模(Three.js)
08-08
分享Blender视频教程——Blender 3D可视化建模(Three.js)，视频+素材资料下载 Blender是一款免费开源三维图形图像软件，提供从建模、动画、材质、渲染、到音频处理、视频剪辑等一系列动画短片制作解决方案。 Blender拥有方便在不同工作下使用的多种用户界面，内置绿屏抠像、摄像机反向跟踪、遮罩处理、后期结点合成等高级影视解决方案。Blender内置有Cycles渲染器与实时渲染引擎EEVEE 。同时还支持多种第三方渲染器。 主要功能 Blender 是一个完整集成的 3D 创作套件，提供了大量的基础工具，包括 建模 、 渲染 、 动画 & 绑定 、 视频编辑 、 视觉效果 、 合成 、 贴图， 以及多种类型的 模拟。 跨平台，使用了 OpenGL 的 GUI 可以在所有主流平台上都表现出一致的显示效果 (并且可通过 Python 脚本来自定义界面)。 高质量的 3D 架构，带来了快速且高效的工作流。 活跃的社区支持， blender.org/community 收录了大量的站点列表。 体积小巧，便于分发。
threejs-projects:小型项目，使用Three.js和我在Blender中制作的模型
05-24
threejs-项目 小型项目，使用three.js和我在Blender中制作的东西！ 在这里看到它们： : 要运行此项目： 如果你有Python的安装cd进入下载后该回购和运行python -m http.server 。 然后导航到...
blender+Three.js 三维数据可视化：数字孪生
热门推荐
仅次于狼的博客
12-21 1万+
原来叫做系统仿真现在都叫做数字孪生了，我也凑个热闹，这个是一个仓库提货的场景仿真。延续上一个项目《blender+Three.js 三维数据可视化》2和3，有兴趣的可以去看。 环境：blender-2.93.6-windows-x64+Three.js0.91.0+Echart2.0 这里是上一个场景的仓库部分，出货分为发货（直接从厂里发到客户，走内部流程）和自提（客户自己来取货），这里是自提部分，主要是这个自动装货机是我们项目的，所以借此机会客户加了一个这个需求。 废话说完，我们开始，首先分析需求.
Blender生成模型，threejs加载gltf
u014291990的博客
03-21 1121
本节课做一个全流程演示，先用Blender绘制一个三维模型，接着导出gltf格式模型，最后threejs加载Blender导出的gltf模型。代码基础上给大家演示，咱们把threejs代码创建的长方体网格模型删除掉，然后加载Blender导出的gltf或glb格式模型代替。会返回一个gltf对象，作为参数2函数的参数gltf包含了模型的多种数据，其中。加载gltf格式的模型，需要借助threejs的扩展库gltf加载器。导出gltf格式模型的时候，除了后缀名。，也可以选择导出gltf的二进制格式。
Blender Three.js 智慧3D机房开发 模型创建与导入中的常见问题与解决方案
qq_59060196的博客
03-17 4486
如果你遇到了在本文中没有出现的问题，欢迎评论或者私信我。
Web3D-从0开始学习Threejs+Blender实现甜甜圈掉落效果| 大帅老猿threejs特训
xindy138的博客
01-13 591
最近大帅邀请胖达老师带来了元宇宙实战特训，具体讲解了如何使用Blender进行3D建模、添加动画以及如何在Threejs中展示、控制3D模型，让我特别感慨，原来一些看似复杂的3D项目可以如此简单的实现。浏览器直接渲染：电脑浏览器、移动端浏览器（包括微信浏览器） 微信小程序；服务端渲染（服务端运行，效果好，运营成本高）；将3D画面像素推流到前端浏览器/小程序展示；
3D建模软件搭建threejs 3D场景 Blender
u014291990的博客
03-21 477
参考资料：threejs中文网threejs qq交流群：814702116。
Vue3+Three.js+antvG2实战项目 智慧城市(四)
范天缘的博客
04-24 983
技术栈都是最新的:vue3+vite+typeScript+Three+antv G2。在网上找了很久都没有找到使用Three.js开发智慧城市的。模型,天空图盒子链接分享(不想下载源码可以只用下这个),自己花了一点时间做了一个纯前端的智慧城市项目。这个动态方法要放在animate方法里面。这样光圈就开始动起来了 3d部分就讲完了。1.先创建一个three的圆柱几何体。接下来的图表和页面样式我会用一章讲完。2.给几何体加载一个合适的纹理。3.然后让他缓慢变大,重复运动。智慧城市项目的录制视频。
threejs导入blender模型
06-13
要在threejs中导入Blender模型，你需要将Blender文件导出为三维模型文件，例如OBJ或GLTF格式。然后在threejs中加载该文件。 下面是一些步骤： 1. 在Blender中，选择要导出的模型，然后选择“文件”>“导出”>“OBJ”或“GLTF”。 2. 在OBJ或GLTF导出选项中，选择所需的选项。例如，您可以选择是否包括材质和纹理。 3. 保存导出的文件。 4. 在threejs中，使用OBJLoader或GLTFLoader加载文件。例如： ```javascript // OBJLoader var loader = new THREE.OBJLoader(); loader.load( 'path/to/file.obj', function (object) { scene.add(object); } ); // GLTFLoader var loader = new THREE.GLTFLoader(); loader.load( 'path/to/file.gltf', function (gltf) { scene.add(gltf.scene); } ); ``` 这样就可以在threejs中加载Blender模型了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值