江西营销网站建设,wordpress与域名,wordpress怎么安装主题,手机上建设网站前言
姊妹篇#xff1a;Three.js初试——基础概念 介绍了 Three.js 的一些核心要素概念#xff0c;这篇文章会讲一下它的关键要素概念。
之前我们了解到展示一个3D图像#xff0c;必须要有场景、相机、渲染器这些核心要素#xff0c;仅仅这些还不够#xff0c;我们还需要…前言
姊妹篇Three.js初试——基础概念 介绍了 Three.js 的一些核心要素概念这篇文章会讲一下它的关键要素概念。
之前我们了解到展示一个3D图像必须要有场景、相机、渲染器这些核心要素仅仅这些还不够我们还需要在场景中放置物体拍摄对象、光源才能展示3D图像。
物体拍摄对象
绘制3D模型常用的做法是用三角形组成的网格来模拟。
几何体模型Geometry
在 Three.js 中预设了一些二维和三维几何体模型。
其中二维几何体模型
平面几何体PlaneGeometry圆形几何体CircleGeometry圆环几何体RingGeometry…
三维几何体模型
立方几何体BoxGeometry球几何体SphereGeometry圆柱几何体CylinderGeometry圆锥几何体ConeGeometry圆环几何体TorusGeometry…
在使用时实例化相应几何体对象。
举例
// 创建一个圆环几何体环面半径为10管道半径为3管道横截面分段数为16管道分段数为100圆环圆心角为Math.PI * 2
const geometry new THREE.TorusGeometry( 10, 3, 16, 100 );说明
// 构造器
TorusGeometry(radius: Float, tube: Float, radialSegments: Integer, tubularSegments: Integer, arc: Float)radius - 环面的半径从环面的中心到管道横截面的中心。默认值是1。tube — 管道的半径默认值为0.4。radialSegments — 管道横截面的分段数默认值为8。tubularSegments — 管道的分段数默认值为6。arc — 圆环的圆心角单位是弧度默认值为Math.PI * 2。
在线示例TorusGeometry演示 Three.js Geometry材质Material
在 Three.js 中预设了几种材质对象。
基础线条材质LineBasicMaterial 一种用于绘制线框样式几何体的材质。 基础网格材质MeshBasicMaterial 一个以简单着色平面或线框方式来绘制几何体的材质。这种材质不受光照的影响。 Lambert网格材质MeshLambertMaterial 一种非光泽表面的材质没有镜面高光。 法线网格材质MeshNormalMaterial 一种把法向量映射到RGB颜色的材质。 标准网格材质MeshStandardMaterial 一种基于物理的标准材质使用Metallic-Roughness工作流程。 …
详细请查阅 材质文档
举例
const material new THREE.MeshBasicMaterial( { color: 0xffff00 } );在线示例MeshBasicMaterial演示 Three.js Material网格Mesh
表示基于以三角形为polygon mesh多边形网格的物体的类。
当有了几何体模型和材质之后我们需要通过一个网格Mesh将两者结合起来创建正在的拍摄对象。
两种不同的拍摄对象构造方法
import * as THREE from three
import { createMultiMaterialObject } from three/examples/jsm/utils/SceneUtils// 第一个参数代表物体的形状第二个参数代表物体的材质。
// 只能是一种材质
new THREE.Mesh(geometry, material)
// 可以使用多种材质数组格式
createMultiMaterialObject(geometry,[materials...])举例
// 创建基础网格材质
let materialBasic new THREE.MeshBasicMaterial({color: 0xFF4500,wireframe: true // 是否将几何体渲染为线框默认值为false即渲染为平面多边形
});
// 创建法线网格材质
let materialNormal new THREE.MeshNormalMaterial();
const cube new THREE.Mesh(geometry, material);
// 创建多种网格因为有多个材质
const cube2 createMultiMaterialObject(geometry, [materialBasic,materialNormal
]);最后把物体放在场景中调用 add 方法。
scene.add(cube);光源
在 Three.js 中预设了几种光源。
环境光AmbientLight 环境光会均匀的照亮场景中的所有物体。环境光不能用来投射阴影因为它没有方向。 平行光DirectionalLight 平行光是沿着特定方向发射的光。这种光的表现像是无限远从它发出的光线都是平行的。常常用平行光来模拟太阳光的效果。平行光可以投射阴影。 点光源PointLight 从一个点向各个方向发射的光源。一个常见的例子是模拟一个灯泡发出的光。该光源可以投射阴影。 聚光灯SpotLight 光线从一个点沿一个方向射出随着光线照射的变远光线圆锥体的尺寸也逐渐增大。该光源可以投射阴影。 …
详细请查阅 灯光文档
示例
// White directional light at half intensity shining from the top.
const directionalLight new THREE.DirectionalLight( 0xffffff, 0.5 );
scene.add(directionalLight);说明
// 构造器
DirectionalLight(color: Integer, intensity: Float)color - (可选参数) 16进制表示光的颜色。 缺省值为 0xffffff (白色)。intensity - (可选参数) 光照的强度。缺省值为1。
这篇文章的主要内容就介绍到这里继续学习中。一起加油
