65.Three.js案例-使用 MeshNormalMaterial 和 MeshDepthMaterial 创建 3D 图形

65.Three.js案例-使用 MeshNormalMaterial 和 MeshDepthMaterial 创建 3D 图形

实现效果

在该案例中,Three.js 被用来创建一个包含多个 3D 对象的场景。其中包括:

  • 圆环结(TorusKnot)
  • 立方体(Box)
  • 球体(Sphere)

这些对象使用 MeshNormalMaterial 来渲染,并且整个场景背景为白色,所有对象位于一个居中的容器中。

知识点

WebGLRenderer (WebGL 渲染器)

构造器

THREE.WebGLRenderer(parameters)

参数 类型 描述
parameters Object 包含渲染器选项的对象

常用参数:

  • antialias:布尔值,启用抗锯齿以获得更平滑的渲染结果。
  • alpha:布尔值,是否支持透明背景(默认为黑色)。
  • precision:字符串,着色器精度 (highp, mediump, lowp)。
方法
setSize(width, height, updateStyle)

设置渲染器的尺寸。

  • width:渲染器的宽度(像素)。
  • height:渲染器的高度(像素)。
  • updateStyle:是否更新 canvas 的样式尺寸(可选,默认为 true)。
setClearColor(color, opacity)

设置渲染器的清除颜色。

  • color:十六进制颜色值或 CSS 字符串表示的颜色。
  • opacity:透明度(0.0 到 1.0)。

PerspectiveCamera (透视相机)

构造器

THREE.PerspectiveCamera(fov, aspect, near, far)

参数 类型 描述
fov Number 视野角度(单位是度),即垂直视角范围
aspect Number 渲染区域的宽高比(通常用窗口宽度除以高度)
near Number 近裁剪面(相机视图可见范围的最近距离)
far Number 远裁剪面(相机视图可见范围的最远距离)
方法
position.set(x, y, z)

设置相机的位置坐标。

lookAt(vector)

让相机朝向指定的三维坐标点。

Scene (场景)

构造器

THREE.Scene()

用于创建一个空的场景对象,之后可以将相机、灯光、几何体等添加到场景中。

属性
overrideMaterial : Material

如果被赋值,则场景中的所有物体都会使用这个材质进行渲染,常用于调试。

translateX(value)

沿 X 轴移动整个场景。

MeshNormalMaterial (法线材质)

构造器

THREE.MeshNormalMaterial(options)

参数 类型 描述
options Object 可选参数对象

常见参数:

  • wireframe:布尔值,是否显示线框模式。
  • flatShading:布尔值,是否使用平面着色。
  • visible:布尔值,控制材质是否可见。

说明:此材质会根据物体表面的法线方向映射成 RGB 颜色,用于调试模型的表面方向。

TorusKnotGeometry (圆环结几何体)

构造器

THREE.TorusKnotGeometry(radius, tube, tubularSegments, radialSegments, p, q)

参数 类型 描述
radius Number 圆环结的主半径
tube Number 管道的半径
tubularSegments Number 管道分段数(越高越光滑)
radialSegments Number 径向分段数(越高越光滑)
p Number 扭转因子(控制打结的方式)
q Number 扭曲因子(控制打结的方式)

BoxGeometry (立方体几何体)

构造器

THREE.BoxGeometry(width, height, depth, widthSegments, heightSegments, depthSegments)

参数 类型 描述
width Number 立方体宽度
height Number 立方体高度
depth Number 立方体深度
widthSegments Number 宽度方向上的分段数
heightSegments Number 高度方向上的分段数
depthSegments Number 深度方向上的分段数

SphereGeometry (球体几何体)

构造器

THREE.SphereGeometry(radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength)

参数 类型 描述
radius Number 球体半径
widthSegments Number 经线数量(越高越光滑)
heightSegments Number 纬线数量(越高越光滑)
phiStart Number 起始经度角(弧度)
phiLength Number 经度跨度(弧度)
thetaStart Number 起始纬度角(弧度)
thetaLength Number 纬度跨度(弧度)

Mesh (网格模型)

构造器

THREE.Mesh(geometry, material)

参数 类型 描述
geometry Geometry 几何体对象
material Material 材质对象
方法
translateX(value)

沿 X 轴方向移动模型。

代码

html 复制代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script src="ThreeJS/three.js"></script>
    <script src="ThreeJS/jquery.js"></script>
</head>
<body>
<center id="myContainer"></center>
<script type="text/javascript">
    // 创建渲染器并开启抗锯齿
    var myRenderer = new THREE.WebGLRenderer({antialias: true});
    myRenderer.setSize(window.innerWidth, window.innerHeight);
    myRenderer.setClearColor('white', 1.0);
    $('#myContainer')[0].appendChild(myRenderer.domElement);

    // 创建透视相机
    var myCamera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 30, 1000);
    myCamera.position.set(-76.03, 30.40, -48.87);
    myCamera.lookAt(new THREE.Vector3(0, 0, 0));

    // 创建场景
    var myScene = new THREE.Scene();
    myScene.overrideMaterial = new THREE.MeshDepthMaterial();
    myScene.translateX(30);

    // 创建法向量材质
    var myMaterial = new THREE.MeshNormalMaterial();

    // 创建圆环结
    var myTorusKnotGeometry = new THREE.TorusKnotGeometry(8, 3, 200, 60);
    var myTorusKnotMesh = new THREE.Mesh(myTorusKnotGeometry, myMaterial);
    myTorusKnotMesh.translateX(-62);
    myScene.add(myTorusKnotMesh);

    // 创建立方体
    var myBoxGeometry = new THREE.BoxGeometry(20, 20, 20);
    var myBoxMesh = new THREE.Mesh(myBoxGeometry, myMaterial);
    myBoxMesh.translateX(-20);
    myScene.add(myBoxMesh);

    // 创建球体
    var mySphereGeometry = new THREE.SphereGeometry(20, 60, 60);
    var mySphereMesh = new THREE.Mesh(mySphereGeometry, myMaterial);
    mySphereMesh.translateX(70);
    myScene.add(mySphereMesh);

    // 渲染场景
    myRenderer.render(myScene, myCamera);
</script>
</body>
</html>

演示链接

演示效果

相关推荐
TE-茶叶蛋42 分钟前
Vuerouter 的底层实现原理
开发语言·javascript·ecmascript
成都渲染101云渲染66667 小时前
blender云渲染指南2025版
前端·javascript·网络·blender·maya
聆听+自律7 小时前
css实现渐变色圆角边框,背景色自定义
前端·javascript·css
行走__Wz7 小时前
计算机学习路线与编程语言选择(信息差)
java·开发语言·javascript·学习·编程语言选择·计算机学习路线
-代号95277 小时前
【JavaScript】二十九、垃圾回收 + 闭包 + 变量提升
开发语言·javascript·ecmascript
halo14168 小时前
vue中scss使用js的变量
javascript·vue3·scss
Mr.闻吉安8 小时前
什么是变量提升?
javascript·es6
huohuopro8 小时前
Vue3快速入门/Vue3基础速通
前端·javascript·vue.js·前端框架
草巾冒小子8 小时前
vue3中解决 return‘ inside ‘finally‘ block报错的问题
前端·javascript·vue.js