3D绘图 WebGl引擎----ThreeJS 3D渲染引擎_webgl 图片转成3d

3D绘图 WebGl引擎---->ThreeJS 3D渲染引擎

是将OpenGl ES2.0d原来C语言的API和配置项迁移到了JavaScript中

壹.基本图形语法

1.ThreeJs将原本复杂的WebGl API调用变得易于上手

一个3D程序包括三个基本的步骤:

​ 虚拟场景(Scene) —> 虚拟相机(Camera) ---->渲染器(Renderer)

所有我们想创建的物体和图形都在场景中

我们所观察的角度和人眼所看见的位置都由相机完成

最后将两者渲染到页面上

2.场景的应用

// 创建3D场景对象Scene
const scene = new THREE.Scene();
1
2

在底层API中包含了大部分的图形和几何体,但是复杂的人物模型和物体模型等还得由专业的建模软件去完成.

//创建一个长方体几何对象Geometry
const geometry = new THREE.BoxGeometry(100, 100, 100); 
1
2

在创建好一个物体以后,我们可以给它设置表面的材质(颜色,图片或者高光…)

//创建一个材质对象Material
const material = new THREE.MeshBasicMaterial({
    color: 0xff0000,//0xff0000设置材质颜色为红色
}); 
1
2
3
4

将所有东西设置完成后,我们需要把配置的物品给组装起来生成一个具体的模型

// 两个参数分别为几何体geometry、材质material
const mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
1
2

最后就是把模型放置到场景的随机位置或者设置到指定位置

mesh.position.set(0,10,0)
scene.add(mesh)
1
2

3.相机摆放的位置

Threejs提供了正投影相机OrthographicCamera和透视投影相机PerspectiveCamera,分别对应2D和3D模式

// 实例化一个透视投影相机对象 有四个参数如下表
const camera = new THREE.PerspectiveCamera(fov,aspect,near,far);
//可以给相机不同的位置和观察目标来观察物体不同的视角
camera.position.set(200, 200, 200); 
camera.lookAt(0, 0, 0); //坐标原点
1
2
3
4
5

具体相机观察视图如下图所示:

4.渲染器

通过场景和相机完成创建后,按下快门即可获得一张照片

// 创建渲染器对象
const renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height); //设置three.js渲染区域的尺寸(像素px)
renderer.render(scene, camera); //执行渲染操作
1
2
3
4

这样就完成的最基本的渲染条件,最后把结果添加到页面上我们就可以看见所创建的物体了.

document.body.appendChild(renderer.domElement);
1

其实renderer.domElement本质上就是一个canvas对象,我们可以插入到页面标签中.

贰.光

…

产生阴影的条件 ----->首先要有灯光和能发光的材质

再只要满足以下几个基本条件。

1. 渲染器开启阴影渲染：renderer.shadowMapEnabled = true;
2. 灯光需要开启“引起阴影”：light.castShadow = true;
3. 物体需要开启“引起阴影”和“接收阴影”：mesh.castShadow = mesh.receiveShadow = true;

一 、并不是所有的灯光和材质都能发光和产生阴影

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4H904B7i-1679966901022)(C:\Users\曹冬晖\Desktop\网格材质.svg)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fqhvloA7-1679966901023)(C:\Users\曹冬晖\Desktop\光源.svg)]

在光源当中—>环境光和半球光和平面光是不能产生阴影的,只能照亮物体明暗变化

二 、各光源的区别和效果

• 平行光就是沿着特定方向发射---->类似于太阳光

• 环境光没有特定方向,只是整体改变场景的光照明暗

• 聚光灯会沿着特定方向逐渐发散,照射范围会构成一个圆锥体 ----->类似于手电筒

• 点光源好比与一个发光点往四周发射光线 ---->类似于灯泡

各知识点参考了threeJS中文网 —>http://www.webgl3d.cn/

着特定方向逐渐发散,照射范围会构成一个圆锥体 ----->类似于手电筒

• 点光源好比与一个发光点往四周发射光线 ---->类似于灯泡

各知识点参考了threeJS中文网 —>http://www.webgl3d.cn/

​