THREE.js-------3D模型制作demo总结

简介: 渲染简单的3D模型要有的结构:场景,相机,渲染器 。

渲染简单的3D模型要有的结构:场景,相机,渲染器 。


下图是three.js中文文档截取的思维导图


5c6c9eb1418746a7ba2c38ff6831788d.png

(1)场景(Scene):

场景是[物体,光源等元素]的容器。实时调整和场景相关的所有对象数据,包括物体,光源等.创建场景,需要引入three.js文件,let scene = new THREE.Scene();


(2)相机(Camera)

在three.js中,摄像机的作用就是不断的拍摄我们创建好的场景,然后通过渲染器渲染到屏幕中。想通过不同的角度观看场景,就需要修改摄像机的位置来拍摄场景。

这里主要说一下透视相机,PerspectiveCamera(透视摄像机)。

第一个参数是视野角度(FOV)。视野角度就是无论在什么时候,你所能在显示器上看到的场景的范围,它的单位是角度(与弧度区分开)。

第二个参数是长宽比(aspect ratio)。 也就是你用一个物体的宽除以它的高的值。比如说,当你在一个宽屏电视上播放老电影时,可以看到图像仿佛是被压扁的。

接下来的两个参数是近截面(near)和远截面(far)。 当物体某些部分比摄像机的远截面远或者比近截面近的时候,该这些部分将不会被渲染到场景中。或许现在你不用担心这个值的影响,但未来为了获得更好的渲染性能,你将可以在你的应用程序里去设置它。


(3)渲染器(WebGLRenderer)

let renderer = new THREE.WebGLRenderer();

setSize   方法设置尺寸大小

setClearColor  方法设置背景颜色


(4)渲染,可全屏渲染,也可以局部渲染

全屏渲染

document.body.appendChild(renderer.domElement);

局部渲染

document.getElementById('pos').appendChild(renderer.domElement);

Three.js渲染器WebGLRenderer的.domElement属性是Three.js执行渲染方法.render()的渲染结果,本质上就是一个HTML元素Canvas。Threejs系统会自动创建一个canvas对象,然后把渲染结果呈现在该Canvas画布上。


(5)缩放,旋转,平移

通过OrbitControls.js可以对Threejs 的三维场景进行缩放,平移,旋转操作,其本质上改变的幷不是场景,而是相机的参数。

可参考网站:

https://www.cnblogs.com/wss198909/p/16381706.html


(6)自动旋转

可绕X轴旋转,可绕Y轴旋转

利用scene.rotateY(0.005);//每次绕y轴旋转0.005弧度,括号里是旋转的弧度。


(7)背景

 let textureLoader = new THREE.TextureLoader();

 let backg = textureLoader.load("./img/3.png");

 scene.background = backg;


(8)二维码

let ercode = document.getElementById('ercode');  //获取元素

       var qrcode = new QRCode("ercode", {

           text: "http://",//自己的域名

           width: 128,

           height: 128,           //二维码尺寸

           colorDark: "#000000",

           colorLight: "#ffffff",

           correctLevel: QRCode.CorrectLevel.H

       });


具体详细细节可以参考一些网站:

中文教程:http://www.webgl3d.cn/Three.js/

官方文档:http://www.webgl3d.cn/threejs/docs/

二维码教程:https://www.runoob.com/w3cnote/javascript-qrcodejs-library.html

仿制项目网站:https://hnbjsy.com/


目录
相关文章
|
9天前
|
JavaScript 前端开发 API
探索Node.js中的异步编程模型
【9月更文挑战第11天】在JavaScript的运行环境中,Node.js因其高效的异步处理能力而备受青睐。本文将深入浅出地介绍Node.js如何处理异步操作,包括回调函数、Promises和async/await等概念,并探讨它们对后端开发的意义。
17 5
|
1月前
|
JavaScript 前端开发
js之DOM 文档对象模型
js之DOM 文档对象模型
14 1
js之DOM 文档对象模型
|
20天前
|
机器学习/深度学习 存储 前端开发
实战揭秘:如何借助TensorFlow.js的强大力量,轻松将高效能的机器学习模型无缝集成到Web浏览器中,从而打造智能化的前端应用并优化用户体验
【8月更文挑战第31天】将机器学习模型集成到Web应用中,可让用户在浏览器内体验智能化功能。TensorFlow.js作为在客户端浏览器中运行的库,提供了强大支持。本文通过问答形式详细介绍如何使用TensorFlow.js将机器学习模型带入Web浏览器,并通过具体示例代码展示最佳实践。首先,需在HTML文件中引入TensorFlow.js库;接着,可通过加载预训练模型如MobileNet实现图像分类;然后,编写代码处理图像识别并显示结果;此外,还介绍了如何训练自定义模型及优化模型性能的方法,包括模型量化、剪枝和压缩等。
27 1
|
1月前
|
JavaScript 前端开发
JavaScript BOM 的概念(浏览器对象模型)
JavaScript BOM 的概念(浏览器对象模型)
30 1
|
1月前
|
JavaScript 前端开发
JavaScript——一个简单的队列Demo
JavaScript——一个简单的队列Demo
33 4
|
1月前
|
编解码 缓存 算法
Three.js如何降低3D模型的大小以便更快加载
为加快600MB的3D模型在Three.js中的加载速度,可采用多种压缩方法:1) 减少顶点数,使用简化工具或LOD技术;2) 压缩纹理,降低分辨率或转为KTX2等格式;3) 采用高效文件格式如glTF 2.0及draco压缩;4) 合并材质减少数量;5) 利用Three.js内置优化如BufferGeometry;6) 按需分批加载模型;7) Web Workers后台处理;8) 多模型合并减少绘制;9) 使用Texture Atlas及专业优化工具。示例代码展示了使用GLTFLoader加载优化后的模型。
181 12
|
20天前
|
API UED 开发者
如何在Uno Platform中轻松实现流畅动画效果——从基础到优化,全方位打造用户友好的动态交互体验!
【8月更文挑战第31天】在开发跨平台应用时,确保用户界面流畅且具吸引力至关重要。Uno Platform 作为多端统一的开发框架,不仅支持跨系统应用开发,还能通过优化实现流畅动画,增强用户体验。本文探讨了Uno Platform中实现流畅动画的多个方面,包括动画基础、性能优化、实践技巧及问题排查,帮助开发者掌握具体优化策略,提升应用质量与用户满意度。通过合理利用故事板、减少布局复杂性、使用硬件加速等技术,结合异步方法与预设缓存技巧,开发者能够创建美观且流畅的动画效果。
43 0
|
1月前
|
JavaScript 前端开发
js之DOM 文档对象模型
js之DOM 文档对象模型
|
1月前
|
JavaScript UED
js之探索浏览器对象模型
js之探索浏览器对象模型
41 0
|
1月前
|
缓存 JavaScript 前端开发
微信 JS-SDK Demo “分享信息设置” API 及数字签名生成方法(NodeJS版本)
微信 JS-SDK Demo “分享信息设置” API 及数字签名生成方法(NodeJS版本)更新时间(2020-10-29)