《Three.JS零基础入门教程》第九篇：环境详解

 往期回顾：

《Three.JS零基础入门教程》第一篇：搭建开发环境

《Three.JS零基础入门教程》第二篇：起步案例

《Three.JS零基础入门教程》第三篇：开发辅助

《Three.JS零基础入门教程》第四篇：基础变换

《Three.JS零基础入门教程》第五篇：项目规划

《Three.JS零基础入门教程》第六篇：物体详解

《Three.JS零基础入门教程》第七篇：材质详解

《Three.JS零基础入门教程》第八篇：纹理详解

上一期我们介绍了threejs中的物体的材质、纹理，本期主要介绍环境。

1 简介

通过前面的学习, 我们了解到场景就是对一个3D世界的模拟

在threejs中, Scene是一个对象. 主要属性

  • background: 背景(颜色, 纹理)

  • environment: 环境

  • fog: 雾化

图片

2 背景颜色

通过scene的background属性, 可以设置一个纯色作为背景

import * as THREE from 'three'
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'

// 导入封装的MeshGui
import { MeshGui } from '../gui'

// 一. 创建场景
const scene = new THREE.Scene()
scene.background = new THREE.Color(0x0000ff)

// 二. 创建相机
const camera = new THREE.PerspectiveCamera(
  45,
  window.innerWidth / window.innerHeight
)
camera.position.set(0, 0, 5)

// 三. 创建物体
const sphereGeometry = new THREE.SphereGeometry(1, 32, 32)
const sphereMaterial = new THREE.MeshNormalMaterial()
const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial)
scene.add(sphere)

new MeshGui({
  target: sphere,
})

// 四. 创建渲染器
const renderer = new THREE.WebGLRenderer({ antialias: true })
renderer.setPixelRatio(window.devicePixelRatio)
renderer.setSize(window.innerWidth, window.innerHeight)
renderer.setAnimationLoop(animation)
// 将渲染的canvas添加到body元素中
document.body.appendChild(renderer.domElement)

// 五. 辅助工具
const control = new OrbitControls(camera, renderer.domElement)

const axesHelper = new THREE.AxesHelper(10)
scene.add(axesHelper)

const gridHelper = new THREE.GridHelper(20, 20, 0xffffff, 0xffffff)
gridHelper.material.transparent = true
gridHelper.material.opacity = 0.5
scene.add(gridHelper)

function animation() {
  renderer.render(scene, camera)
}

window.addEventListener('resize', () => {
  camera.aspect = window.innerWidth / window.innerHeight
  camera.updateProjectionMatrix()

  renderer.setSize(window.innerWidth, window.innerHeight)
})

3 背景图片

1) 单一图片

background属性也可以接收一个texture纹理对象作为参数

import * as THREE from 'three'
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'

// 导入封装的MeshGui
import { MeshGui } from '../gui'

// 一. 创建场景
const scene = new THREE.Scene()
// 创建一个纹理加载器, 加载纹理图片
const texture = new THREE.TextureLoader().load('/src/assets/texture/bg.jpeg')
scene.background = texture

// 二. 创建相机
const camera = new THREE.PerspectiveCamera(
  45,
  window.innerWidth / window.innerHeight
)
camera.position.set(0, 0, 5)

// 三. 创建物体
const sphereGeometry = new THREE.SphereGeometry(1, 32, 32)
const sphereMaterial = new THREE.MeshNormalMaterial()
const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial)
scene.add(sphere)

new MeshGui({
  target: sphere,
})

// 四. 创建渲染器
const renderer = new THREE.WebGLRenderer({ antialias: true })
renderer.setPixelRatio(window.devicePixelRatio)
renderer.setSize(window.innerWidth, window.innerHeight)
renderer.setAnimationLoop(animation)
// 将渲染的canvas添加到body元素中
document.body.appendChild(renderer.domElement)

// 五. 辅助工具
const control = new OrbitControls(camera, renderer.domElement)

const axesHelper = new THREE.AxesHelper(10)
scene.add(axesHelper)

const gridHelper = new THREE.GridHelper(20, 20, 0xffffff, 0xffffff)
gridHelper.material.transparent = true
gridHelper.material.opacity = 0.5
scene.add(gridHelper)

function animation() {
  renderer.render(scene, camera)
}

window.addEventListener('resize', () => {
  camera.aspect = window.innerWidth / window.innerHeight
  camera.updateProjectionMatrix()

  renderer.setSize(window.innerWidth, window.innerHeight)
})

提示: 如果图片不显示

  1. 检查路径是否正解

  2. 是否开启了动画循环

2) 全景图

为了模拟更加逼真的3D场景, 我们可以使用全景图, 就是由6张图拼接

  • px: x轴正方向

  • nx: x轴负方向

  • py: y轴正方向

  • ny: y轴负方向

  • pz: z轴正方向

  • nz: z轴负方向

基础原理

在上面我们模拟过全景图, 就是设置一个足够大的立方体, 给每个面都贴上图, 这里我们给场景设置

示例：

import * as THREE from 'three'
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'

// 一. 创建场景
const scene = new THREE.Scene()
// 创建一个纹理加载器, 加载纹理图片

const texture = new THREE.CubeTextureLoader()
  .setPath('/src/assets/texture/park/')
  .load([
    'posx.jpg',
    'negx.jpg',
    'posy.jpg',
    'negy.jpg',
    'posz.jpg',
    'negz.jpg',
  ])

scene.background = texture

// 二. 创建相机
const camera = new THREE.PerspectiveCamera(
  45,
  window.innerWidth / window.innerHeight
)
camera.position.set(0, 0, 5)

// 四. 创建渲染器
const renderer = new THREE.WebGLRenderer({ antialias: true })
renderer.setPixelRatio(window.devicePixelRatio)
renderer.setSize(window.innerWidth, window.innerHeight)
renderer.setAnimationLoop(animation)
// 将渲染的canvas添加到body元素中
document.body.appendChild(renderer.domElement)

// 五. 辅助工具
const control = new OrbitControls(camera, renderer.domElement)

function animation() {
  renderer.render(scene, camera)
}

window.addEventListener('resize', () => {
  camera.aspect = window.innerWidth / window.innerHeight
  camera.updateProjectionMatrix()

  renderer.setSize(window.innerWidth, window.innerHeight)
})

3) HDR图

什么是HDR图

HDR 是高动态范围 (High Dynamic Range) 的缩写。它是一种通过在数字图像中捕捉比传统图像技术更广泛的亮度范围来提高图像质量的技术。HDR 图像可以展现更多的颜色和阴影细节，使图像看起来更接近真实世界的视觉效果。

一句话解释

HDR图有更好的显示效果, 高清无码

示例

import * as THREE from 'three'
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
import { RGBELoader } from 'three/addons/loaders/RGBELoader.js'

// 一. 创建场景
const scene = new THREE.Scene()
// 创建一个纹理加载器, 加载纹理图片
const texture = new RGBELoader().load('/src/assets/hdr/city.hdr', () => {
  texture.mapping = THREE.EquirectangularReflectionMapping
  scene.background = texture
})

// 二. 创建相机
const camera = new THREE.PerspectiveCamera(
  45,
  window.innerWidth / window.innerHeight
)
camera.position.set(0, 0, 5)

// 四. 创建渲染器
const renderer = new THREE.WebGLRenderer({ antialias: true })
renderer.setPixelRatio(window.devicePixelRatio)
renderer.setSize(window.innerWidth, window.innerHeight)
renderer.setAnimationLoop(animation)
// 将渲染的canvas添加到body元素中
document.body.appendChild(renderer.domElement)

// 五. 辅助工具
const control = new OrbitControls(camera, renderer.domElement)

function animation() {
  renderer.render(scene, camera)
}

window.addEventListener('resize', () => {
  camera.aspect = window.innerWidth / window.innerHeight
  camera.updateProjectionMatrix()

  renderer.setSize(window.innerWidth, window.innerHeight)
})

效果

4 环境属性

统一设置场景中所有物理材质的环境贴图

如果给每一个物体都单独设置环境纹理贴图比较麻烦. 可以在场景中统一设置

设置后, 场景中所有物理材质都会使用该环境纹理贴图

背景与环境的区别

  • 场景的背景设置的是整个3D世界的背景, 作用于场景

  • 场景的环境设置的是3D世界中所有PBR材质的默认环境纹理贴图, 作用于物体

完整示例

import * as THREE from 'three'
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'

// 一. 创建场景
const scene = new THREE.Scene()
// 创建一个纹理加载器, 加载纹理图片

const texture = new THREE.CubeTextureLoader()
  .setPath('/src/assets/texture/Park3Med/')
  .load(['px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg'])

scene.background = texture
scene.environment = texture

// 二. 创建相机
const camera = new THREE.PerspectiveCamera(
  45,
  window.innerWidth / window.innerHeight
)
camera.position.set(0, 0, 100)

const cubeGeometry = new THREE.BoxGeometry(10, 10, 10)
const cubeMaterial = new THREE.MeshStandardMaterial({
  roughness: 0,
  metalness: 1,
})

const cube = new THREE.Mesh(cubeGeometry, cubeMaterial)

const sphereGeometry = new THREE.SphereGeometry(10, 32, 32)
const sphereMaterial = new THREE.MeshStandardMaterial({
  roughness: 0,
  metalness: 1,
})
const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial)
sphere.position.set(20, 0, 0)

scene.add(cube)
scene.add(sphere)

// 四. 创建渲染器
const renderer = new THREE.WebGLRenderer({ antialias: true })
renderer.setPixelRatio(window.devicePixelRatio)
renderer.setSize(window.innerWidth, window.innerHeight)
renderer.setAnimationLoop(animation)
// 将渲染的canvas添加到body元素中
document.body.appendChild(renderer.domElement)

// 五. 辅助工具
const control = new OrbitControls(camera, renderer.domElement)

function animation() {
  renderer.render(scene, camera)
}

window.addEventListener('resize', () => {
  camera.aspect = window.innerWidth / window.innerHeight
  camera.updateProjectionMatrix()

  renderer.setSize(window.innerWidth, window.innerHeight)
})

效果

图片

5 雾化

雾化效果

场景中的物体距离相机的距离不同, 显示的颜色不同

  • 越近越清晰(接近物体本身的颜色)

  • 越远越模糊(接近雾的颜色)

scene.fog = new THREE.Fog(0x0000ff, 50, 100)

  • 第一个参数: 雾的颜色

  • 第二个参数: 雾化生效的近面距离. 小于该值显示物体本身的颜色

  • 第三个参数: 雾化生效的远面距离. 大于该值显示雾的颜色

完整示例

import * as THREE from 'three'
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'

import * as dat from 'dat.gui'

// 一. 创建场景
const scene = new THREE.Scene()
scene.fog = new THREE.Fog(0x0000ff, 1, 100)

// 二. 创建相机
const camera = new THREE.PerspectiveCamera(
  45,
  window.innerWidth / window.innerHeight
)
camera.position.set(0, 0, 50)

// 三. 创建物体

const gui = new dat.GUI()
const data = {
  addCube: function () {
    const size = Math.random() * 3
    const cubeGeometry = new THREE.BoxGeometry(size, size, size)
    const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 })
    const cube = new THREE.Mesh(cubeGeometry, cubeMaterial)

    cube.position.x = Math.random() * 20 - 10
    cube.position.y = Math.random() * 20 - 10
    cube.position.z = Math.random() * 20 - 10
    // console.log(cube)
    scene.add(cube)
  },
}
gui.add(data, 'addCube')

// 四. 创建渲染器
const renderer = new THREE.WebGLRenderer({ antialias: true })
renderer.setPixelRatio(window.devicePixelRatio)
renderer.setSize(window.innerWidth, window.innerHeight)
renderer.setAnimationLoop(animation)
// 将渲染的canvas添加到body元素中
document.body.appendChild(renderer.domElement)

// 五. 辅助工具
const control = new OrbitControls(camera, renderer.domElement)

const axesHelper = new THREE.AxesHelper(10)
scene.add(axesHelper)

const gridHelper = new THREE.GridHelper(20, 20, 0xffffff, 0xffffff)
gridHelper.material.transparent = true
gridHelper.material.opacity = 0.5
scene.add(gridHelper)

function animation() {
  renderer.render(scene, camera)
}

window.addEventListener('resize', () => {
  camera.aspect = window.innerWidth / window.innerHeight
  camera.updateProjectionMatrix()

  renderer.setSize(window.innerWidth, window.innerHeight)
})

请持续关注我，以免错过推送，免费学习threejs。

需要视频教程的宝子加：whx☺zdjy

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

element-ui侧边栏:default-openeds

element-ui侧边栏:default-openeds

element-ui侧边栏实现路由跳转后展开对应侧边栏：default-openeds 当菜单是在本地写死时，如果想展开第一块内容、里面就只写1 :default-openeds"[‘1’]" 当菜单是动态获取时，点击跳转之后如何展开对应的菜单，在watch中监…
阅读更多...
三元前驱体废水回收镍钴工艺：环保与经济效益的双重胜利

三元前驱体废水回收镍钴工艺：环保与经济效益的双重胜利

在全球新能源产业迅猛发展的背景下，锂离子电池作为绿色能源的核心组件，其需求量激增，带动了上游材料市场，尤其是三元前驱体材料的蓬勃发展。然而，伴随着行业的快速扩张，三元前驱体生产过程中产生的含镍钴废…
阅读更多...
嘉绩咨询低成本连锁品牌招商全案陪跑赋能中小品牌有效招商

嘉绩咨询低成本连锁品牌招商全案陪跑赋能中小品牌有效招商

以企业战略导航为基石，致力于构建全面招商生态系统的嘉绩咨询，今天宣布推出面向中小品牌的低成本连锁招商全案陪跑服务。这项创新服务是为了帮助具有潜力的中小品牌在市场中迅速构建渠道，通过有效招商策略促进成长。 嘉绩咨询凭借先进的“教育…
阅读更多...
PCI认证HSM的特点

PCI认证HSM的特点

PCI认证HSM(硬件安全模块)在支付卡行业中扮演着至关重要的角色，它是确保支付交易数据完整性和机密性的关键组件。以下是关于PCI认证HSM的详细介绍： 一、PCI认证HSM的定义 PCI认证HSM是专门用于支付行业的硬件安全模块，它满足支付卡行业(PCI)的…
阅读更多...
【unity实战】Unity中基于瓦片的网格库存系统——类似《逃离塔科夫》的库存系统

【unity实战】Unity中基于瓦片的网格库存系统——类似《逃离塔科夫》的库存系统

最终效果 文章目录 最终效果前言素材下载图片配置获取格子坐标动态控制背包大小添加物品移动物品物品跟随鼠标创建物品的容器，定义不同物品修改物品尺寸修复物品放置位置问题按物品尺寸占用对应大小的格子判断物品是否超出边界范围物品放置重叠，交换物品…
阅读更多...
Oracle优化案例-教你在线搞定top cpu的sql（十二）

Oracle优化案例-教你在线搞定top cpu的sql（十二）

监控告警阈值load 大于10 SQL如下，太好用了 SELECT A.SQL_ID, A.SESS_COUNT, A.CPU_LOAD, B.SQL_TEXTFROM (SELECT SQL_ID,COUNT(*) SESS_COUNT,ROUND(COUNT(*) / SUM(COUNT(*)) OVER(), 2) CPU_LOADFROM V$ACTIVE_SESSION_HISTORYWHERE SAMPLE_TIME > SYSDATE…
阅读更多...
[深度学习] 门控循环单元GRU

[深度学习] 门控循环单元GRU

门控循环单元（Gated Recurrent Unit, GRU）是一种用于处理序列数据的递归神经网络（Recurrent Neural Network, RNN）变体，它通过引入门控机制来解决传统RNN在处理长序列时的梯度消失问题。GRU与长短期记忆网络&#xff0…
阅读更多...
反射及动态代理

反射及动态代理

反射 定义： 反射允许对封装类的字段，方法和构造 函数的信息进行编程访问 图来自黑马程序员 获取class对象的三种方式： 1）Class.forName("全类名") 2）类名.class 3) 对象.getClass() 图来自黑马程序员 pac…
阅读更多...
前端JS必用工具【js-tool-big-box】学习，数值型数组的正向排序和倒向排序

前端JS必用工具【js-tool-big-box】学习，数值型数组的正向排序和倒向排序

这一小节，我们说一下前端 js-tool-big-box 这个工具库，添加的数值型数组的正向排序和倒向排序。 以前呢，我们的数组需要排序的时候，都是在项目的utils目录里，写一段公共方法，弄个冒泡排序啦，弄…
阅读更多...
JNI详解

JNI详解

JNI简介 Java是跨平台的语言，但在有的时候仍需要调用本地代码（这些代码通常由C/C编写的）。 Sun公司提供的JNI是Java平台的一个功能强大的接口，JNI接口提供了Java与操作系统本地代码互相调用的功能。 Java调C 1）使用…
阅读更多...
Spring Boot 学习第八天：AOP代理机制对性能的影响

Spring Boot 学习第八天：AOP代理机制对性能的影响

1 概述 在讨论动态代理机制时，一个不可避免的话题是性能。无论采用JDK动态代理还是CGLIB动态代理，本质上都是在原有目标对象上进行了封装和转换，这个过程需要消耗资源和性能。而JDK和CGLIB动态代理的内部实现过程本身也存在很大差异。下面将讨…
阅读更多...
VMware vSphere 8.0 Update 3 发布下载 - 企业级工作负载平台

VMware vSphere 8.0 Update 3 发布下载 - 企业级工作负载平台

VMware vSphere 8.0 Update 3 发布下载 - 企业级工作负载平台 vSphere 8.0U3 | ESXi 8.0U3 & vCenter Server 8.0U3 请访问原文链接：https://sysin.org/blog/vmware-vsphere-8-u3/，查看最新版。原创作品，转载请保留出处。 作者主页&am…
阅读更多...
Java面试八股之JVM内存溢出的原因及解决方案

Java面试八股之JVM内存溢出的原因及解决方案

JVM内存溢出的原因及解决方案 JVM内存溢出（Out Of Memory，OOM）通常是由于程序运行过程中内存使用不当造成的，常见原因及相应的解决方案如下： 原因及解决方案 内存中加载的数据量过大 原因：一次性从数据…
阅读更多...
运维入门技术——监控的三个维度（非常详细）零基础收藏这一篇就够了_监控维度怎么区分

运维入门技术——监控的三个维度（非常详细）零基础收藏这一篇就够了_监控维度怎么区分

一个好的监控系统最后要做到的形态:实现Metrics、Tracing、Logging的融合。监控的三个维度也就是Metrics、Tracing、Logging。 Metrics Metrics也就是我们常说的指标。 首先它的典型特征就是可聚合(aggregatable).什么是可聚合的呢,简单讲可聚合就是一种基本单位可以在一种维…
阅读更多...
Verilog刷题笔记48——FSM1型异步复位

Verilog刷题笔记48——FSM1型异步复位

题目: 解题： module top_module(input clk,input areset, // Asynchronous reset to state Binput in,output out);// parameter A0, B1; reg state, next_state;always (*) begin // This is a combinational always block// State transition logiccase(…
阅读更多...
加拿大魁北克IT人士的就业分析

加拿大魁北克IT人士的就业分析

魁北克省作为加拿大东部的一个重要省份，近年来在IT行业的就业市场上展现出了强劲的增长势头。随着数字化转型的加速，魁北克对IT专业人士的需求日益增加，特别是在软件开发、网络安全、数据分析和人工智能等领域。 热门职位方面，软…
阅读更多...
禹晶、肖创柏、廖庆敏《数字图像处理（面向新工科的电工电子信息基础课程系列教材）》Chapter 9插图

禹晶、肖创柏、廖庆敏《数字图像处理（面向新工科的电工电子信息基础课程系列教材）》Chapter 9插图

禹晶、肖创柏、廖庆敏《数字图像处理（面向新工科的电工电子信息基础课程系列教材）》 Chapter 9插图
阅读更多...
201.回溯算法：全排列（力扣）

201.回溯算法：全排列（力扣）

class Solution { public:vector<int> res; // 用于存储当前排列组合vector<vector<int>> result; // 用于存储所有的排列组合void backtracing(vector<int>& nums, vector<bool>& used) {// 如果当前排列组合的长度等于 nums 的长度&am…
阅读更多...
用 Rust 实现一个替代 WebSocket 的协议

用 Rust 实现一个替代 WebSocket 的协议

很久之前我就对websocket颇有微词&#xff0c;它的确满足了很多情境下的需求&#xff0c;但是仍然有不少问题。对我来说&#xff0c;最大的一个问题是websocket的数据是明文传输的&#xff0c;这使得websocket的数据很容易遭到劫持和攻击。同时&#xff0c;WebSocket继承自HTTP…
阅读更多...
【操作系统】操作系统发展简史

【操作系统】操作系统发展简史

目录 1.前言 2.第一代&#xff08;1945~1955&#xff09;&#xff1a;真空管和穿孔卡片 3.第二代&#xff08;1955~1965&#xff09;&#xff1a;晶体管和批处理系统 4.第三代&#xff08;1965~1980&#xff09;&#xff1a;集成电路和多道程序设计 5.第四代&#xff08;1…
阅读更多...
最新文章

Copyright @ 2022~2023