HTML5キャンバスを使用して、THREE.SpriteMaterialマテリアルを介してパーティクルをフォーマットします
1.スプライトマテリアルの紹介
SpriteMaterialクラスはMaterial基本クラスを継承し、MaterialクラスのすべてのプロパティとメソッドをSpriteMaterialクラスで使用できます。
SpriteMaterialクラスにも独自のプロパティがいくつかあります。次に、これらのプロパティを主に紹介します。
| 属性 | 説明 |
|---|---|
| 色 | この属性はマテリアルの色を指定します。デフォルト値は0xFFFFFFです。 |
| 地図 | カラーマップは、この属性で指定できます。THREE.Textureオブジェクトであり、デフォルトはnullです |
| 回転 | この属性を使用して、スプライト粒子の回転をラジアンで指定します。デフォルト値は0です |
| sizeAnnutation | この属性はブール値です。trueの場合、パーティクルのサイズはパーティクルとカメラの間の距離によって決定されます。falseの場合、パーティクルとカメラの間の距離に関係なく、パーティクルのサイズが同じになることを意味します。 。 |
| ライト | この属性は、マテリアルが光の影響を受けるかどうかを指定するブール値です。デフォルト値はfalseです |
| 霧 | この属性は、マテリアルがシーンフォグの影響を受けるかどうかを指定するブール値です。デフォルト値はfalseです |
2.HTML5キャンバスを使用してパーティクルをフォーマットします
2.1テクスチャキャンバステクスチャを作成する
この例のパーティクルは、小さなモンスターのグループを示しています。キャンバステクスチャを作成すると、小さなモンスターの外観が得られます。具体的な実装は次のとおりです。
// 绘制小怪兽纹理
getTexture () {
const canvas = document.createElement('canvas')
canvas.width = 32
canvas.height = 32
const ctx = canvas.getContext('2d')
// 身体
ctx.translate(-81, -84)
ctx.fillStyle = 'orange'
ctx.beginPath()
ctx.moveTo(83, 116)
ctx.lineTo(83, 102)
ctx.bezierCurveTo(83, 94, 89, 88, 97, 88)
ctx.bezierCurveTo(105, 88, 111, 94, 111, 102)
ctx.lineTo(111, 116)
ctx.lineTo(106.333, 111.333)
ctx.lineTo(101.666, 116)
ctx.lineTo(97, 111.333)
ctx.lineTo(92.333, 116)
ctx.lineTo(87.666, 111.333)
ctx.lineTo(83, 116)
ctx.fill()
// 眼睛
ctx.fillStyle = 'white'
ctx.beginPath()
ctx.moveTo(91, 96)
ctx.bezierCurveTo(88, 96, 87, 99, 87, 101)
ctx.bezierCurveTo(87, 103, 88, 106, 91, 106)
ctx.bezierCurveTo(94, 106, 95, 103, 95, 101)
ctx.bezierCurveTo(95, 99, 94, 96, 91, 96)
ctx.moveTo(103, 96)
ctx.bezierCurveTo(100, 96, 99, 99, 99, 101)
ctx.bezierCurveTo(99, 103, 100, 106, 103, 106)
ctx.bezierCurveTo(106, 106, 107, 103, 107, 101)
ctx.bezierCurveTo(107, 99, 106, 96, 103, 96)
ctx.fill()
// 眼球
ctx.fillStyle = 'blue'
ctx.beginPath()
ctx.arc(101, 102, 2, 0, Math.PI * 2, true)
ctx.fill()
ctx.beginPath()
ctx.arc(89, 102, 2, 0, Math.PI * 2, true)
ctx.fill()
const texture = new THREE.Texture(canvas)
texture.needsUpdate = true
return texture
}
2.2SpriteMaterialマテリアルを作成する
これは、THREE.PointsMaterialクラスを使用してパーティクルマテリアルを作成するのと同じです。上記のテクスチャ作成関数を、SpriteMaterialマテリアルを作成するマップパラメータに割り当てます。詳細については、サンプルコードを参照してください。
// 创建粒子材质
const material = new THREE.SpriteMaterial({
map: this.getTexture(),
color: 0xffffff
})
material.rotation = Math.PI
2.2スプライトオブジェクトを作成し、シーンに追加します
const range = 500
for (let i = 0; i < 1500; i++) {
const sprite = new THREE.Sprite(material)
sprite.position.set(
Math.random() * range - range / 2,
Math.random() * range - range / 2,
Math.random() * range - range / 2
)
sprite.scale.set(4, 4, 4)
this.scene.add(sprite)
}
3.デモ効果
4.デモコード
<template>
<div id="container"></div>
</template>
<script>
import * as THREE from 'three'
import {
OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
export default {
data () {
return {
camera: null,
scene: null,
renderer: null,
controls: null
}
},
mounted () {
this.init()
},
methods: {
// 初始化
init () {
this.createScene() // 创建场景
this.createParticleSystem() // 创建粒子系统
this.createCamera() // 创建相机
this.createRender() // 创建渲染器
this.createControls() // 创建控件对象
this.render() // 渲染
},
// 创建场景
createScene () {
this.scene = new THREE.Scene()
},
// 创建粒子
createParticleSystem () {
// 创建粒子材质
const material = new THREE.SpriteMaterial({
map: this.getTexture(),
color: 0xffffff
})
material.rotation = Math.PI
const range = 500
for (let i = 0; i < 1500; i++) {
const sprite = new THREE.Sprite(material)
sprite.position.set(
Math.random() * range - range / 2,
Math.random() * range - range / 2,
Math.random() * range - range / 2
)
sprite.scale.set(4, 4, 4)
this.scene.add(sprite)
}
},
// 绘制小怪兽纹理
getTexture () {
const canvas = document.createElement('canvas')
canvas.width = 32
canvas.height = 32
const ctx = canvas.getContext('2d')
// 身体
ctx.translate(-81, -84)
ctx.fillStyle = 'orange'
ctx.beginPath()
ctx.moveTo(83, 116)
ctx.lineTo(83, 102)
ctx.bezierCurveTo(83, 94, 89, 88, 97, 88)
ctx.bezierCurveTo(105, 88, 111, 94, 111, 102)
ctx.lineTo(111, 116)
ctx.lineTo(106.333, 111.333)
ctx.lineTo(101.666, 116)
ctx.lineTo(97, 111.333)
ctx.lineTo(92.333, 116)
ctx.lineTo(87.666, 111.333)
ctx.lineTo(83, 116)
ctx.fill()
// 眼睛
ctx.fillStyle = 'white'
ctx.beginPath()
ctx.moveTo(91, 96)
ctx.bezierCurveTo(88, 96, 87, 99, 87, 101)
ctx.bezierCurveTo(87, 103, 88, 106, 91, 106)
ctx.bezierCurveTo(94, 106, 95, 103, 95, 101)
ctx.bezierCurveTo(95, 99, 94, 96, 91, 96)
ctx.moveTo(103, 96)
ctx.bezierCurveTo(100, 96, 99, 99, 99, 101)
ctx.bezierCurveTo(99, 103, 100, 106, 103, 106)
ctx.bezierCurveTo(106, 106, 107, 103, 107, 101)
ctx.bezierCurveTo(107, 99, 106, 96, 103, 96)
ctx.fill()
// 眼球
ctx.fillStyle = 'blue'
ctx.beginPath()
ctx.arc(101, 102, 2, 0, Math.PI * 2, true)
ctx.fill()
ctx.beginPath()
ctx.arc(89, 102, 2, 0, Math.PI * 2, true)
ctx.fill()
const texture = new THREE.Texture(canvas)
texture.needsUpdate = true
return texture
},
// 创建相机
createCamera () {
const element = document.getElementById('container')
const width = element.clientWidth // 窗口宽度
const height = element.clientHeight // 窗口高度
const k = width / height // 窗口宽高比
// PerspectiveCamera( fov, aspect, near, far )
this.camera = new THREE.PerspectiveCamera(45, k, 0.1, 1000)
this.camera.position.set(0, 0, 150) // 设置相机位置
this.camera.lookAt(new THREE.Vector3(10, 0, 0)) // 设置相机方向
this.scene.add(this.camera)
},
// 创建渲染器
createRender () {
const element = document.getElementById('container')
this.renderer = new THREE.WebGLRenderer({
antialias: true, alpha: true })
this.renderer.setSize(element.clientWidth, element.clientHeight) // 设置渲染区域尺寸
this.renderer.setClearColor(0x3f3f3f, 1) // 设置背景颜色
element.appendChild(this.renderer.domElement)
},
render () {
this.renderer.render(this.scene, this.camera)
requestAnimationFrame(this.render)
},
// 创建控件对象
createControls () {
this.controls = new OrbitControls(this.camera, this.renderer.domElement)
}
}
}
</script>
<style>
#container {
position: absolute;
width: 100%;
height: 100%;
}
</style>