Three 渲染器(二)

2024-09-08 06:28
文章标签 three 渲染器

本文主要是介绍Three 渲染器(二),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

WebGL1Renderer

构造函数

WebGL1Renderer( parameters : Object )

Creates a new WebGL1Renderer.

属性

See the base WebGLRenderer class for common properties.

方法

See the base WebGLRenderer class for common methods.

WebGLRenderTarget

render target是一个缓冲,就是在这个缓冲中,视频卡为正在后台渲染的场景绘制像素。 它用于不同的效果,例如用于在一个图像显示在屏幕上之前先做一些处理。

构造器

WebGLRenderTarget(width : Number, height : Number, options : Object)

width -renderTarget的宽度
height - renderTarget的高度
options - (可选)一个保存着自动生成的目标纹理的纹理参数以及表示是否使用深度缓存/模板缓存的布尔值的对象 以下是一些合法选项:

wrapS - 默认是ClampToEdgeWrapping.
wrapT - 默认是ClampToEdgeWrapping.
magFilter - 默认是LinearFilter.
minFilter - 默认是LinearFilter.
generateMipmaps - 默认是false.
format - 默认是RGBAFormat.
type - 默认是UnsignedByteType.
anisotropy - 默认是1. 参见Texture.anisotropy
encoding - 默认是LinearEncoding.
depthBuffer - 默认是true.
stencilBuffer - 默认是false.

创建一个新WebGLRenderTarget

属性

.width : number

渲染目标宽度

.height : number

渲染目标高度

.scissor : Vector4

渲染目标视口内的一个矩形区域,区域之外的片元将会被丢弃

.scissorTest : Boolean

表明是否激活了剪裁测试

.viewport : Vector4

渲染目标的视口

.texture : Texture

纹理实例保存这渲染的像素,用作进一步处理的输入值

.depthBuffer : Boolean

渲染到深度缓冲区。默认true.

.stencilBuffer : Boolean

渲染到模板缓冲区。默认为false

.depthTexture : DepthTexture

如果设置,那么场景的深度将会被渲染到此纹理上。默认为null

方法

.setSize ( width : Number, height : Number ) : null

设置渲染目标的大小

.clone () : WebGLRenderTarget

创建一个渲染目标副本

.copy ( source : WebGLRenderTarget ) : WebGLRenderTarget

采用传入的渲染目标的设置

.dispose () : null

发出一个处理事件

EventDispatcher方法可从此类中获得

WebGLRenderTargetCube

被CubeCamera作为它的WebGLRenderTarget使用

构造器

WebGLCubeRenderTarget(size : Number, options : Object)

size - the size, in pixels.
options - (可选)一个保存着自动生成的目标纹理的纹理参数以及表示是否使用深度缓存/模板缓存的布尔值的对象。 有关纹理参数的说明,请参阅Texture. 以下是合理选项:

wrapS - 默认是ClampToEdgeWrapping.
wrapT - 默认是ClampToEdgeWrapping.
magFilter - 默认是.LinearFilter.
minFilter - 默认是LinearFilter.
generateMipmaps - 默认是false.
format - 默认是RGBAFormat.
type - 默认是UnsignedByteType.
anisotropy - 默认是 1. 参见Texture.anistropy
encoding - 默认是LinearEncoding.
depthBuffer - 默认是true.
stencilBuffer - default is false.

创建一个新WebGLCubeRenderTarget

属性

继承属性,请参阅WebGLRenderTarget

方法

继承方法,请参阅WebGLRenderTarget

.fromEquirectangularTexture ( renderer : WebGLRenderer, texture : Texture ) : WebGLCubeRenderTarget

renderer — 渲染器。
texture — equirectangular 纹理。

如果你想将一张equirectangular格式的全景图转换到cubemap格式,则使用此方法。

.clear ( renderer : WebGLRenderer, color : Boolean, depth : Boolean, stencil : Boolean ) : undefined

这个方法用来来清除renderTarget的颜色、深度和/或模板缓冲区。 颜色缓冲区设置为渲染器当前的“清除”色。参数默认值均为true

这篇关于Three 渲染器(二)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1147372

相关文章

leetcode#628. Maximum Product of Three Numbers

题目 Given an integer array, find three numbers whose product is maximum and output the maximum product. Example 1: Input: [1,2,3]Output: 6 Example 2: Input: [1,2,3,4]Output: 24 Note: The lengt

three.js 实现围墙效果

import * as THREE from “three”; import { OrbitControls } from “three/addons/controls/OrbitControls.js”; const { innerWidth, innerHeight } = window; const aspect = innerWidth / innerHeight; class Bas

three.js使用3DTilesRendererJS加载3d tiles数据

原生的 three.js 目前不支持 3d tiles 数据的加载,不过开源社区已经给出了一些解决方案,其中最活跃的要属 3DTilesRendererJS。它为 three.js 提供了加载和调度 3d tiles 数据的基本能力,虽说和 Cesium.js 对 3d tiles 的支持相比还有很大的差距,但也比没有的好。毕竟 3d tiles 数据的加载和调度还是比较复杂的,要自己写也没那么容

Three.js new THREE.TextureLoader()纹理贴图使用png图片显示为黑色

问题代码如下: const texture = new THREE.TextureLoader().load('./image.png');droneGeometry = new THREE.PlaneGeometry(1, 1);droneMaterial = new THREE.MeshBasicMaterial({ map: texture});droneMesh = new THRE

react 中three.js 模型渲染

npm install three import * as THREE from "three";import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";const mountRef = useRef(null);useEffect(() => {// 创建渲染器 const rendere

【基础】Three.js加载纹理贴图、加载外部gltf格式文件

1. 模型使用纹理贴图 const geometry = new THREE.BoxGeometry(10, 10, 10);const textureLoader = new THREE.TextureLoader(); // 创建纹理贴图加载器const texture = textureLoader.load("/crate.gif"); // 加载纹理贴图const material

一个最基本的多线程3D渲染器方案

概括 渲染器仍然是大多数现代视频游戏的主要组件。通常,这些流水线通过 3D 图形应用程序接口(如 DirectX、OpenGL )暴露出来。现代,多核 CPU 已广泛应用于游戏机和个人电脑。为了确保 GPU 能持续不断地处理数据,渲染器必须充分利用这一优势。通常在屏幕上渲染出 3D 图像的工作流程依赖于向GPU 发送的可执行命令队列。 可以采用不同的方法将 CPU 与 GPU 分离。例如,一种

Three.js Cesium.js 案例聚集地

对于大多数的开发者来言,看了很多文档可能遇见不到什么有用的,就算有用从文档上看,把代码复制到自己的本地大多数也是不能用的,非常浪费时间和学习成本, 尤其是three.js , cesium.js 这种难度较高, 想要实现一个功能可能会查阅很多博客 ,进行很多错误尝试,费时费力。 集成了相关友情站 所以,话不多说为了给各位造福利,我搭建了在线查看代码且可的调试系统,所有案例可直接访问,让你欣赏

three 加载器(一)

BufferGeometryLoader 用来加载BufferGeometry的加载器。 内部使用FileLoader来加载文件。 // 初始化一个加载器 var loader = new THREE.BufferGeometryLoader(); // 加载资源 loader.load( // 资源URL 'models/json/pressure.json', // onLoad回调

Threejs之WebGLRenderer渲染器

本文目录 前言一、渲染器基础配置1.1 canvas1.2 抗锯齿 前言 渲染器作为Web 3D开发中的核心组件,WebGLRenderer深度集成了WebGL的所有功能,包括但不限于对复杂材质(如金属、玻璃等)、多种光源类型(点光源、平行光、环境光等)、精细阴影以及逼真反射的支持。本文将会记录渲染的基础用法。 一、渲染器基础配置 我们通过const renderer