2.相机2.1相机特点2.2正交相机2.3空间布局2.4小姐操作

3.渲染器

本章简单介绍前端框架threeJS的使用使用threeJS我们可以构建出前端的3D界面。

不仅能应用在看房、模型分享网站等有需求的项目中还可以在其他项目中做出酷炫的效果。

一、安装

为了方便查看效果我们用vite快速创建一个项目,然后使用npm工具进行安装命令如下

npm

/titleDocument/title/headbodyscript

typemoduleimport

THREE.PerspectiveCamera(75,window.innerWidth

window.innerHeight,0.1,1000);//

5);//

THREE.WebGLRenderer();renderer.setSize(window.innerWidth,

将渲染出的元素追加到页面document.body.appendChild(renderer.domElement);function

animation()

{requestAnimationFrame(animation);cube.rotation.x

0.01;cube.rotation.y

camera);}animation();/script/body

/html

场景元素(scene)中存储着我们所有的对象模型、灯光、摄像机是一个容器

1.1创建场景

有了场景后我们就可以向里面添加需要的元素这个元素可以是模型、灯光等threeJS中提供了多种默认的模型也可以自己读取建模软件中的模型进行导入我们试着导入一个默认的立方体

const

);对于模型而言创建出的物体还需要为其指定材质才能够正常显示。

最后使用BoxGeometry()创建模型顶点数据用MeshBasicMaterial()创建模型材质,两者结合变成完整的立方体模型然后添加到场景scene中

1.3场景属性

场景除了可以存储各种元素以外场景对象本身也有很多属性比如我们可以使用background属性设置场景背景

2.相机

threejs中提供了多种类型的相机正交相机距离不影响物体大小、透视相机物体近大远小、立方相机用于全景图、立体相机。

2.1相机特点

相机的视野区域是一个立方体锥体离我们人眼原的一段是远端离我们人眼近的一端是近端处于这个立方体内的物体会被投射到近端形成画面。

2.2正交相机

我们说过相机有很多种类型上面视野范围呈锥体的是透视相机而正交相机的视角范围是一个立方体正交相机投射的物体会保留原来的大小不会近大远小。

这种相机常被用于一些需要精准测量的模型中不会因为缩放干扰到数据。

2.3空间布局

场景中用三维坐标来描述位置threejs中的布局如下用blender模拟一下

如果是刚创建出的元素包括相机都是生成在场景原点的位置如果我们想要成功渲染出模型需要先调整模型和相机的位置让模型处于相机的可视范围内。

2.4小姐操作

相机可以进行位置的移动和视角的旋转这些可以帮助我们在页面渲染出一些想要的效果。

10);//

调用构造器可以创建对应对象其中可以设置canvas属性来指定一个已有的canvas标签在里面渲染效果。

创建渲染器const

document.querySelector(.canvas1)});如果不设置或者没有现成的canvas元素就需要用追加节点的方式动态的追加一个新的canvas元素。

document.body.appendChild(renderer.domElement)这里renderer.domElement指向的是用来渲染的canvas对象如果在构造方法中指定过就是我们指定的那一个。

如果是没有指定过就会自动生成一个canvas这个时候再用来作为追加节点就可以了。

由此我们已经能够简单使用threeJS创建简单模型不过想要做出酷炫效果需要导入外部模型这个后面再说。