WEB 3D技术 three.js 阴影属性

上文 WEB 3D技术 three.js 光照与阴影 我们说了阴影
那么 我们继续将阴影的属性

目前 我们的代码

import './style.css'
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";//创建相机
const camera = new THREE.PerspectiveCamera(45, //视角 视角越大  能看到的范围就越大window.innerWidth / window.innerHeight,//相机的宽高比  一般和画布一样大最好0.1,1000
);
const scene = new THREE.Scene();// 环境光
const light = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(light);
//直线光源
const directionallight = new THREE.DirectionalLight(0xffffff, 0.5);
directionallight.position.set(10, 10, 10);
directionallight.castShadow = true;
scene.add(directionallight);
//创建球形几何体
const sphere1 = new THREE .Mesh(new THREE.SphereGeometry(0.7, 32, 32),new THREE.MeshStandardMaterial({})
)
sphere1.castShadow = true;
scene.add(sphere1);
//添加平面
const plane = new THREE.Mesh(new THREE.PlaneGeometry(3, 3),new THREE.MeshStandardMaterial({})
);
plane.position.set(0, -1, 0);
plane.rotation.x = -Math.PI / 2;
plane.receiveShadow = true;
scene.add(plane);//c创建一个canvas容器  并追加到 body上
const renderer = new THREE.WebGLRenderer(0);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
document.body.appendChild(renderer.domElement);//设置相机位置   这里 我们设置Z轴  大家可以试试  S Y 和 Z  都是可以的
camera.position.z = 5;
//设置相机默认看向哪里   三个 0  代表 默认看向原点
camera.lookAt(0, 0, 0);
//将内容渲染到元素上
renderer.render(scene, camera);
const controls = new OrbitControls(camera, renderer.domElement);function animate() {controls.update();requestAnimationFrame(animate);/*cube.rotation.x += 0.01;cube.rotation.y += 0.01;*/renderer.render(scene, camera);
}
animate();

目前阴影效果是这样的
在这里插入图片描述
我们可以设置它的一个模糊度

我们官网搜索 LightShadow
在这里插入图片描述
下面找到 radius 模糊度的一个属性
在这里插入图片描述
这里 我们可以

光照对象.shadow.radius = 20;

设置 20 的一个模糊度
在这里插入图片描述
运行代码 然后看我们的模糊度 明显就有一点模糊的效果了
在这里插入图片描述
然后 我们 官网 LightShadow 下还有一个可以控制阴影贴图的大小 这上面说的是宽度和高度
在这里插入图片描述
我们通过 directionallight 光对象 调用代码如下

directionallight.shadow.mapSize.set(20,20);

这里 我们设置 mapSize 宽 高 20
明显小的就已经看不到了
在这里插入图片描述
这个先注释掉了
在这里插入图片描述
然后就是 阴影相机属性
从图中看 我们光应该是从下图箭头指向处打下来的
在这里插入图片描述
我们这里 directionallight 光照属性下可以这样写

directionallight.shadow.camera.near = 0.5;
directionallight.shadow.camera.far = 500;
directionallight.shadow.camera.top  = 5;
directionallight.shadow.camera.bottom = -5;
directionallight.shadow.camera.left = -5;
directionallight.shadow.camera.right = 5;

near 远端相机效果 0 到 1
far 近端 数值类型
top 上
bottom 下
left 左
right 右

例如 我们这里 上下左右 全0
在这里插入图片描述
运行代码 如下 大家可以自己调看看效果
在这里插入图片描述
如果你现在逻辑事件中 修改 光对象.shadow.camera 内的属性
需要调用

光对象.shadow.camera.updateProjectionMatrix();

例如 directionallight.shadow.camera.updateProjectionMatrix(); 去举证一下 否则 UI是不会发生变化的

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/617693.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Git】的工作流程简介

目录 Git的工作区域Git的基本流程 1.将工作区的代码添加到暂存区2.将暂存区的文件提交到本地仓库3.将暂存区的文件提交到远程仓库 Git的工作区域 Git的基本流程 图形化方式操作 命令行模式(Linux系统常用)操作 1.将工作区的代码添加到暂存区 查看文件状…

蓝桥杯基础知识4 swap()、reverse()

蓝桥杯基础知识4 swap()、reverse() #include <bits/stdc.h> using namespace std;int main(){int a 10,b 20;cout << a << << b <<\n; //10 20swap(a,b);cout << a << << b <<\n; //20 10return 0; } C 在线工具 |…

CES 2024上的AI亮点

以下是CES 2024前两天AI方面亮点&#xff1a; 一个AI助手&#xff0c;取代你的智能手机应用程序的rabbit.tech人工智能驱动的捆绑式鞋子被称为“Moonwalkers”&#xff0c;可以让你走得更快 FitXR Slam的VR和健身创新WeHead的人工智能能给ChatGPT一张脸世界上第一个高清触觉游…

OpenCV-19图像的仿射变换

放射变换是图像旋转&#xff0c;缩放&#xff0c;平移的总称&#xff0c;具体的做法是通过一个矩阵和原图片坐标进行计算&#xff0c;得到新的坐标&#xff0c;完成变换&#xff0c;所以关键就是这个矩阵。 一、仿射变换之图像平移 使用API------warpAffine&#xff08;src &…

OpenAI推出GPT商店,以充分利用ChatGPT在消费者市场上的成功

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…

【数据库系统概论】期末复习4

系列文章 期末复习1 期末复习2 期末复习3 系列文章什么是数据库的安全性&#xff1f;什么是数据库的完整性&#xff1f;数据库的完整性概念与数据库的安全性概念有什么区别和联系&#xff1f;什么是数据库的完整性约束条件&#xff1f;DBMS 的完整性控制机制应具有哪三个方面的…

高压消防泵:科技与安全性的完美结合

在现代社会&#xff0c;随着科技的不断发展&#xff0c;各种高科技设备层出不穷&#xff0c;为我们的生活带来了极大的便利。在森林火灾扑救领域&#xff0c;恒峰智慧科技研发的高压消防泵作为一种高效、节能、绿色、环保的优质设备&#xff0c;将科技与安全性完美地结合在一起…

C语言ctype.h头文件字符测试函数

C/C语言ctype.h头文件字符测试函数 C有一系列专门处理字符的函数&#xff0c;在ctype.h中包含了这些函数的原型&#xff0c;当然在C中&#xff0c;这些函数被放在了cctype中。 作用 这些函数接收一个字符作为参数&#xff0c;如果该字符属于某个特殊的类别&#xff0c;就返回…

Jmeter接口自动化03-JMeter的常用核心组件

p03 高清B站视频链接 由于JMeter涉及的组件数目很多&#xff0c;据不完全统计至少有110个&#xff0c;而其实只需要掌握20%的组件就可以完成80%甚至更多的日常工作了&#xff0c;所以接下来我们重点剖析使用最频繁的核心组件&#xff0c;如下图所示。只需要优先掌握这10个左右…

css——文字实现渐变色的两种方案

&#xff08;一&#xff09;通过设置color、background-image及background-clip实现文字颜色渐变 <template><span class"title">文字实现渐变色的两种方案</span> </template><style> .title {color: transparent;background-image:…

DartSDK下载

下载DartSDK(具有开发Dart命令行、服务器和非FlutterWeb应用程序所需的库和命令行工具(底层支持作用系统库)) 1.Homebrew环境 //brew --version 2.brew tap dart-lang/dart 3.brew install dart 修改host 下载成功 描述信息查看 AndroidStudio 引入配置 备注&#xff1a; …

OpenHarmony——基于HDF驱动框架构建的Display驱动模型

概述 功能简介 LCD&#xff08;Liquid Crystal Display&#xff09;驱动编程&#xff0c;通过对显示器上电、初始化显示器驱动IC&#xff08;Integrated Circuit&#xff09;内部寄存器等操作&#xff0c;使其可以正常工作。 基于HDF&#xff08;Hardware Driver Foundation…

使用Pygame库创建了一个窗口,并在窗口中加载了一个名为“ball.png“的图片,通过不断改变物体的位置,实现了一个简单的动画效果

import pygame import sys# 初始化Pygame pygame.init()# 创建窗口 screen pygame.display.set_mode((640, 480))# 加载图片 image pygame.image.load("ball.png")# 将物体初始位置设为屏幕左上角 x 0 y 0# 游戏循环 while True:# 处理事件for event in pygame.e…

python 语法

闭包 在函数嵌套的前提下&#xff0c;内部函数使用了外部函数的变量&#xff0c;并且外部函数返回了内部函数&#xff0c;我们把这个使用外部函数变量的内部函数称为闭包。 def outfunc(arg):def innerFunc(msg):print(f"<{msg}> {arg} <{msg}>")retu…

vue3表格编辑(数据回显)和删除功能实现

在Vue 3中&#xff0c;可以通过使用v-for指令来遍历数组&#xff0c;并在表格中显示数据。要实现表格的编辑和删除功能&#xff0c;可以使用动态绑定的方式来实现。 以下是一个示例代码&#xff0c;实现了一个简单的表格编辑和删除功能&#xff1a; <template><div&…

Ubuntu纯净服务器系统使用Nginx+uwsgi部署django项目

当前文章依赖最新的ubuntu-22.04.3-live-server-amd64服务器系统,python3-10版本,django为5.0版! 该服务器系统我们可以通过虚拟机来在本地安装,也可以使用云服务器,操作方式方法大同小异! 安装python的venv sudo apt install python3.10-venv 创建并激活虚拟环境 p…

JavaScript保留字和预定义的全局变量及函数汇总

保留字也称关键字&#xff0c;每种语言中都有该语言本身规定的一些关键字&#xff0c;这些关键字都是该语言的语法实现基础&#xff0c;JavaScript中规定了一些标识符作为现行版本的关键字或者将来版本中可能会用到的关键字&#xff0c;所以当我们定义标识符时就不能使用这些关…

Java:双缓冲队列

《程序员》&#xff1a;双缓冲队列就是冲着同步/互斥的开销来的。我们知道&#xff0c;在多个线程并发访问同一个资源的时候&#xff0c;需要特别注意线程的同步问题。稍稍不注意&#xff0c;哦活&#xff0c;程序结果不正确了。最经典的就是“银行取钱”的例子&#xff0c;想想…

七麦数据js逆向(补环境版)

本文目标地址如下&#xff0c;使用base64解码获得 aHR0cHM6Ly93d3cucWltYWkuY24vcmFuay9tYXJrZXRSYW5rL21hcmtldC82L2NhdGVnb3J5LzUvY29sbGVjdGlvbi9hbGwvZGF0ZS8yMDI0LTAxLTEy 本文逆向破解分为扣代码版和补环境版&#xff0c;扣代码版请看专栏另一篇文章 废话不多说了&#…

Cesium笔记 viewer控件隐藏

Cesium初始化后&#xff0c;场景中会有时间轴&#xff0c;动画&#xff0c;home等控件显示&#xff0c;需要将这些控件隐藏&#xff0c;如下&#xff1a; init() {let viewer new Cesium.Viewer("cesiumContainer", {fullscreenButton: false, // 隐藏界面右下角全…