35. Three.js案例-创建带阴影的球体与平面

35. Three.js案例-创建带阴影的球体与平面

实现效果

知识点

WebGLRenderer

WebGLRenderer 是Three.js中用于渲染场景的主要类之一,它负责将场景中的对象渲染到画布上。

构造器

new THREE.WebGLRenderer(parameters : Object)

参数 类型 描述
parameters Object 可选参数对象,包含多个属性,如 antialias(抗锯齿)、alpha(透明背景)等。
方法
  • setPixelRatio(value : Number): 设置设备像素比。
  • setSize(width : Number, height : Number): 设置渲染器的尺寸。
  • setClearColor(color : Color, alpha : Number): 设置渲染器的背景颜色。
  • render(scene : Scene, camera : Camera): 渲染场景。

Scene

Scene 是Three.js中的场景类,用于存储和管理所有可见的对象。

构造器

new THREE.Scene()

PerspectiveCamera

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

构造器

new THREE.PerspectiveCamera(fov : Number, aspect : Number, near : Number, far : Number)

参数 类型 描述
fov Number 视野角度(以度为单位)。
aspect Number 相机的宽高比。
near Number 近裁剪面距离。
far Number 远裁剪面距离。
方法
  • position.set(x : Number, y : Number, z : Number): 设置相机的位置。
  • lookAt(vector : Vector3): 设置相机的朝向。

DirectionalLight

DirectionalLight 是Three.js中的方向光类,用于模拟太阳光或其他平行光源。

构造器

new THREE.DirectionalLight(color : Color, intensity : Number)

参数 类型 描述
color Color 光源的颜色。
intensity Number 光源的强度。
方法
  • castShadow = true: 启用阴影投射。
  • position.set(x : Number, y : Number, z : Number): 设置光源的位置。

SphereBufferGeometry

SphereBufferGeometry 是Three.js中的球体几何体类,用于创建球体。

构造器

new THREE.SphereBufferGeometry(radius : Number, widthSegments : Number, heightSegments : Number)

参数 类型 描述
radius Number 球体的半径。
widthSegments Number 经度方向上的分段数。
heightSegments Number 纬度方向上的分段数。

Mesh

Mesh 是Three.js中的网格类,用于组合几何体和材质。

构造器

new THREE.Mesh(geometry : Geometry, material : Material)

参数 类型 描述
geometry Geometry 几何体对象。
material Material 材质对象。
方法
  • position.set(x : Number, y : Number, z : Number): 设置网格的位置。
  • castShadow = true: 启用阴影投射。
  • receiveShadow = true: 启用阴影接收。

PlaneGeometry

PlaneGeometry 是Three.js中的平面几何体类,用于创建平面。

构造器

new THREE.PlaneGeometry(width : Number, height : Number, widthSegments : Number, heightSegments : Number)

参数 类型 描述
width Number 平面的宽度。
height Number 平面的高度。
widthSegments Number 宽度方向上的分段数。
heightSegments Number 高度方向上的分段数。
方法
  • rotateX(angle : Number): 绕X轴旋转。
  • rotateZ(angle : Number): 绕Z轴旋转。
  • position.set(x : Number, y : Number, z : Number): 设置平面的位置。
  • receiveShadow = true: 启用阴影接收。

代码

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 myDirectionalLight1 = new THREE.DirectionalLight('white', 1);
    myDirectionalLight1.castShadow = true;
    myDirectionalLight1.position.set(-4, 10, 8);
    myScene.add(myDirectionalLight1);

    // 创建第二束方向光
    var myDirectionalLight2 = new THREE.DirectionalLight('white', 0.5);
    myDirectionalLight2.castShadow = true;
    myDirectionalLight2.position.set(4, 12, 12);
    myScene.add(myDirectionalLight2);

    // 创建用于投射阴影的球体
    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, -4.5, 0);
    myPlaneMesh.receiveShadow = true;
    myScene.add(myPlaneMesh);

    // 渲染球体及阴影
    myRenderer.render(myScene, myCamera);
</script>
</body>
</html>

演示链接

示例链接

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