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/


目录
相关文章
|
编解码 JavaScript 前端开发
【Java进阶】详解JavaScript的BOM(浏览器对象模型)
总的来说,BOM提供了一种方式来与浏览器进行交互。通过BOM,你可以操作窗口、获取URL、操作历史、访问HTML文档、获取浏览器信息和屏幕信息等。虽然BOM并没有正式的标准,但大多数现代浏览器都实现了相似的功能,因此,你可以放心地在你的JavaScript代码中使用BOM。
364 23
|
算法 JavaScript 前端开发
第一个算法项目 | JS实现并查集迷宫算法Demo学习
本文是关于使用JavaScript实现并查集迷宫算法的中国象棋demo的学习记录,包括项目运行方法、知识点梳理、代码赏析以及相关CSS样式表文件的介绍。
188 7
第一个算法项目 | JS实现并查集迷宫算法Demo学习
|
JavaScript 前端开发 数据库
探索Node.js中的异步编程模型
【9月更文挑战第23天】在Node.js的世界里,异步编程是核心的魔法,它让这个平台能够处理高并发请求。本文将带你深入理解Node.js的异步编程模型,通过代码示例和直观的解释,我们将一起揭开异步编程的面纱。
229 17
|
Web App开发 JavaScript 前端开发
深入理解Node.js事件循环和异步编程模型
【10月更文挑战第9天】在JavaScript和Node.js中,事件循环和异步编程是实现高性能并发处理的基石。本文通过浅显易懂的语言和实际代码示例,带你一探究竟,了解事件循环的工作原理及其对Node.js异步编程的影响。从基础概念到实际应用,我们将一步步解锁Node.js背后的魔法,让你的后端开发技能更上一层楼!
|
JavaScript 前端开发
js之DOM 文档对象模型
js之DOM 文档对象模型
166 1
js之DOM 文档对象模型
|
Web App开发 JavaScript 前端开发
JavaScript Window - 浏览器对象模型
JavaScript Window - 浏览器对象模型
228 2
|
Web App开发 JavaScript 前端开发
探索Node.js中的异步编程模型
【9月更文挑战第21天】在现代Web开发中,Node.js以其非阻塞I/O和事件驱动的特性成为热门选择。本文将深入探讨Node.js的异步编程模型,揭示其背后的原理,并通过示例代码展示如何高效利用异步特性来处理并发任务。
248 6
|
JavaScript 前端开发 API
探索Node.js中的异步编程模型
【9月更文挑战第11天】在JavaScript的运行环境中,Node.js因其高效的异步处理能力而备受青睐。本文将深入浅出地介绍Node.js如何处理异步操作,包括回调函数、Promises和async/await等概念,并探讨它们对后端开发的意义。
201 6
|
JavaScript 前端开发
JS配合CSS3实现动画和拖动小星星小Demo
本文通过代码示例展示了如何使用JavaScript和CSS3实现动画效果和拖动小星星的交互效果,包括文字掉落动画和鼠标拖动产生小星星动画的实现方法。
305 0
JS配合CSS3实现动画和拖动小星星小Demo
|
JavaScript 前端开发
深入理解Node.js中的异步编程模型
【10月更文挑战第39天】在Node.js的世界里,异步编程是核心所在,它如同自然界的水流,悄无声息却又无处不在。本文将带你探索Node.js中异步编程的概念、实践以及如何优雅地处理它,让你的代码像大自然的流水一样顺畅和高效。

热门文章

最新文章