Point Material Properties

[qiyang20]

Description

Create SphereGeometry, set PointsMaterials, load textures, set material textures, and as a result, SphereGeometry has changed

Reproduction steps

1.Create SphereGeometry
2.Set PointsMaterials
3.Load texture
4.Set the map of PointsMaterials to load textures

Code

import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

const scene = new THREE.Scene()

const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
)

camera.position.set(0, 0, 10)
scene.add(camera)

const sphereGeometry = new THREE.SphereGeometry(3, 30, 30)
const pointsMaterial = new THREE.PointsMaterial()
pointsMaterial.size = 0.1
pointsMaterial.color.set(0xfff000)

const textureLoader = new THREE.TextureLoader()
const texture = textureLoader.load('./textures/particles/2.png')
pointsMaterial.map = texture
pointsMaterial.alphaMap = texture
pointsMaterial.transparent = true
pointsMaterial.depthWrite = false
pointsMaterial.blending = THREE.AdditiveBlending

const points = new THREE.Points(sphereGeometry, pointsMaterial)
scene.add(points)

const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
renderer.shadowMap.enabled = true
renderer.physicallyCorrectLights = true
document.body.appendChild(renderer.domElement)

const controls = new OrbitControls(camera, renderer.domElement)
controls.enableDamping = true

const axesHelper = new THREE.AxesHelper(5)
scene.add(axesHelper)
const clock = new THREE.Clock()

function render() {
  let time = clock.getElapsedTime()
  controls.update()
  renderer.render(scene, camera)
  requestAnimationFrame(render)
}
render()

window.addEventListener('resize', () => {
  camera.aspect = window.innerWidth / window.innerHeight
  camera.updateProjectionMatrix()
  renderer.setSize(window.innerWidth, window.innerHeight)
  renderer.setPixelRatio(window.devicePixelRatio)
})

Live example

Screenshots

Version

0.159.0

Device

Desktop

Browser

Chrome

OS

Windows

[Mugen87]

Since r151, points support uv attributes, see #25707.

You can get the expected result if you delete the uv attribute from the sphere geometry: https://jsfiddle.net/5wx06qmy/