快捷導(dǎo)航

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

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

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

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

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

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

常用屬性有：

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

舉例說明：

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

2. 點對象（Three.Point）：

點對象用于渲染單個點，可以通過添加多個點對象來形成點云。

常用屬性有：

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

舉例說明：

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. 基本運用示例

1. 步驟詳解

首先我們需要創(chuàng)建一個場景、相機(jī)和渲染器：

// 1、創(chuà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);
// 開啟場景中的陰影貼圖
renderer.shadowMap.enabled = true;
renderer.physicallyCorrectLights = true;
// 將webgl渲染的canvas內(nèi)容添加到body
document.body.appendChild(renderer.domElement);

接著，我們需要創(chuàng)建一個球體，和定義一個點材質(zhì)，

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

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

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

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

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

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

可以看到每個點其實是由小立方體組成的。

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

您可能感興趣的文章: