Three.js是一个基于JavaScript编写的开源3D图形库,它使用WebGL技术在网页上渲染3D图形。Three.js提供了许多高级功能,如几何体、纹理、光照、阴影等,以便开发者能够快速地创建复杂且逼真的3D场景。

特点:

Three.js具有跨平台性,可以在主要的桌面和移动浏览器上运行,并且其开源社区提供了广泛的文档、示例和第三方库,使开发变得更容易。相对于其他复杂的三维引擎,Three.js相对容易学习,对于有JavaScript和基本数学知识的开发者来说非常友好。

什么是webGl

WebGL(Web Graphics Library)是一种JavaScript API,它能在无需任何插件的情况下,在浏览器中呈现2D和3D图形。WebGL基于OpenGL ES 2.0,因此它可以在没有安装额外驱动程序的情况下运行。

ThreeJS 中的相机是什么?

相机是可以 360 旋转的 相机,可以任意放置相机的未知,达到可以观察场景的任意视角

三维空间需要一个相机来拍摄场景。ThreeJS 中有多种相机类型可供选择,包括透视相机(PerspectiveCamera)、正交相机(OrthographicCamera)等。

ThreeJS 中的组是什么?

作用是可以将对象实体添加到组中,方便一起 移动 旋转 缩放 等处理 ;

如何创建 ThreeJS 场景? View

创建 ThreeJS 场景需要创建一个场景对象,并将所需的几何体、光源、相机等添加到场景中。

初始化渲染器 render   初始化场景 scene  添加灯光  light 添加相机

ThreeJS 中的光源有哪些类型?

在 ThreeJS 中,有几种不同类型的光源可供选择。其中包括环境光(AmbientLight)、点光源(PointLight)、平行光(DirectionalLight)和聚光灯(SpotLight)。

 // 初始化光源  环境光源
private initLight() {
const ambient = new AmbientLight(0xffffff, 0.6);
this.scene.add(ambient); // 平行光
const light = new THREE.DirectionalLight(0xffffff);
light.position.set(0, 200, 100);
light.castShadow = true; light.shadow.camera.top = 180;
light.shadow.camera.bottom = -100;
light.shadow.camera.left = -120;
light.shadow.camera.right = 400;
light.shadow.camera.near = 0.1;
light.shadow.camera.far = 400;
// 设置mapSize属性可以使阴影更清晰,不那么模糊
light.shadow.mapSize.set(1024, 1024); this.scene.add(light);
}

ThreeJS 中的材质有哪些类型?

在 ThreeJS 中,有许多不同类型的材质可供选择,以适应各种不同类型的几何体。这些包括基础材质(MeshBasicMaterial)、标准材质(MeshStandardMaterial)和物理材质(MeshPhysicalMaterial)等等。

创建一个正方体需要基础材质

  var material =[
new THREE.MeshBasicMaterial( { color: 'red' } ), // right
new THREE.MeshBasicMaterial( { color: 'red' } ), // left
new THREE.MeshBasicMaterial( { color: 'red' } ), // top
new THREE.MeshBasicMaterial( { color: 'red' } ), // bottom
new THREE.MeshBasicMaterial( { map: new THREE.CanvasTexture(this.getTextCanvas2label(item,"#1073ca")) } ), // front
new THREE.MeshBasicMaterial( { map: new THREE.CanvasTexture(this.getTextCanvas2label(item,"#1073ca")) } ) // front
];
var square :any = new THREE.Mesh( geometry, material );

.ThreeJS 中的渲染器是什么?

渲染器是 ThreeJS 中用于将创建的场景呈现在屏幕上的核心组件。它使用 WebGL 或 canvas 技术将场景中的图形绘制到浏览器中。

1. 什么是three.js?的更多相关文章

  1. Vue.js 和 MVVM 小细节

    MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...

  2. js学习笔记:操作iframe

    iframe可以说是比较老得话题了,而且网上也基本上在说少用iframe,其原因大致为:堵塞页面加载.安全问题.兼容性问题.搜索引擎抓取不到等等,不过相对于这些缺点,iframe的优点更牛,跨域请求. ...

  3. js学习笔记:webpack基础入门(一)

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  4. JS调用Android、Ios原生控件

    在上一篇博客中已经和大家聊了,关于JS与Android.Ios原生控件之间相互通信的详细代码实现,今天我们一起聊一下JS调用Android.Ios通信的相同点和不同点,以便帮助我们在进行混合式开发时, ...

  5. jquery和Js的区别和基础操作

    jqery的语法和js的语法一样,算是把js升级了一下,这两种语法可以一起使用,只不过是用jqery更加方便 一个页面想要使用jqery的话,先要引入一下jqery包,jqery包从网上下一个就可以, ...

  6. 利用snowfall.jquery.js实现爱心满屏飞

    小颖在上一篇一步一步教你用CSS画爱心中已经分享一种画爱心的方法,这次再分享一种方法用css画爱心,并利用snowfall.jquery.js实现爱心满屏飞的效果. 第一步: 利用伪元素before和 ...

  7. node.js学习(三)简单的node程序&&模块简单使用&&commonJS规范&&深入理解模块原理

    一.一个简单的node程序 1.新建一个txt文件 2.修改后缀 修改之后会弹出这个,点击"是" 3.运行test.js 源文件 使用node.js运行之后的. 如果该路径下没有该 ...

  8. JS正则表达式常用总结

    正则表达式的创建 JS正则表达式的创建有两种方式: new RegExp() 和 直接字面量. //使用RegExp对象创建 var regObj = new RegExp("(^\\s+) ...

  9. 干货分享:让你分分钟学会 JS 闭包

    闭包,是 Javascript 比较重要的一个概念,对于初学者来讲,闭包是一个特别抽象的概念,特别是ECMA规范给的定义,如果没有实战经验,很难从定义去理解它.因此,本文不会对闭包的概念进行大篇幅描述 ...

  10. JS核心系列:理解 new 的运行机制

    和其他高级语言一样 javascript 中也有 new 运算符,我们知道 new 运算符是用来实例化一个类,从而在内存中分配一个实例对象. 但在 javascript 中,万物皆对象,为什么还要通过 ...

随机推荐

  1. 03 OLED显示屏实现

    目录 前言 一.软件模拟IIC协议 1.开启IIC协议 2.结束IIC协议 3.传输数据 二.OLED的操作 1.传输数据的准备 2.写入命令 3.写入数据 4.初始化函数 5.设置光标 6.显示字符 ...

  2. 【Dos-BatchPrograming】03

    --1.AT 计划任务 Microsoft Windows [版本 10.0.19041.746] (c) 2020 Microsoft Corporation. 保留所有权利. C:\Users\A ...

  3. URDF使用语法【万字解析赶紧码住】 —— 机器人统一描述文件格式(Unified Robot Description Format)

    原文地址: https://zhuanlan.zhihu.com/p/665269288 具体内容略,请参照原文.

  4. 【转载】 银河麒麟V10系统安装U盘制作

    版权声明:本文为CSDN博主「CPUOS520」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明.原文链接:https://blog.csdn.net/liuhao_0 ...

  5. AI编程助手那些事儿

    最近跟身边的程序员老杆子讨论需求时,惊奇的发现,他居然没使用AI编程助手.一时间有2个想法从大脑闪过,然后心里还带了一丝轻蔑: AI编程助手这么好的东西,你居然不用. 作为老程序员,你居然不跟上时代步 ...

  6. Camera | 7.瑞芯微rk3568平台摄像头控制器MIPI-CSI驱动架构梳理

    因为有拍照.录制视频.直播等刚需,现在手机的摄像头基本都是高清,支持高清摄像头的SoC都支持MIPI-CSI. 不同SoC的MIPI-CSI在实现上有一定差别,即使同一厂家设计生产的芯片也都不尽相同. ...

  7. 网络/命令行抓包工具tcpdump详解

    概述 用简单的话来定义tcpdump,就是:dump the traffic on a network,根据使用者的定义对网络上的数据包进行截获的包分析工具. tcpdump可以将网络中传送的数据包的 ...

  8. celery僵死导致jumpserver提示 连接WebSocket失败

    celery僵死导致jumpserver提示连接WebSocket失败 Celery的任务监控位于堡垒机 "作业中心"下的"任务监控" 中,点击打开新的页面如下 ...

  9. 这才是java对象正解

    这才是 Java 对象正解 在深入讨论对象之前,让我们先明确对对象和实例的理解. 什么是对象? 对象(Object)是内存中分配的实际数据结构,它包含了数据和方法.在 Java 中,对象是类的一个实例 ...

  10. 快手 内推码:TYORVzmsw 秋招 应届生/实习生 真正本人内推 已有多人在我内推之后,接连顺利通过了HR筛选、用人部门筛选、面试!

    内推码:TYORVzmsw 校园招聘岗位列表:https://campus.kuaishou.cn/#/campus/jobs?code=TYORVzmsw 真正的本人内部推荐! 已有多人在我内推之后 ...