44 - three.js 笔记 - 通过几何体创建粒子系统
2018-08-17 15:32
351 查看
粒子系统所渲染的点，来自于几何体，也就是如果提供一个几何体就可以根据几何体点的分布来创建粒子系统，如下示例先创建了两个基础的几何体圆柱和立方体，然后又从外部加载进了一个缓存几何，因此只要获取模型的
geometry获取
bufferGeometry属性就可以创建粒子系统。
示例：https://ithanmang.gitee.io/threejs/home/201808/20180817/01-pointsCloud.html
效果
示例代码中有两个函数，一个是
generateSprite用来创建
canvas纹理，
createPointsCloud用来创建粒子系统
/* 创建点云 */
function createPointsCloud(geometry) {
/* 精灵材质 */
let spriteMaterial = new THREE.PointsMaterial({
color: 0xffffff,
size:0.23,
transparent: true,
map: generateSprite()
});
let points = new THREE.Points(geometry, spriteMaterial);
return points;
}
/* 创建canvas纹理 */
function generateSprite() {
/* 常见画布并设置宽高 */
let canvas = document.createElement('canvas');
canvas.width = 8;
canvas.height = 8;
/* 创建图形 */
let ctx = canvas.getContext("2d");
let gradient = ctx.createRadialGradient(
canvas.width / 2, canvas.height / 2, 0,
canvas.width / 2, canvas.height / 2, canvas.width / 2
);
gradient.addColorStop(0, 'rgba(255, 255, 255, 1)');
gradient.addColorStop(0.2, 'rgba(0, 255, 255, 1)');
gradient.addColorStop(0.6, 'rgba(0, 0, 64, 1)');
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, canvas.width, canvas.height);
let texture = new THREE.Texture(canvas);
texture.needsUpdate = true;
return texture;
}
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>通过几何体创建点云</title>
<style>
body {
margin: 0;
overflow: hidden; /* 溢出隐藏 */
}
</style>
<script src="../../libs/build/three-r93.js"></script>
<script src="../../libs/examples/js/Detector.js"></script>
<script src="../../libs/examples/js/libs/dat.gui.min.js"></script>
<script src="../../libs/examples/js/libs/stats.min.js"></script>
<script src="../../libs/examples/js/controls/OrbitControls.js"></script>
<script src="../../libs/examples/js/loaders/OBJLoader.js"></script>
<script src="../../libs/examples/js/loaders/MTLLoader.js"></script>
</head>
<body>
<script>
let scene, camera, renderer, controls;
let stats = initStats();
/* 场景 */
function initScene() {
scene = new THREE.Scene();
}
/* 相机 */
function initCamera() {
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000);
camera.position.set(30, 0, 10);
camera.lookAt(new THREE.Vector3(0, 0, 0));
}
/* 渲染器 */
function initRender() {
renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
}
/* 灯光 */
function initLight() {
}
/* 控制器 */
function initControls() {
controls = new THREE.OrbitControls(camera, renderer.domElement);
/* 属性参数默认 */
}
/* 场景中的内容 */
let group = new THREE.Group();
function initContent() {
/* 创建一个球体 */
let boxGeometry = new THREE.BoxGeometry(5, 10, 5, 20, 30, 20);
let cylinderGeometry = new THREE.CylinderGeometry(2, 2, 10, 30, 30);
let box = createPointsCloud(boxGeometry);
let cylinder = createPointsCloud(cylinderGeometry);
box.position.x = -10;
cylinder.position.x = 10;
group.add(cylinder);
group.add(box);
scene.add(group);
let loader = new THREE.OBJLoader();
loader.load('../../models/walt/WaltHead.obj', function (object) {
let geometry = createPointsCloud(object.children[0].geometry);
let points = createPointsCloud(geometry.geometry);
points.scale.set(0.15, 0.15, 0.15);
points.position.y = -6;
group.add(points);
});
}
/* 创建点云 */
function createPointsCloud(geometry) {
/* 精灵材质 */
let spriteMaterial = new THREE.PointsMaterial({
color: 0xffffff,
size:0.23,
transparent: true,
map: generateSprite()
});
let points = new THREE.Points(geometry, spriteMaterial);
return points;
}
/* 创建canvas纹理 */
function generateSprite() {
/* 常见画布并设置宽高 */
let canvas = document.createElement('canvas');
canvas.width = 8;
canvas.height = 8;
/* 创建图形 */
let ctx = canvas.getContext("2d");
let gradient = ctx.createRadialGradient(
canvas.width / 2, canvas.height / 2, 0,
canvas.width / 2, canvas.height / 2, canvas.width / 2
);
gradient.addColorStop(0, 'rgba(255, 255, 255, 1)');
gradient.addColorStop(0.2, 'rgba(0, 255, 255, 1)');
gradient.addColorStop(0.6, 'rgba(0, 0, 64, 1)');
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, canvas.width, canvas.height);
let texture = new THREE.Texture(canvas);
texture.needsUpdate = true;
return texture;
}
/* 性能插件 */
function initStats() {
let stats = new Stats();
document.body.appendChild(stats.domElement);
return stats;
}
/* 窗口变动触发 */
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
/* 数据更新 */
function update() {
stats.update();
group.rotation.y += 0.01;
}
/* 初始化 */
function init() {
initScene();
initCamera();
initRender();
initLight();
initControls();
initContent();
/* 监听事件 */
window.addEventListener('resize', onWindowResize, false);
}
/* 循环渲染 */
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
update();
}
/* 初始加载 */
(function () {
console.log("three init start...");
init();
animate();
console.log("three init send...");
})();
</script>
</body>
</html>
阅读更多
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 73- three.js 笔记 - 通过 Reflector.js 创建镜面反射
- 62 - three.js 笔记 - 通过 morphTargetInfluence属性创建动画
- 71 - three.js 笔记 - 使用 CubeCamera 创建反光效果
- 70 - three.js 笔记 - 使用环境贴图 创建虚假的反光效果
- 53 - three.js 笔记 - 从 PLY 模型中创建粒子系统
- Thressjs开发笔记之八创建、加载高级网格和几何体
- 68 - three.js 笔记 - 使用法向贴图 normalMap 创建更加细致的凹凸皱纹
- 46 - three.js 笔记 - 通过球形贴图实现全景浏览
- 47 - three.js 笔记 - 通过 CSS3DRenderer 实现全景浏览
- [译] THREE.JS入门教程-4.创建粒子系统
- 56 - three.js 笔记 - 通过 Tween.js 维护粒子位移
- 69 - three.js 笔记 - 使用光照贴图 lightMap 创建假阴影
- aframe.js通过three.js的THREE.PlaneGeometry创建随机山地地形
- 67 - three.js 笔记 - 使用 bumpMap 凹凸贴图创建皱纹
- 75 - three.js 笔记 - 通过透明渲染设置背景图片
- JS编程艺术笔记(3)-动态创建标记
- [Js笔记]Ajax通过GET方式与PHP进行交互
- Three.js源码阅读笔记(光照部分)
- [刷题笔记]codeforces 44B - 通过判定减少循环层数。
- web前端-js通过object创建对象