36. Three.js案例-创建带光照和阴影的球体与平面

36. Three.js案例-创建带光照和阴影的球体与平面

实现效果

知识点

Three.js基础

WebGLRenderer

WebGLRenderer 是Three.js中最常用的渲染器,用于将场景渲染到网页上。

构造器

javascript 复制代码
new THREE.WebGLRenderer(parameters)
参数 类型 描述
parameters object 可选参数,用于配置渲染器。包括但不限于 antialias(抗锯齿)、alpha(透明度)等。

方法

  • setPixelRatio(value): 设置设备像素比。
  • setSize(width, height): 设置渲染器的尺寸。
  • setClearColor(color, alpha): 设置渲染器的背景颜色。
  • shadowMap.enabled: 启用或禁用阴影映射。
  • render(scene, camera): 渲染场景。

Scene

Scene 是Three.js中的场景对象,用于存储所有需要渲染的对象。

构造器

javascript 复制代码
new THREE.Scene()

Camera

PerspectiveCamera 是Three.js中的一种透视相机,用于模拟人眼的视觉效果。

构造器

javascript 复制代码
new THREE.PerspectiveCamera(fov, aspect, near, far)
参数 类型 描述
fov float 视野角度,单位为度。
aspect float 相机宽高比。
near float 近裁剪面距离。
far float 远裁剪面距离。

方法

  • position.set(x, y, z): 设置相机的位置。
  • lookAt(vector): 设置相机的朝向。

PointLight

PointLight 是Three.js中的点光源,用于模拟从一个点发出的光。

构造器

javascript 复制代码
new THREE.PointLight(color, intensity, distance, decay)
参数 类型 描述
color color 光源颜色。
intensity float 光源强度。
distance float 光源的最大影响距离。如果为0,则表示无限远。
decay float 光源衰减系数。默认值为1。

属性

  • castShadow: 是否投射阴影。
  • distance: 光源的最大影响距离。
  • intensity: 光源强度。

SphereBufferGeometry

SphereBufferGeometry 用于创建一个球体几何体。

构造器

javascript 复制代码
new THREE.SphereBufferGeometry(radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength)
参数 类型 描述
radius float 球体半径。
widthSegments int 经度方向上的分段数。默认值为8。
heightSegments int 纬度方向上的分段数。默认值为6。
phiStart float 球体起始经度。默认值为0。
phiLength float 球体经度范围。默认值为2π。
thetaStart float 球体起始纬度。默认值为0。
thetaLength float 球体纬度范围。默认值为π。

Mesh

Mesh 是Three.js中的网格对象,用于将几何体和材质组合在一起。

构造器

javascript 复制代码
new THREE.Mesh(geometry, material)
参数 类型 描述
geometry Geometry 几何体对象。
material Material 材质对象。

属性

  • castShadow: 是否投射阴影。
  • receiveShadow: 是否接收阴影。

PlaneGeometry

PlaneGeometry 用于创建一个平面几何体。

构造器

javascript 复制代码
new THREE.PlaneGeometry(width, height, widthSegments, heightSegments)
参数 类型 描述
width float 平面的宽度。
height float 平面的高度。
widthSegments int 宽度方向上的分段数。默认值为1。
heightSegments int 高度方向上的分段数。默认值为1。

MeshStandardMaterial

MeshStandardMaterial 是Three.js中的一种标准材质,支持物理光照模型。

构造器

javascript 复制代码
new THREE.MeshStandardMaterial(parameters)
参数 类型 描述
parameters object 可选参数,用于配置材质。包括但不限于 color(颜色)、roughness(粗糙度)、metalness(金属度)等。

代码

html 复制代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script src="ThreeJS/three.js"></script>
    <script src="ThreeJS/jquery.js"></script>
</head>
<body>
<div id="myContainer"></div>
<script>
    // 创建渲染器
    var myRenderer = new THREE.WebGLRenderer();
    myRenderer.setPixelRatio(window.devicePixelRatio);
    myRenderer.setSize(480, 320);
    myRenderer.setClearColor('white', 1);
    myRenderer.shadowMap.enabled = true;
    $("#myContainer").append(myRenderer.domElement);

    // 创建场景
    var myScene = new THREE.Scene();

    // 创建相机
    var myCamera = new THREE.PerspectiveCamera(45, 480 / 320, 0.1, 1000);
    myCamera.position.set(4, 4, 2);
    myCamera.position.multiplyScalar(2);
    myCamera.lookAt(new THREE.Vector3(0, 0, 0));

    // 创建点光源
    var myPointLight = new THREE.PointLight('white');
    myPointLight.position.set(0, 6, 0);
    myPointLight.distance = 380;
    myPointLight.castShadow = true;
    myScene.add(myPointLight);

    // 创建球体
    var mySphereGeometry = new THREE.SphereBufferGeometry(2, 36, 36);
    var mySphereMaterial = new THREE.MeshNormalMaterial({wireframe: true, transparent: true});
    var mySphereMesh = new THREE.Mesh(mySphereGeometry, mySphereMaterial);
    mySphereMesh.position.set(0, 2.5, 0);
    mySphereMesh.castShadow = true;
    myScene.add(mySphereMesh);

    // 创建平面
    var myPlaneGeometry = new THREE.PlaneGeometry(120, 120, 1, 1);
    var myPlaneMaterial = new THREE.MeshStandardMaterial({color: 'white'});
    var myPlaneMesh = new THREE.Mesh(myPlaneGeometry, myPlaneMaterial);
    myPlaneMesh.rotateX(-Math.PI / 2);
    myPlaneMesh.rotateZ(-Math.PI / 7);
    myPlaneMesh.position.set(0, -3.5, 0);
    myPlaneMesh.receiveShadow = true;
    myScene.add(myPlaneMesh);

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

演示链接

示例链接

相关推荐
良辰未晚13 分钟前
基于全屏 Quad 的 Three.js 后处理全解析
three.js
Mintopia3 小时前
Three.js 材质与灯光:一场像素级的光影华尔兹
前端·javascript·three.js
Mintopia8 小时前
Three.js 3D 世界中的噪声运动:当数学与像素共舞
前端·javascript·three.js
康康的幸福生活9 小时前
webgl2 方法解析: shaderSource()
webgl
魂断蓝桥66617 小时前
如何基于three.js(webgl)引擎架构,实现3D医院、3D园区导航,3D科室路径导航
webgl·数字孪生·threejs·3d定位、三维室内定位、3d建筑·three.js路径规划、三维a*算法、javascript三维导航,·3d医院·3d导航·园区导航
阿怼丶10 天前
🔥Three.js轮廓线高亮神器来啦!自定义高亮选中效果只需一个类搞定!
前端·three.js
小桥风满袖10 天前
Three.js-硬要自学系列36之专项学习包围盒
前端·css·three.js
康康的幸福生活10 天前
webgl2 方法解析: SCISSOR_TEST
javascript·webgl
Mintopia10 天前
Three.js 模块化开发:代码界的乐高搭建指南
前端·javascript·three.js
刘皇叔code11 天前
Three.js中LightProbe的应用
three.js