ThreeJs 学习之旅(九)—shadows(阴影)

已于 2022-05-04 09:21:03 修改
阅读量1k 收藏
点赞数 1
分类专栏： ThreeJs 文章标签： 学习 javascript 开发语言
于 2022-04-29 00:00:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33839972/article/details/124476970
版权

前情代码:

import "./style.css";
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import * as dat from "dat.gui";

/**
 * Base
 */
// Debug
const gui = new dat.GUI();

// Canvas
const canvas = document.querySelector("canvas.webgl");

// Scene
const scene = new THREE.Scene();

/**
 * Lights
 */
// Ambient light
const ambientLight=new THREE.AmbientLight()
scene.add(ambientLight)

/**
 * Materials
 */
const material = new THREE.MeshStandardMaterial();
material.roughness = 0.7;
gui.add(material, "metalness").min(0).max(1).step(0.001);
gui.add(material, "roughness").min(0).max(1).step(0.001);

/**
 * Objects
 */
const sphere = new THREE.Mesh(
  new THREE.SphereBufferGeometry(0.5, 32, 32),
  material
);
const plane = new THREE.Mesh(new THREE.PlaneBufferGeometry(5, 5), material);
plane.rotation.x = -Math.PI * 0.5;
plane.position.y = -0.5;
scene.add(sphere,plane)
/**
 * Sizes
 */
const sizes = {
  width: window.innerWidth,
  height: window.innerHeight,
};

window.addEventListener("resize", () => {
  // Update sizes
  sizes.width = window.innerWidth;
  sizes.height = window.innerHeight;

  // Update camera
  camera.aspect = sizes.width / sizes.height;
  camera.updateProjectionMatrix();

  // Update renderer
  renderer.setSize(sizes.width, sizes.height);
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
});

/**
 * Camera
 */
// Base camera
const camera = new THREE.PerspectiveCamera(
  75,
  sizes.width / sizes.height,
  0.1,
  100
);
camera.position.x = 1;
camera.position.y = 1;
camera.position.z = 2;
scene.add(camera);

// Controls
const controls = new OrbitControls(camera, canvas);
controls.enableDamping = true;

/**
 * Renderer
 */
const renderer = new THREE.WebGLRenderer({
  canvas: canvas,
});
renderer.setSize(sizes.width, sizes.height);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));

/**
 * Animate
 */
const clock = new THREE.Clock();

const tick = () => {
  const elapsedTime = clock.getElapsedTime();

  // Update controls
  controls.update();

  // Render
  renderer.render(scene, camera);

  // Call tick again on the next frame
  window.requestAnimationFrame(tick);
};

tick();

效果:

.castShadow : Boolean

对象是否被渲染到阴影贴图中。默认值为false。

receiveShadow : Boolean

材质是否接收阴影。默认值为false。

const spotLight=new THREE.SpotLight(0xffffff,0.5)
spotLight.position.set(1,2,1)
spotLight.castShadow=true
scene.add(spotLight)

sphere.castShadow=true;    
plane.receiveShadow=true;  
  

renderer.shadowMap.enabled=true    //渲染器启用阴影

 优化阴影效果

.mapSize : Vector2

一个Vector2定义阴影贴图的宽度和高度

spotLight.shadow.mapSize.width=1024
spotLight.shadow.mapSize.height=1024

CameraHelper

用于模拟相机视锥体的辅助对象.
它使用 LineSegments 来模拟相机视锥体.

构造函数
CameraHelper( camera : Camera )
camera -- 被模拟的相机.

为指定相机创建一个新的相机辅助对象 CameraHelper .

构造函数
CameraHelper( camera : Camera )
camera -- 被模拟的相机.

为指定相机创建一个新的相机辅助对象 CameraHelper .

 开启 CameraHelper

const spotLightHelper=new THREE.CameraHelper(spotLight.shadow.camera);
spotLightHelper.visible=true;
scene.add(spotLightHelper)

 加一个点光源


const pointLight=new THREE.PointLight(0xff0000)
pointLight.position.set( -1, 1, 1 );
pointLight.shadow.mapSize.width=1024
pointLight.shadow.mapSize.height=1024
pointLight.shadow.camera.far=10;
pointLight.castShadow=true
scene.add( pointLight );
const pointLightHelper=new THREE.CameraHelper(pointLight.shadow.camera);
pointLightHelper.visible=true;
scene.add(pointLightHelper)

 

 给阴影上材质


const plane = new THREE.Mesh(
  new THREE.PlaneBufferGeometry(5, 5),
  new THREE.MeshBasicMaterial({
    map:bakedShadow
  })
);

 通过创建平面的方式创建阴影

const sphereShadow=new THREE.Mesh(new THREE.PlaneBufferGeometry(1,1),
  new THREE.MeshBasicMaterial({
    transparent:true,
    color:0x000000,
    alphaMap:simpleShadow
  }) 
)
sphereShadow.rotation.x=-Math.PI*0.5
sphereShadow.position.y=plane.position.y+0.01
scene.add(sphereShadow)

最后让他动起来 

const tick = () => {
  const elapsedTime = clock.getElapsedTime();
 // // Update the sphere
  sphere.position.x = Math.cos(elapsedTime) * 1.5;
  sphere.position.z = Math.sin(elapsedTime) * 1.5;
  sphere.position.y = Math.abs(Math.sin(elapsedTime * 3));

  // Update the shadow
  sphereShadow.position.x = sphere.position.x;
  sphereShadow.position.z = sphere.position.z;
  sphereShadow.material.opacity = (1 - sphere.position.y) * 0.3;
  // Update controls
  controls.update();

  // Render
  renderer.render(scene, camera);

  // Call tick again on the next frame
  window.requestAnimationFrame(tick);
};

tick();

本期素材

本期全部代码

import "./style.css";
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import * as dat from "dat.gui";

/**
 * Base
 */
// Debug
const gui = new dat.GUI();

// Canvas
const canvas = document.querySelector("canvas.webgl");

// Scene
const scene = new THREE.Scene();

const texture=new THREE.TextureLoader();
const bakedShadow=texture.load('/textures/bakedShadow.jpg')
const simpleShadow=texture.load('/textures/simpleShadow.jpg')
/**
 * Lights
 */
// Ambient light
const ambientLight=new THREE.AmbientLight(0xffffff,0.3)
scene.add(ambientLight)

const spotLight=new THREE.SpotLight(0xffffff,0.5)
spotLight.position.set(1,2,1)
spotLight.shadow.mapSize.width=1024
spotLight.shadow.mapSize.height=1024
spotLight.shadow.camera.far=10;
spotLight.shadow.camera.top=1;
// spotLight.castShadow=true
scene.add(spotLight)
const spotLightHelper=new THREE.CameraHelper(spotLight.shadow.camera);
spotLightHelper.visible=true;
scene.add(spotLightHelper)

const pointLight=new THREE.PointLight(0xffffff,0.3)
pointLight.position.set( -1, 1, 1 );
pointLight.shadow.mapSize.width=1024
pointLight.shadow.mapSize.height=1024
pointLight.shadow.camera.far=10;
pointLight.shadow.camera.top=1;
// pointLight.castShadow=true
scene.add( pointLight );
const pointLightHelper=new THREE.CameraHelper(pointLight.shadow.camera);
pointLightHelper.visible=true;
scene.add(pointLightHelper)

/**
 * Materials
 */
const material = new THREE.MeshStandardMaterial();
material.roughness = 0.7;
gui.add(material, "metalness").min(0).max(1).step(0.001);
gui.add(material, "roughness").min(0).max(1).step(0.001);

/**
 * Objects
 */
const sphere = new THREE.Mesh(
  new THREE.SphereBufferGeometry(0.5, 32, 32),
  material
);
sphere.castShadow=true;

const plane = new THREE.Mesh(new THREE.PlaneBufferGeometry(5, 5), material);
plane.rotation.x = -Math.PI * 0.5;
plane.position.y = -0.5;
plane.receiveShadow=true;
scene.add(sphere,plane)
const sphereShadow=new THREE.Mesh(new THREE.PlaneBufferGeometry(1,1),
  new THREE.MeshBasicMaterial({
    transparent:true,
    color:0x000000,
    alphaMap:simpleShadow
  }) 
)
sphereShadow.rotation.x=-Math.PI*0.5
sphereShadow.position.y=plane.position.y+0.01
scene.add(sphereShadow)
/**
 * Sizes
 */
const sizes = {
  width: window.innerWidth,
  height: window.innerHeight,
};

window.addEventListener("resize", () => {
  // Update sizes
  sizes.width = window.innerWidth;
  sizes.height = window.innerHeight;

  // Update camera
  camera.aspect = sizes.width / sizes.height;
  camera.updateProjectionMatrix();

  

  // Update renderer
  renderer.setSize(sizes.width, sizes.height);
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
});

/**
 * Camera
 */
// Base camera
const camera = new THREE.PerspectiveCamera(
  75,
  sizes.width / sizes.height,
  0.1,
  100
);
camera.position.x = 1;
camera.position.y = 1;
camera.position.z = 2;
scene.add(camera);

// Controls
const controls = new OrbitControls(camera, canvas);
controls.enableDamping = true;

/**
 * Renderer
 */
const renderer = new THREE.WebGLRenderer({
  canvas: canvas,
});
renderer.setSize(sizes.width, sizes.height);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
renderer.shadowMap.enabled=true

/**
 * Animate
 */
const clock = new THREE.Clock();

const tick = () => {
  const elapsedTime = clock.getElapsedTime();
 // // Update the sphere
  sphere.position.x = Math.cos(elapsedTime) * 1.5;
  sphere.position.z = Math.sin(elapsedTime) * 1.5;
  sphere.position.y = Math.abs(Math.sin(elapsedTime * 3));

  // Update the shadow
  sphereShadow.position.x = sphere.position.x;
  sphereShadow.position.z = sphere.position.z;
  sphereShadow.material.opacity = (1 - sphere.position.y) * 0.3;
  // Update controls
  controls.update();

  // Render
  renderer.render(scene, camera);

  // Call tick again on the next frame
  window.requestAnimationFrame(tick);
};

tick();

Florenza
关注
专栏目录
threejs的阴影
weixin_40583266的博客
01-18 1575
three.js中的阴影根据光照的分类分成三种，平行光源的（DirectionLight)如图1，，点光源的(PoinLight)如图2，聚光灯光源的(SpotLight)如图3。环境光只是一种背景光没有产生阴影就略去了。下面的三个图是三种光源把球的阴影投影到平面上，为了让大家看清楚，加了一个辅助线，看清楚每种光源投影的方式，实际做项目的时候这个辅助线可以作为测试用的。 ...
Three.js阴影
lcl130的专栏
08-08 2621
使用灯光后，场景中就会产生阴影。物体的背面确实在黑暗中，这称为核心阴影。我们缺少的是落下的阴影，即对象在其他对象上创建阴影。本文主要探索是落下的阴影的相关内容。
THREEJS阴影与后期处理
最新发布
weixin_42959900的博客
08-28 382
后期处理是指在基本的 3D 渲染完成后，对图像进行进一步处理以添加特殊效果的过程。常见的后期处理效果包括景深（Depth of Field）、泛光（Bloom）、色彩校正（Color Correction）、抗锯齿（Anti-Aliasing）等。
Three.js 这样写就有阴影效果啦
weixin_39415598的博客
09-03 1841
theme: smartblue 我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第1篇文章，点击查看活动详情 本文简介 点赞 + 关注 + 收藏 = 学会了 渲染阴影效果需要消耗一定的资源，所以 Three.js 默认是关闭阴影效果的。 想要在 Three.js 中实现阴影效果，只需记住接下来要讲的几个点即可。 本文要实现的效果 本文适合 Three.js 入门级...
【Three.js】第十六章 Shadows 阴影
m0_68324632的博客
06-14 1094
上节课我们学会了灯光，现在我们需要阴影。物体的背面应该在黑暗中，这就是阴影所谓的核心。我们缺少的是物体对象的投影，也就是根据被投影的对象在其他对象身上创建阴影。阴影渲染一直是实时 3D 渲染的一大挑战，开发人员必须找到技巧以合理的帧速率显示逼真的阴影。实现它们的方法有很多种，Three.js 有一个内置的解决方案。请注意，此解决方案很方便，但并非完美。
Three.js - 阴影（十三）
小小的前端
04-26 2299
阴影 three.js中使用的是阴影贴图，阴影贴图的工作方式就是具有投射阴影的光能对所有能被投射阴影的物体从光源渲染阴影。 注意事项： 每多一个能投射阴影光源，就会重复绘制一次场景。阴影的计算是一个光源一个光源的依次计算的。 要展示阴影需要，渲染器开启阴影渲染、灯光投开启投射阴影、物体开启接收阴影 只有DirectionalLight、PointLight、RectAreaLight、SpotLight这4种光源才能投谁阴影。 MeshLambertMaterial材质是不能接受投射阴影的。 展示阴
ThreeJS中文API文档
02-09
14. **阴影(Shadows)**：THREE.JS支持软阴影和硬阴影，增加了3D场景的真实感。 15. **粒子系统(Particle Systems)**：如Points和ParticleSystem，用于创建星尘、烟雾等效果。 这个中文API文档将详细解释每个类、...
three.js学习教程
11-21
**Three.js 学习教程** Three.js 是一个基于 WebGL 的 JavaScript 3D 库，它使得在网页上创建和展示三维图形变得简单易行。WebGL 是一种在浏览器中渲染交互式三维图形的标准...祝你在 three.js 的学习之旅中取得成功！
[Three.js] Three.js 学习教程 (英文版)
03-08
[Packt Publishing] Three.js 学习教程 (英文版) [Packt Publishing] Learning Three.js The JavaScript 3D Library for WebGL (E-Book) ☆ 图书概要：☆ Create and animate stunning 3D graphics using the ...
three.js-master.zip
04-01
Three.js正是构建在WebGL之上，通过抽象出复杂的图形接口，使得开发者无需深入理解底层图形学原理就能创建出丰富多彩的3D场景。 2. **Three.js架构**： Three.js由多个模块组成，包括场景(Scene)、相机(Camera)、...
THREE.js中文教程PDF版附带源码
03-31
10. **高级话题**：包括阴影(Shadows)、粒子系统(Particle Systems)、物理引擎(Physics Engines)、网络加载模型(Loading Models from Network)、后期处理(Post-Processing)等，这些都是THREE.js进阶主题，能帮助你...
【Three.js基础学习】11. Shadow
weixin_41722662的博客
04-22 1026
three.js基础学习
【Threejs基础教程-光影篇】5.2 Threejs 阴影系统
qq_42760477的博客
03-31 1449
Threejs基础教程最后一篇，阴影系统篇
ThreeJS阴影
目尽地平线
08-11 3972
在threejs中，阴影可以定义为“在渲染器支持的情况下，有一个可以产生阴影的光，照射在若干个可以产生阴影的物体上，并在某个可以接受阴影的物体上产生阴影”。所以，要产生阴影，渲染器、光、物体，接受光线的物体，四者缺一不可。 渲染器需要设置阴影渲染 renderer.shadowMapEnabled = true; 光线要设为能产生阴影 //表示这个光是可以产生阴影的 spotLig...
Three.js基础之阴影
weixin_55696461的博客
10-29 949
在 Three.js 中， 所有阴影的基类都是 Three.LightShadow，请注意：不能直接去实例化 LightShadow， 平时真正去创建的阴影， 都是该类的子类 阴影类型，目前一共三种 阴影类型 阴影名称 解释说明 PointLightShadow 点光源阴影 对应 P...
threeJs物体阴影问题
weixin_50760181的博客
06-23 315
threejs
Three.js 平行光源阴影
u014291990的博客
12-08 1462
点光源PointLight、聚光源SpotLight、平行光等都可以产生阴影，就像实际生活中的影子。环境光这种没有方向的光源，不会产生阴影。本节课给大家讲解平行光的阴影效果如何实现。
threejs 阴影例子
06-21
其中一个常见的例子就是阴影技术，比如投射阴影（Projected Shadows）和逐像素阴影（Pixelated Shadows）。 一个简单的 Three.js 投射阴影的例子通常会涉及以下步骤： 1. 创建光源（Light）：使用 `THREE.Point...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值