快捷導(dǎo)航

three.js中點(diǎn)對(duì)象(Point)和點(diǎn)材質(zhì)(PointsMaterial)的具體使用

更新時(shí)間：2023年07月26日 15:32:33 作者：jieyucx

本文主要介紹了three.js中點(diǎn)對(duì)象(Point)和點(diǎn)材質(zhì)(PointsMaterial)的具體使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

一、點(diǎn)對(duì)象和點(diǎn)材質(zhì)基本介紹

1. 點(diǎn)材質(zhì)（PointsMaterial）：

點(diǎn)材質(zhì)用于渲染點(diǎn)對(duì)象，它決定了點(diǎn)的顏色、透明度等屬性。

常用屬性有：

color: 點(diǎn)的顏色，默認(rèn)為白色。
opacity: 點(diǎn)的透明度，默認(rèn)為1。
size: 點(diǎn)的大小，可以使用PointScaleAttenuation屬性同時(shí)調(diào)整大小。
sizeAttenuation: 是否使用點(diǎn)大小衰減（根據(jù)相機(jī)遠(yuǎn)近自動(dòng)調(diào)整點(diǎn)的大小），默認(rèn)為true。
map: 對(duì)點(diǎn)紋理進(jìn)行設(shè)置，可以使用貼圖來(lái)代替單色點(diǎn)，如星空。

舉例說(shuō)明：

var material = new THREE.PointsMaterial({ 
    color: 0xffffff, 
    size: 0.1 
});

2. 點(diǎn)對(duì)象（Three.Point）：

點(diǎn)對(duì)象用于渲染單個(gè)點(diǎn)，可以通過(guò)添加多個(gè)點(diǎn)對(duì)象來(lái)形成點(diǎn)云。

常用屬性有：

position: 點(diǎn)的位置，可以是THREE.Vector3類(lèi)型的變量。
color: 點(diǎn)的顏色，使用PointsMaterial的color屬性進(jìn)行設(shè)置，默認(rèn)為白色。
size: 點(diǎn)的大小，使用PointsMaterial的size屬性進(jìn)行設(shè)置，默認(rèn)為1。

舉例說(shuō)明：

var pointGeometry = new THREE.Geometry(); 
pointGeometry.vertices.push( new THREE.Vector3( 0, 0, 0 ) ); 
var pointMaterial = new THREE.PointsMaterial( { size: 5, color: 0xff0000 } ); 
var point = new THREE.Points( pointGeometry, pointMaterial );

3. 基本運(yùn)用示例

1. 步驟詳解

首先我們需要?jiǎng)?chuàng)建一個(gè)場(chǎng)景、相機(jī)和渲染器：

// 1、創(chuàng)建場(chǎng)景
const scene = new THREE.Scene();
// 2、創(chuàng)建相機(jī)
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
// 設(shè)置相機(jī)位置
camera.position.set(0, 0, 10);
scene.add(camera);
// 初始化渲染器
const renderer = new THREE.WebGLRenderer();
// 設(shè)置渲染的尺寸大小
renderer.setSize(window.innerWidth, window.innerHeight);
// 開(kāi)啟場(chǎng)景中的陰影貼圖
renderer.shadowMap.enabled = true;
renderer.physicallyCorrectLights = true;
// 將webgl渲染的canvas內(nèi)容添加到body
document.body.appendChild(renderer.domElement);

接著，我們需要?jiǎng)?chuàng)建一個(gè)球體，和定義一個(gè)點(diǎn)材質(zhì)，

// 創(chuàng)建球幾何體
const sphereGeometry = new THREE.SphereBufferGeometry(3, 30, 30);
// 設(shè)置點(diǎn)材質(zhì)
const pointsMaterial = new THREE.PointsMaterial();
pointsMaterial.size = 0.1; // 設(shè)置點(diǎn)的大小
// 相機(jī)深度而衰減
pointsMaterial.sizeAttenuation = true; // 設(shè)置點(diǎn)的大小是否隨著距離的增加而減小

將幾何體和材質(zhì)傳入點(diǎn)對(duì)象，并將點(diǎn)對(duì)象添加到場(chǎng)景中

const points = new THREE.Points(sphereGeometry, pointsMaterial); // 將幾何體和材質(zhì)傳入點(diǎn)對(duì)象
scene.add(points); // 將點(diǎn)對(duì)象添加到場(chǎng)景中

最后創(chuàng)建軌道控制器控制物體，和創(chuàng)建渲染函數(shù)，渲染場(chǎng)景和相機(jī)

// 創(chuàng)建軌道控制器
const controls = new OrbitControls(camera, renderer.domElement);
// 設(shè)置控制器阻尼，讓控制器更有真實(shí)效果,必須在動(dòng)畫(huà)循環(huán)里調(diào)用.update()。
controls.enableDamping = true;
function render() { // 渲染函數(shù)
  controls.update(); // 更新控制器
  renderer.render(scene, camera); // 渲染器渲染場(chǎng)景和相機(jī)
  //   渲染下一幀的時(shí)候就會(huì)調(diào)用render函數(shù)
  requestAnimationFrame(render);
}
render();

2.效果如圖：

3.完整示例代碼

import * as THREE from "three";
// 導(dǎo)入軌道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
// 導(dǎo)入動(dòng)畫(huà)庫(kù)
import gsap from "gsap";
// 導(dǎo)入dat.gui
import * as dat from "dat.gui";
// 目標(biāo)：認(rèn)識(shí)pointes
const gui = new dat.GUI();
// 1、創(chuàng)建場(chǎng)景
const scene = new THREE.Scene();
// 2、創(chuàng)建相機(jī)
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);
// 設(shè)置相機(jī)位置
camera.position.set(0, 0, 10);
scene.add(camera);
// 創(chuàng)建球幾何體
const sphereGeometry = new THREE.SphereBufferGeometry(3, 30, 30);
// 設(shè)置點(diǎn)材質(zhì)
const pointsMaterial = new THREE.PointsMaterial();
pointsMaterial.size = 0.1; // 設(shè)置點(diǎn)的尺寸大小，默認(rèn)為1
// 相機(jī)深度而衰減
pointsMaterial.sizeAttenuation = true;
const points = new THREE.Points(sphereGeometry, pointsMaterial); // 將幾何體和材質(zhì)傳入點(diǎn)對(duì)象
scene.add(points);
// 初始化渲染器
const renderer = new THREE.WebGLRenderer();
// 設(shè)置渲染的尺寸大小
renderer.setSize(window.innerWidth, window.innerHeight);
// 開(kāi)啟場(chǎng)景中的陰影貼圖
renderer.shadowMap.enabled = true;
renderer.physicallyCorrectLights = true;
// 將webgl渲染的canvas內(nèi)容添加到body
document.body.appendChild(renderer.domElement);
// 創(chuàng)建軌道控制器
const controls = new OrbitControls(camera, renderer.domElement);
// 設(shè)置控制器阻尼，讓控制器更有真實(shí)效果,必須在動(dòng)畫(huà)循環(huán)里調(diào)用.update()。
controls.enableDamping = true;
function render() {
  controls.update();
  renderer.render(scene, camera);
  //   渲染下一幀的時(shí)候就會(huì)調(diào)用render函數(shù)
  requestAnimationFrame(render);
}
render();
// 監(jiān)聽(tīng)畫(huà)面變化，更新渲染畫(huà)面
window.addEventListener("resize", () => {
  //   console.log("畫(huà)面變化了");
  // 更新攝像頭
  camera.aspect = window.innerWidth / window.innerHeight;
  //   更新攝像機(jī)的投影矩陣
  camera.updateProjectionMatrix();
  //   更新渲染器
  renderer.setSize(window.innerWidth, window.innerHeight);
  //   設(shè)置渲染器的像素比
  renderer.setPixelRatio(window.devicePixelRatio);
});

如上面的示例，我們用點(diǎn)材質(zhì)（pointsMaterial）和點(diǎn)對(duì)象(point)結(jié)合球體(THREE.SphereBufferGeometry(3, 30, 30))實(shí)現(xiàn)了以點(diǎn)的形式構(gòu)建一個(gè)球體，我們放大球體看看

可以看到每個(gè)點(diǎn)其實(shí)是由小立方體組成的。

到此這篇關(guān)于three.js中點(diǎn)對(duì)象(Point)和點(diǎn)材質(zhì)(PointsMaterial)的具體使用的文章就介紹到這了,更多相關(guān)three.js中點(diǎn)對(duì)象和點(diǎn)材質(zhì)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: