4.three.js详解PBR物理渲染

2023-11-06

1 标准网格材质

import * as THREE from "three";
// 导入轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
// 导入动画库
import gsap from "gsap";
// 导入dat.gui
import * as dat from "dat.gui";

// 目标：标准网格材质(MeshStandardMaterial)

// 1、创建场景
const scene = new THREE.Scene();

// 2、创建相机
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);

// 设置相机位置
camera.position.set(0, 0, 10);
scene.add(camera);

// 导入纹理
const textureLoader = new THREE.TextureLoader();
const doorColorTexture = textureLoader.load("./textures/door/color.jpg");
const doorAplhaTexture = textureLoader.load("./textures/door/alpha.jpg");
const doorAoTexture = textureLoader.load(
  "./textures/door/ambientOcclusion.jpg"
);
//导入置换贴图
const doorHeightTexture = textureLoader.load("./textures/door/height.jpg");

// 添加物体
const cubeGeometry = new THREE.BoxBufferGeometry(1, 1, 1, 100, 100, 100);
// 材质
const material = new THREE.MeshStandardMaterial({
  color: "#ffff00",
  map: doorColorTexture,
  alphaMap: doorAplhaTexture,
  transparent: true,
  aoMap: doorAoTexture,
  aoMapIntensity: 1,
  displacementMap: doorHeightTexture,
  displacementScale: 0.1,
  //   opacity: 0.3,
  //   side: THREE.DoubleSide,
});
material.side = THREE.DoubleSide;
const cube = new THREE.Mesh(cubeGeometry, material);
scene.add(cube);
// 给cube添加第二组uv
cubeGeometry.setAttribute(
  "uv2",
  new THREE.BufferAttribute(cubeGeometry.attributes.uv.array, 2)
);

// 添加平面
const planeGeometry = new THREE.PlaneBufferGeometry(1, 1, 200, 200);
const plane = new THREE.Mesh(planeGeometry, material);
plane.position.set(1.5, 0, 0);

scene.add(plane);
// console.log(plane);
// 给平面设置第二组uv
planeGeometry.setAttribute(
  "uv2",
  new THREE.BufferAttribute(planeGeometry.attributes.uv.array, 2)
);

// 灯光
// 环境光
const light = new THREE.AmbientLight(0xffffff, 0.5); // soft white light
scene.add(light);
//直线光源
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
directionalLight.position.set(10, 10, 10);
scene.add(directionalLight);

// 初始化渲染器
const renderer = new THREE.WebGLRenderer();
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth, window.innerHeight);
// console.log(renderer);
// 将webgl渲染的canvas内容添加到body
document.body.appendChild(renderer.domElement);

// // 使用渲染器，通过相机将场景渲染进来
// renderer.render(scene, camera);

// 创建轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);
// 设置控制器阻尼，让控制器更有真实效果,必须在动画循环里调用.update()。
controls.enableDamping = true;

// 添加坐标轴辅助器
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);
// 设置时钟
const clock = new THREE.Clock();

function render() {
  controls.update();
  renderer.render(scene, camera);
  //   渲染下一帧的时候就会调用render函数
  requestAnimationFrame(render);
}

render();

// 监听画面变化，更新渲染画面
window.addEventListener("resize", () => {
  //   console.log("画面变化了");
  // 更新摄像头
  camera.aspect = window.innerWidth / window.innerHeight;
  //   更新摄像机的投影矩阵
  camera.updateProjectionMatrix();

  //   更新渲染器
  renderer.setSize(window.innerWidth, window.innerHeight);
  //   设置渲染器的像素比
  renderer.setPixelRatio(window.devicePixelRatio);
});

2.粗糙度与粗糙度贴图/金属贴图、法线贴图

import * as THREE from "three";
// 导入轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
// 导入动画库
import gsap from "gsap";
// 导入dat.gui
import * as dat from "dat.gui";

// 目标：粗糙度与粗糙度贴图/金属贴图、法线贴图

// 1、创建场景
const scene = new THREE.Scene();

// 2、创建相机
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);

// 设置相机位置
camera.position.set(0, 0, 10);
scene.add(camera);

// 导入纹理
const textureLoader = new THREE.TextureLoader();
const doorColorTexture = textureLoader.load("./textures/door/color.jpg");
const doorAplhaTexture = textureLoader.load("./textures/door/alpha.jpg");
const doorAoTexture = textureLoader.load(
  "./textures/door/ambientOcclusion.jpg"
);
//导入置换贴图
const doorHeightTexture = textureLoader.load("./textures/door/height.jpg");
// 导入粗糙度贴图
const roughnessTexture = textureLoader.load("./textures/door/roughness.jpg");
// 导入金属贴图
const metalnessTexture = textureLoader.load("./textures/door/metalness.jpg");
// 导入法线贴图
const normalTexture = textureLoader.load("./textures/door/normal.jpg");

// 添加物体
const cubeGeometry = new THREE.BoxBufferGeometry(1, 1, 1, 100, 100, 100);
// 材质
const material = new THREE.MeshStandardMaterial({
  color: "#ffff00",
  map: doorColorTexture,
  alphaMap: doorAplhaTexture,
  transparent: true,
  aoMap: doorAoTexture,
  aoMapIntensity: 1,
  displacementMap: doorHeightTexture,
  displacementScale: 0.1,
  roughness: 1,
  roughnessMap: roughnessTexture,
  metalness: 1,
  metalnessMap: metalnessTexture,
  normalMap: normalTexture,
  //   opacity: 0.3,
  //   side: THREE.DoubleSide,
});
material.side = THREE.DoubleSide;
const cube = new THREE.Mesh(cubeGeometry, material);
scene.add(cube);
// 给cube添加第二组uv
cubeGeometry.setAttribute(
  "uv2",
  new THREE.BufferAttribute(cubeGeometry.attributes.uv.array, 2)
);

// 添加平面
const planeGeometry = new THREE.PlaneBufferGeometry(1, 1, 200, 200);
const plane = new THREE.Mesh(planeGeometry, material);
plane.position.set(1.5, 0, 0);

scene.add(plane);
// console.log(plane);
// 给平面设置第二组uv
planeGeometry.setAttribute(
  "uv2",
  new THREE.BufferAttribute(planeGeometry.attributes.uv.array, 2)
);

// 灯光
// 环境光
const light = new THREE.AmbientLight(0xffffff, 0.5); // soft white light
scene.add(light);
//直线光源
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
directionalLight.position.set(10, 10, 10);
scene.add(directionalLight);

// 初始化渲染器
const renderer = new THREE.WebGLRenderer();
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth, window.innerHeight);
// console.log(renderer);
// 将webgl渲染的canvas内容添加到body
document.body.appendChild(renderer.domElement);

// // 使用渲染器，通过相机将场景渲染进来
// renderer.render(scene, camera);

// 创建轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);
// 设置控制器阻尼，让控制器更有真实效果,必须在动画循环里调用.update()。
controls.enableDamping = true;

// 添加坐标轴辅助器
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);
// 设置时钟
const clock = new THREE.Clock();

function render() {
  controls.update();
  renderer.render(scene, camera);
  //   渲染下一帧的时候就会调用render函数
  requestAnimationFrame(render);
}

render();

// 监听画面变化，更新渲染画面
window.addEventListener("resize", () => {
  //   console.log("画面变化了");
  // 更新摄像头
  camera.aspect = window.innerWidth / window.innerHeight;
  //   更新摄像机的投影矩阵
  camera.updateProjectionMatrix();

  //   更新渲染器
  renderer.setSize(window.innerWidth, window.innerHeight);
  //   设置渲染器的像素比
  renderer.setPixelRatio(window.devicePixelRatio);
});

3.纹理加载进度情况

import * as THREE from "three";
// 导入轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
// 导入动画库
import gsap from "gsap";
// 导入dat.gui
import * as dat from "dat.gui";

// 目标：纹理的进度

// 1、创建场景
const scene = new THREE.Scene();

// 2、创建相机
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);

// 设置相机位置
camera.position.set(0, 0, 10);
scene.add(camera);

var div = document.createElement("div");
div.style.width = "200px";
div.style.height = "200px";
div.style.position = "fixed";
div.style.right = 0;
div.style.top = 0;
div.style.color = "#fff";
document.body.appendChild(div);
let event = {};
// 单张纹理图的加载
event.onLoad = function () {
  console.log("图片加载完成");
};
event.onProgress = function (url, num, total) {
  console.log("图片加载完成:", url);
  console.log("图片加载进度:", num);
  console.log("图片总数:", total);
  let value = ((num / total) * 100).toFixed(2) + "%";
  console.log("加载进度的百分比：", value);
  div.innerHTML = value;
};
event.onError = function (e) {
  console.log("图片加载出现错误");
  console.log(e);
};

// 设置加载管理器
const loadingManager = new THREE.LoadingManager(
  event.onLoad,
  event.onProgress,
  event.onError
);
// 导入纹理
const textureLoader = new THREE.TextureLoader(loadingManager);
const doorColorTexture = textureLoader.load(
  "./textures/door/color.jpg"
  //   event.onLoad,
  //   event.onProgress,
  //   event.onError
);

const doorAplhaTexture = textureLoader.load("./textures/door/alpha.jpg");
const doorAoTexture = textureLoader.load(
  "./textures/door/ambientOcclusion.jpg"
);
//导入置换贴图
const doorHeightTexture = textureLoader.load("./textures/door/height.jpg");
// 导入粗糙度贴图
const roughnessTexture = textureLoader.load("./textures/door/roughness.jpg");
// 导入金属贴图
const metalnessTexture = textureLoader.load("./textures/door/metalness.jpg");
// 导入法线贴图
const normalTexture = textureLoader.load("./textures/door/normal.jpg");

// 添加物体
const cubeGeometry = new THREE.BoxBufferGeometry(1, 1, 1, 100, 100, 100);
// 材质
const material = new THREE.MeshStandardMaterial({
  color: "#ffff00",
  map: doorColorTexture,
  alphaMap: doorAplhaTexture,
  transparent: true,
  aoMap: doorAoTexture,
  aoMapIntensity: 1,
  displacementMap: doorHeightTexture,
  displacementScale: 0.1,
  roughness: 1,
  roughnessMap: roughnessTexture,
  metalness: 1,
  metalnessMap: metalnessTexture,
  normalMap: normalTexture,
  //   opacity: 0.3,
  //   side: THREE.DoubleSide,
});
material.side = THREE.DoubleSide;
const cube = new THREE.Mesh(cubeGeometry, material);
scene.add(cube);
// 给cube添加第二组uv
cubeGeometry.setAttribute(
  "uv2",
  new THREE.BufferAttribute(cubeGeometry.attributes.uv.array, 2)
);

// 添加平面
const planeGeometry = new THREE.PlaneBufferGeometry(1, 1, 200, 200);
const plane = new THREE.Mesh(planeGeometry, material);
plane.position.set(1.5, 0, 0);

scene.add(plane);
// console.log(plane);
// 给平面设置第二组uv
planeGeometry.setAttribute(
  "uv2",
  new THREE.BufferAttribute(planeGeometry.attributes.uv.array, 2)
);

// 灯光
// 环境光
const light = new THREE.AmbientLight(0xffffff, 0.5); // soft white light
scene.add(light);
//直线光源
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
directionalLight.position.set(10, 10, 10);
scene.add(directionalLight);

// 初始化渲染器
const renderer = new THREE.WebGLRenderer();
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth, window.innerHeight);
// console.log(renderer);
// 将webgl渲染的canvas内容添加到body
document.body.appendChild(renderer.domElement);

// // 使用渲染器，通过相机将场景渲染进来
// renderer.render(scene, camera);

// 创建轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);
// 设置控制器阻尼，让控制器更有真实效果,必须在动画循环里调用.update()。
controls.enableDamping = true;

// 添加坐标轴辅助器
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);
// 设置时钟
const clock = new THREE.Clock();

function render() {
  controls.update();
  renderer.render(scene, camera);
  //   渲染下一帧的时候就会调用render函数
  requestAnimationFrame(render);
}

render();

// 监听画面变化，更新渲染画面
window.addEventListener("resize", () => {
  //   console.log("画面变化了");
  // 更新摄像头
  camera.aspect = window.innerWidth / window.innerHeight;
  //   更新摄像机的投影矩阵
  camera.updateProjectionMatrix();

  //   更新渲染器
  renderer.setSize(window.innerWidth, window.innerHeight);
  //   设置渲染器的像素比
  renderer.setPixelRatio(window.devicePixelRatio);
});

在这里插入图片描述

4 详解环境贴图

import * as THREE from "three";
// 导入轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
// 导入动画库
import gsap from "gsap";
// 导入dat.gui
import * as dat from "dat.gui";
import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader";
// 目标：设置环境纹理
// 加载hdr环境图
const rgbeLoader = new RGBELoader();
rgbeLoader.loadAsync("textures/hdr/002.hdr").then((texture) => {
  texture.mapping = THREE.EquirectangularReflectionMapping;
  scene.background = texture;
  scene.environment = texture;
});

// 1、创建场景
const scene = new THREE.Scene();

// 2、创建相机
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);

// 设置相机位置
camera.position.set(0, 0, 10);
scene.add(camera);

// 设置cube纹理加载器
const cubeTextureLoader = new THREE.CubeTextureLoader();
const envMapTexture = cubeTextureLoader.load([
  "textures/environmentMaps/1/px.jpg",
  "textures/environmentMaps/1/nx.jpg",
  "textures/environmentMaps/1/py.jpg",
  "textures/environmentMaps/1/ny.jpg",
  "textures/environmentMaps/1/pz.jpg",
  "textures/environmentMaps/1/nz.jpg",
]);

const sphereGeometry = new THREE.SphereBufferGeometry(1, 20, 20);
const material = new THREE.MeshStandardMaterial({
  metalness: 0.7,
  roughness: 0.1,
  //   envMap: envMapTexture,
});
const sphere = new THREE.Mesh(sphereGeometry, material);
scene.add(sphere);

// 给场景添加背景
scene.background = envMapTexture;
// 给场景所有的物体添加默认的环境贴图
scene.environment = envMapTexture;

// 灯光
// 环境光
const light = new THREE.AmbientLight(0xffffff, 0.5); // soft white light
scene.add(light);
//直线光源
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
directionalLight.position.set(10, 10, 10);
scene.add(directionalLight);

// 初始化渲染器
const renderer = new THREE.WebGLRenderer();
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth, window.innerHeight);
// console.log(renderer);
// 将webgl渲染的canvas内容添加到body
document.body.appendChild(renderer.domElement);

// // 使用渲染器，通过相机将场景渲染进来
// renderer.render(scene, camera);

// 创建轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);
// 设置控制器阻尼，让控制器更有真实效果,必须在动画循环里调用.update()。
controls.enableDamping = true;

// 添加坐标轴辅助器
const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);
// 设置时钟
const clock = new THREE.Clock();

function render() {
  controls.update();
  renderer.render(scene, camera);
  //   渲染下一帧的时候就会调用render函数
  requestAnimationFrame(render);
}

render();

// 监听画面变化，更新渲染画面
window.addEventListener("resize", () => {
  //   console.log("画面变化了");
  // 更新摄像头
  camera.aspect = window.innerWidth / window.innerHeight;
  //   更新摄像机的投影矩阵
  camera.updateProjectionMatrix();

  //   更新渲染器
  renderer.setSize(window.innerWidth, window.innerHeight);
  //   设置渲染器的像素比
  renderer.setPixelRatio(window.devicePixelRatio);
});

在这里插入图片描述

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

threeJs

javascript

4.three.js详解PBR物理渲染的相关文章

如何从一维数组和静态字符串创建对象

我想要一个像 var obj ABC name true dob true CDE name true dob true EFG name true dob true CBA name true dob true XYZ name true
如何检测被覆盖的 CSS 属性？

I can get all css properties for an element with document stylesheets but some of those are not active because those pro
提升变量有目的吗？

我最近学习了很多 JavaScript 并且一直在尝试理解提升变量的值如果有的话我现在明白JS是一个两遍系统它编译然后执行另外我知道 var 关键字存在在它声明的词法范围中因此如果在引擎为其赋值之前调用它那么它是未定
appendChild 错误：无法在层次结构中的指定点插入节点

There is an error with the function appendChild Node cannot be inserted at the specified point in the hierarchy JS var a
需要使用 iFrame API 隐藏 YouTube 品牌

我正在使用 YouTube iFrame API 在我的自定义播放器 javascript 播放器中加载视频我需要隐藏 Youtube 品牌但是在 iOS 设备上它显示带有以下参数的徽标 playerVars fs 1 autopl
返回上一页

我正在使用表格来评价页面此表单将数据发布到其他地方的 php 脚本我只是想在处理表单后显示一个链接这将使用户返回到上一页我可以在 php 脚本中使用 javascript 来执行此操作吗 GF 您可以使用链接来调用histo
如何在 google.maps.event.addListener 中使用它

以下示例有效但是当我尝试传递参数并使用this在该功能不起作用 Working google maps event addListener markers i click showInfoWindow function showInfoW
调用类实例方法 onclick javascript

我有一个 javascript 文件其中包含包含方法函数的类我想知道如何从 onClick 事件调用类实例方法 function MyClass this instanceData Display Me this DisplayData
角度垫排序不适用于带点表示法的 matColumnDef

我正在尝试按列对表进行排序当我必须过滤另一个结果中的结果时就会出现问题我尝试通过括号表示法和点表示法访问该属性但没有给出结果还将最终节点放置在 matColumnDef 中但失败因为有 2 列同名 table table
fadeOut() 和slideUp() 同时进行？

我已经发现jQuery 淡出然后滑动 https stackoverflow com questions 734554 jquery fadeout then slideup这很好但不是那个我怎么能够fadeOut and slideU
冒泡可用于图像加载事件吗？

我可以用吗 window addEventListner 某种程度上来说我所有的图像都有一个display none 图像加载后我想设置display inline 这样我就可以规范下载图像时显示的内容在这种情况下我无法预加载图像
Socket IO 服务器到服务器

服务器是否可以使用 Socket IO 连接到另一个服务器并被视为客户端并让它加入房间接收 io sockets in lobby emit 和更多第一个服务器也在监听连接消息嘿 Brad 下面是我的完整 js 应用程序供参考
嵌套 DIV 的类似斑马的 CSS 样式

我嵌套了 DIV 元素但我不知道嵌套的级别我需要每个都有与其父级不同的背景创建类似斑马的颜色我只使用两种背景深色和白色效果需要类似于在容器中设置奇数和偶数子级的样式但在我的例子中子级是嵌套的我可以使用每个嵌套元素的规则来做
引用自身的 Javascript 对象...有问题吗？

由于 Javascript 允许通过引用分配复合值因此如果 Javascript 对象引用自身它将创建无限的引用集如控制台中所示这看起来像是某种无限循环但 Chrome 似乎没有问题这样做是否存在任何内存问题或其他风险就记忆力
如何在新窗口中打开图像或pdf文件？

我有一个 gridview 它包含文件名和文件路径图像和 pdf 格式文件其中我使用了模板字段在该字段下放置了 1 个图像按钮单击该图像按钮即查看按钮时我想在新窗口中打开所选文件这是我的代码 protected void
AngularStrap 工具提示禁用我的自定义指令

我正在尝试让 bs tooltip AngularStrap 指令与我自己的名为 checkStrength 的自定义指令一起使用该指令检查密码的强度单独使用这些指令中的任何一个时它们都可以正常工作但不能一起工作 This http
jQuery 中什么函数相当于 .SelectMany()？

让我解释一下我们知道 jQuery 中的映射函数充当 Select 如 LINQ 中 tr map function return this children first returns 20 tds 现在的问题是我们如何在 jQuery
在 Nodejs 中，如何停止 FOR 循环直到 MongoDB 调用返回

我正在研究下面的代码片段我有一个名为 stuObjList 的 JSON 对象数组我想循环遍历数组以查找具有特定标志集的特定 JSON 对象然后进行数据库调用以检索更多数据当然 FOR 循环不会等待数据库调用返回并到达 j leng
标记（Markdown）+ Mermaid（流程图和图表）

努力去争取美人鱼 https github com knsv mermaid https github com knsv mermaid跟共事标记 https github com chjj marked https github c
$ 在 JQuery 中意味着什么

在下面的 var obj one 1 two 2 three 3 four 4 five 5 each obj function i val console log val 这里是什么意思是对象吗是一个别名jQuery对象函数它充当

随机推荐

dotnet build Itwas not possible to find any installed .NET Core SDKs Did you mean to run .

1 在CentOS7中编译aspnetcore项目时出现了下面的错误意思是没有安装 NET Core SDK root iZwz90r5hel5o570f21k91Z AspNetCoreDocker dotnet build AspNe
数据库学习一站式入门资料（纯干货）

本文涉及的所有内容仅供学习使用如有侵权请联系本人删除一数据库管理系统安装这里提供三种方式安装 1 华为的OpenGauss系统支持国产这里提供在华为云服务器上配置的方法由于是装在云端的对本地的机器没什么要求基本可以上浏览
衡器---电压信号与电压

一灵敏度激励与检测分度灵敏度 LV 激励 JV 总信号电压变化量 LVJL 按照3000分度数每分度电压为 LVJV 3000 例灵敏度 2 0mV V 激励 5V 每个检定分度电压是 2 0mV 5V 3000 3 3uv 检测
Vue2学习第二十篇：Vue中的插件

功能是用于增强Vue 就是把一些定义全局的功能都放在里面整合起来到时候这些功能都能在全局使用本质上就是包含install方法的一个对象 install的第一个参数就是Vue 第二个以后的参数就是插件使用者传递的参数使用步骤如下第一步
几秒前，几分钟前，几小时前，几天前，几月前，几年前的java实现

在代码开发的时候特别是那种论坛啊什么的要返回几秒前几分钟前几小时前几天前几月前几年前这样的时间格式服务端那边只肯返回yyyy MM dd HH mm ss的格式没办法只能客户端加个转换了代码如下 public cla
目标检测遮挡问题及解决方案汇总

部分内容来自目标检测之小目标检测和遮挡问题 AndyJ的学习之旅 CSDN博客遮挡目标检测有遮挡的目标检测 Repulsion Loss Detecting Pedestrians in a Crowd CVPR2018 遮挡情况目
Logistic回归——银行违约情况分析

文章目录一 Logistic回归原理 1 Sigmoid函数作用 2 用梯度下降法求解参数二利用Logistic回归分类 1 数据预处理 2 利用梯度上升计算回归系数 3 训练和验证总结一 Logistic回归原理 1 Sigmo
Linux命令行解密

本章节将要讲解的命令命令命令用途 type 显示命令类型 which 显示可执行文件的位置 help 获取Shell内建命令的帮助信息 man 显示命令的手册页 info 显示命令的info条目 alias 创建自己的命令什么是命令
【maven】No plugin found for prefix ‘install‘ in the current project

1 场景1 1 1 概述在安装jar文件到本地仓库时有时会遇到这样的问题解决方法下载 wagon http lightweight 2 2 jar 位置 https repo maven apache org maven2 org a
Unity设计模式之工厂模式

一什么是工厂模式工厂模式是一种创建型设计模式它提供了一种封装对象创建的方式将对象的创建过程与使用过程分离使得代码更加灵活可扩展和可维护在Unity中工厂模式常用于创建和管理游戏对象对啦这里有个游戏开发交流小组里面聚集了一
MySQL存储结构

MySQL体系结构 1 网络接入层提供了应用程序接入MySQL服务的接口客户端与服务端建立连接客户端发送SQL到服务端 2 服务层管理工具和服务系统管理和控制工具例如备份恢复 Mysql复制集群等连接池主要负责连接管理授
客户合并修改需求 @熊哥

1 客户信息确认列表如果是车主信息确认列表和车主信息查询列表调用的标准客户修改功能保存客户档案时不校验客户信息重复规则 2 客户信息确认列表客户信息确认列表修改为车主信息确认列表客户信息合并修改为车主信息合并列表
Moviepy时间变换time_mirror再遇‘OSError: MoviePy error: failed to read the first frame of video file‘解决示例代码

老猿Python博文目录 https blog csdn net LaoYuanPython 一引言在 https blog csdn net LaoYuanPython article details 106478711 moviep
leetcode63. 不同路径 II

https leetcode cn com problems unique paths ii 一个机器人位于一个 m x n 网格的左上角起始点在下图中标记为 Start 机器人每次只能向下或者向右移动一步机器人试图达到网格的右下角在
程序运行结构

C 支持最基本的三种程序运行结构顺序结构选择结构循环结构顺序结构程序按顺序执行不发生跳转选择结构依据条件是否满足有选择的执行相应功能循环结构依据条件是否满足循环多次执行某段代码选择结构 if语句作用执行满足条件
Python使用opencv实现图片定位第三种方式

encoding utf 8 author Jeff xie 这个方法识别度更高比cv2 matchTemplate更好 cv2 matchTemplate无定位的图片这个方法可以 import cv2 bgPath D Reg Car
如何清理台式计算机内存,如何清理电脑运行内存_电脑运行内存不足怎么解决-win7之家...

我们在电脑上会运行很多我们需要使用的程序这样的话会带着电脑运行内存不足变卡的问题这就需要清理先电脑没在用的程序了或者清理些内存也可以缓解的那么如何清理电脑运行内存呢下面小编给大家分享电脑运行内存不足的解决方法解决方法一关闭性能
如何在Vue模板中绑定事件？

让我们来谈谈你在Vue模板中绑定事件的问题吧首先我们要先了解什么是事件在Vue中事件是指在模板中绑定的一些特殊的HTML属性比如v on click 它们可以让我们在用户与页面交互时执行一些操作在Vue模板中绑定事件有两种方式
Cocos Creator3D：制作可任意拉伸的 UI 图像

推荐将 NSDT场景编辑器加入你的3D工具链 3D工具集 NSDT简石数字孪生制作可任意拉伸的 UI 图像 UI 系统核心的设计原则是能够自动适应各种不同的设备屏幕尺寸因此我们在制作 UI 时需要正确设置每个控件元素的尺寸 size
4.three.js详解PBR物理渲染

1 标准网格材质 import as THREE from three 导入轨道控制器 import OrbitControls from three examples jsm controls OrbitControls 导入动画库 im

4.three.js详解PBR物理渲染

1 标准网格材质

2.粗糙度与粗糙度贴图/金属贴图、法线贴图

3.纹理加载进度情况

4 详解环境贴图

4.three.js详解PBR物理渲染 的相关文章

随机推荐

热门标签

4.three.js详解PBR物理渲染的相关文章