jsfiddle here
I create a material with a default color, in this case 0xffffff.
Then later, I want to change the color. I can't figure out where to change it - particle.color = 0xffffff * Math.random(); doesn't work. There is no particle.color, but there is a particle.material.color, which if I change gives me an error.
Do I need to create new materials for every sprite? Is there a way I can simply change the color of a THREE.Sprite?
var material = new THREE.SpriteCanvasMaterial({
color: 0xffffff,
program: function (context) {
context.beginPath();
context.arc(0, 0, 0.5, 0, PI2, true);
context.fill();
}
});
for (var i = 0; i < 50; i++) {
particle = new THREE.Sprite(material);
particle.position.x = Math.random() * 2 - 1;
particle.position.y = Math.random() * 2 - 1;
particle.position.z = Math.random() * 2 - 1;
particle.position.normalize();
particle.position.multiplyScalar(Math.random() * 10 + 450);
particle.scale.x = particle.scale.y = 20;
particle.color = 0xffffff * Math.random();
scene.add(particle);
}
particle.material.color = new THREE.Color(0x0066CC);
or
particle.material.color.set(0x0066CC); Threejs: R.73
from the docs:
http://threejs.org/docs/#Reference/Math/Color
Related
I am learning Three.js and trying to reproduce some cool effects as a training method.
I have a Obj file globe which I want to add some particles interaction to.
my work so far : https://codepen.io/Imsenji/pen/QWOBMWN?editors=0010
What I'm trying to do: https://dala.craftedbygc.com/ ( or similar)
this is my code :
// OBJ model
const obj = new OBJLoader();
obj.load("https://res.cloudinary.com/dltqzyazm/raw/upload/v1648118569/2dgame/globe2_gl4laq.obj", function (object) {
let material = new THREE.PointsMaterial({
color: colour,
size: 0.035,
// map: cross,
});
let mesh = new THREE.Points(object.children[0].geometry, material);
mesh.scale.multiplyScalar(0.025);
mesh.rotation.y = 2 * Math.PI * 0.7;
mesh.position.x = objectsDistance * 0.5;
mesh.position.y = -objectsDistance * 0.1;
scene.add(mesh);
});
//----------------------
* Particles
*/
// Geometry
const particlesCount = 1000;
const positions = new Float32Array(particlesCount * 3);
for (let i = 0; i < particlesCount; i++) {
positions[i * 3 + 0] = (Math.random() - 0.5) * 10;
positions[i * 3 + 1] =
objectsDistance * 0.5 -
Math.random() * objectsDistance * sectionMeshes.length;
positions[i * 3 + 2] = (Math.random() - 0.5) * 10;
}
const particlesGeometry = new THREE.BufferGeometry();
particlesGeometry.setAttribute(
"position",
new THREE.BufferAttribute(positions, 3)
);
// Material
const particlesMaterial = new THREE.PointsMaterial({
color: "#c0a43c",
sizeAttenuation: true,
size: 0.2,
transparent: true,
map: cross,
});
// Points
const particles = new THREE.Points(particlesGeometry, particlesMaterial);
scene.add(particles);
// // Interaction
var uniforms = {
mouse: {
value: new THREE.Vector3(),
},
radius: {
value: 3.5,
},
};
material.onBeforeCompile = (shader) => {
shader.uniforms.mouse = uniforms.mouse;
shader.uniforms.radius = uniforms.radius;
// console.log(shader.vertexShader);
shader.vertexShader =
`
uniform vec3 mouse;
uniform float radius;
` + shader.vertexShader;
shader.vertexShader = shader.vertexShader.replace(
`#include <begin_vertex>`,
`#include <begin_vertex>
vec3 dir = transformed - mouse;
float dist = length(dir);
if (dist < radius){
float ratio = 1. - dist / radius;
vec3 shift = dir * 2. * (ratio * ratio);
transformed += shift;
}
`
);
};
var plane = new THREE.Plane(new THREE.Vector3(0, 0, 1), 0);
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
window.addEventListener("mousemove", (event) => {
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
raycaster.setFromCamera(mouse, camera);
raycaster.ray.intersectPlane(plane, uniforms.mouse.value);
});
it seems like raycaster.ray.intersectPlane(plane, uniforms.mouse.value); not working. that's my question.
any help/advice would be appreciated.
I've been trying to generate a particle system recently and I've been struggling to get it to work as it's based from an outdated version of three.js, it isn't appearing in the scene and I'm not sure why. It's probably obvious to why but I'm not that good at this.
var particleCount = 1800,
particles = new THREE.Geometry(),
pMaterial = new THREE.PointsMaterial({
size: 20,
map: THREE.TextureLoader("x.png"),
blending: THREE.AdditiveBlending,
transparent: true
});
var particleCount = 500,
particleSystem;
init();
render();
function init() {
for (var p = 0; p < particleCount; p++) {
(pX = Math.random() * 500 - 250),
(pY = Math.random() * 500 - 250),
(pZ = Math.random() * 500 - 250),
(particle = new THREE.Vector3(new THREE.Vector3(pX, pY, pZ)));
particle.velocity = new THREE.Vector3(0, Math.random(), 0);
particles.vertices.push(particle);
}
particleSystem = new THREE.Points(particles, pMaterial);
particleSystem.sortParticles = true;
scene.add(particleSystem);
particleSystem.position.set(0, 0, 0);
particleSystem.scale.set(100, 100, 100);
}
function update() {
particleSystem.rotation.y += 0.01;
pCount = particleCount;
while (pCount--) {
particle = particles.vertices[pCount];
if (particle.y < -200) {
particle.y = 200;
particle.velocity.y = 0;
}
particle.velocity.y -= Math.random() * 0.1;
particle.add(particle.velocity);
}
particleSystem.geometry.__dirtyVertices = true;
renderer.render(scene, camera);
}
I might be missing a few things as this is a few lines I had to pick out from a few hundred.
(I'm new here so please don't bully me for awful structure.)
Thanks in advance for anyone who responds.
map: THREE.TextureLoader("x.png"), should be map: new THREE.TextureLoader().load("x.png"),
particle = new THREE.Vector3(new THREE.Vector3(pX, pY, pZ)); should be particle = new THREE.Vector3(pX, pY, pZ);
particleSystem.geometry.__dirtyVertices = true; is outdated, you have to use particleSystem.geometry.verticesNeedUpdate = true;
Add depthTest: false to points material
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 0, 400);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var particleCount = 1800,
particles = new THREE.Geometry(),
pMaterial = new THREE.PointsMaterial({
size: 20,
map: new THREE.TextureLoader().load("https://threejs.org/examples/textures/sprites/circle.png"),
blending: THREE.AdditiveBlending,
transparent: true,
depthTest: false
});
var particleCount = 500,
particleSystem;
for (var p = 0; p < particleCount; p++) {
pX = Math.random() * 500 - 250,
pY = Math.random() * 500 - 250,
pZ = Math.random() * 500 - 250,
particle = new THREE.Vector3(pX, pY, pZ);
particle.velocity = new THREE.Vector3(0, Math.random(), 0);
particles.vertices.push(particle);
}
particleSystem = new THREE.Points(particles, pMaterial);
scene.add(particleSystem);
function update() {
particleSystem.rotation.y += 0.01;
pCount = particleCount;
while (pCount--) {
particle = particles.vertices[pCount];
if (particle.y < -200) {
particle.y = 200;
particle.velocity.y = 0;
}
particle.velocity.y -= Math.random() * .1;
particle.add(particle.velocity);
}
particleSystem.geometry.verticesNeedUpdate = true;
}
renderer.setAnimationLoop(() => {
update();
renderer.render(scene, camera);
});
body {
overflow: hidden;
margin: 0;
}
<script src="https://threejs.org/build/three.js"></script>
I have rendered a gltf object in three.js, but the issue is I don't think it contains a mesh. I want to use a ray caster to move the object with an on click event handler. I have all the code in place to do this, but it doesn't register when I click.
Code to load the object:
var loader = new THREE.GLTFLoader();
loader.load(
// resource URL
'./vitra_eames_plastic_chair/scene.gltf',
// called when the resource is loaded
function ( object ) {
object.animations; // Array<THREE.AnimationClip>
object.scene; // THREE.Scene
object.scenes; // Array<THREE.Scene>
object.cameras; // Array<THREE.Camera>
object.asset; // Object
var object = new THREE.Mesh(gltf.asset, new THREE.MeshLambertMaterial({ color: Math.random() * 0xffffff }));
object.scene.position.x = -75;
object.scene.position.y = -75;
object.scene.position.z = -75;
object.scene.rotation.x = 50;
object.scene.rotation.y = 50;
object.scene.rotation.z = 50;
object.scene.scale.x = .5;
object.scene.scale.y = .5;
object.scene.scale.z = .5;
object.scene.castShadow = true;
object.scene.receiveShadow = true;
boxScene.add(object.scene);
objects.push(object.scene);
},
// called while loading is progressing
function ( xhr ) {
console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
},
// called when loading has errors
function ( error ) {
console.log( 'An error happened' );
}
);
I also have this code, which generates boxes. Here, the event handler works, but obviously the object were loaded differently. Any advice would be greatly appreciated.
var geometry = new THREE.BoxGeometry(1, 1, 1);
for (var i = 0; i < 50; i++) {
var object = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({ color: Math.random() * 0xffffff }));
object.position.x = Math.random() * 50 - 25;
object.position.y = Math.random() * 10 + 1;
object.position.z = Math.random() * 50 - 25;
object.rotation.x = Math.random() * 2 * Math.PI;
object.rotation.y = Math.random() * 2 * Math.PI;
object.rotation.z = Math.random() * 2 * Math.PI;
object.scale.x = Math.random() * 3 + 1;
object.scale.y = Math.random() * 3 + 1;
object.scale.z = Math.random() * 3 + 1;
object.castShadow = true;
object.receiveShadow = true;
boxScene.add(object);
objects.push(object);
}
I think you have to change your onLoad() callback of GLTFLoader.load() to fix the problem. You are creating a mesh with object.asset which is not correct. Instead, you can add object.scene directly to your scene graph. So in most cases the callback can simply be like this:
var loader = new THREE.GLTFLoader();
loader.load( function( gltf ) {
scene.add( gltf.scene );
) };
Check out the source code of the following example to see this approach in action.
https://threejs.org/examples/webgl_loader_gltf.html
I came across this truly excellent example of how to implement billboarding via a vertex shader to offload the hard work of drawing and rotating a large number of labels to always face the camera.
var scene;
var book;
var shaderMaterial;
var renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setClearColor(0x000000);
document.body.appendChild(renderer.domElement);
var camera = new THREE.PerspectiveCamera(55, 1, 0.1, 40000);
window.onresize = function () {
renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
};
window.onresize();
scene = new THREE.Scene();
camera.position.z = 25;
camera.position.y = 15;
scene.add(camera);
var grid = new THREE.GridHelper(100, 10);
scene.add(grid);
var controls = new THREE.OrbitControls(camera);
controls.damping = 0.2;
var lettersPerSide = 16;
function createGlpyhSheet() {
var fontSize = 64;
var c = document.createElement('canvas');
c.width = c.height = fontSize * lettersPerSide;
var ctx = c.getContext('2d');
ctx.font = fontSize + 'px Monospace';
var i = 0;
for (var y = 0; y < lettersPerSide; y++) {
for (var x = 0; x < lettersPerSide; x++, i++) {
var ch = String.fromCharCode(i);
ctx.fillText(ch, x * fontSize, -(8 / 32) * fontSize + (y + 1) * fontSize);
}
}
var tex = new THREE.Texture(c);
tex.flipY = false;
tex.needsUpdate = true;
return tex;
}
function createLabels(textArrays, positions) {
//console.log(textArrays, positions);
var master_geometry = new THREE.Geometry();
for (var k = 0; k < textArrays.length; k++) {
var geo = new THREE.Geometry();
geo.dynamic = true;
var str = textArrays[k];
var vec = positions[k];
//console.log(shaderMaterial);
//console.log('str is', str, 'vec is', vec);
var j = 0,
ln = 0;
for (i = 0; i < str.length; i++) {
//console.log('creating glyph', str[i]);
var code = str.charCodeAt(i);
var cx = code % lettersPerSide;
var cy = Math.floor(code / lettersPerSide);
var oneDotOne = .55;
geo.vertices.push(
new THREE.Vector3(j * oneDotOne + 0.05, ln * oneDotOne + 0.05, 0),
new THREE.Vector3(j * oneDotOne + 1.05, ln * oneDotOne + 0.05, 0),
new THREE.Vector3(j * oneDotOne + 1.05, ln * oneDotOne + 1.05, 0),
new THREE.Vector3(j * oneDotOne + 0.05, ln * oneDotOne + 1.05, 0));
shaderMaterial.attributes.labelpos.value.push(vec);
shaderMaterial.attributes.labelpos.value.push(vec);
shaderMaterial.attributes.labelpos.value.push(vec);
shaderMaterial.attributes.labelpos.value.push(vec);
var face = new THREE.Face3(i * 4 + 0, i * 4 + 1, i * 4 + 2);
geo.faces.push(face);
face = new THREE.Face3(i * 4 + 0, i * 4 + 2, i * 4 + 3);
geo.faces.push(face);
var ox = (cx + 0.05) / lettersPerSide;
var oy = (cy + 0.05) / lettersPerSide;
var off = 0.9 / lettersPerSide;
geo.faceVertexUvs[0].push([
new THREE.Vector2(ox, oy + off),
new THREE.Vector2(ox + off, oy + off),
new THREE.Vector2(ox + off, oy)]);
geo.faceVertexUvs[0].push([
new THREE.Vector2(ox, oy + off),
new THREE.Vector2(ox + off, oy),
new THREE.Vector2(ox, oy)]);
if (code == 10) {
ln--;
j = 0;
} else {
j++;
}
}
// i can only get this working with merge.
// Building one giant geometry doesn't work for some reason
master_geometry.merge(geo);
}
console.log(shaderMaterial);
shaderMaterial.attributes.labelpos.needsUpdate = true;
book = new THREE.Mesh(
master_geometry,
shaderMaterial);
//book.doubleSided = true;
scene.add(book);
}
var uniforms = {
map: {
type: "t",
value: createGlpyhSheet()
}
};
var attributes = {
labelpos: {
type: 'v3',
value: []
}
};
shaderMaterial = new THREE.ShaderMaterial({
attributes: attributes,
uniforms: uniforms,
vertexShader: document.querySelector('#vertex').textContent,
fragmentShader: document.querySelector('#fragment').textContent
});
shaderMaterial.transparent = true;
shaderMaterial.depthTest = false;
strings = [];
vectors = [];
var sizeOfWorld = 100;
var halfSize = sizeOfWorld * 0.5;
for (var i = 0; i < 500; i++) {
strings.push('test' + i);
var vector = new THREE.Vector3();
vector.x = Math.random() * sizeOfWorld - halfSize;
vector.y = Math.random() * sizeOfWorld - halfSize;
vector.z = Math.random() * sizeOfWorld - halfSize;
vectors.push(vector);
}
console.log('creating labels');
createLabels(strings, vectors);
function animate() {
controls.update();
renderer.render(scene, camera);
requestAnimationFrame(animate, renderer.domElement);
}
animate();
html {
background-color: #ffffff;
}
* {
margin: 0;
padding: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/69/three.min.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/4862f5f1111346a957ac3e0cb0858be1568d0e03/examples/js/controls/OrbitControls.js"></script>
<script id="vertex" type="text/x-glsl-vert">
varying vec2 vUv;
attribute vec3 labelpos;
void main() {
vUv = uv;
gl_Position = projectionMatrix *
(modelViewMatrix * vec4(labelpos, 1) +
vec4(position.xy, 0, 0));
}
</script>
<script id="fragment" type="text/x-glsl-frag">
varying vec2 vUv;
uniform sampler2D map;
void main() {
vec4 diffuse = texture2D(map, vUv);
vec4 letters = mix(diffuse, vec4(1.0, 1.0, 1.0, diffuse.a), 1.0);
gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0) * letters;
}
</script>
The code was created before THREE js transitioned away from allowing attributes in uniforms, and enforcing we now use buffered Geometry instead. After some digging I found you can easily create a buffered Geometry from a standard geometry using:
buffGeometry = new THREE.BufferGeometry().fromGeometry( <my old Geometry object> );
How cool is that! - works a treat, however I cannot work out how or where to pass the long list of attribute vec3's to the shader to tell it where my mid point for each label should be, to achieve the same effect as the older example given.
Has anyone got any ideas on how to solve this? The example posted is exactly what I am after, but I really don't want to be stuck using an old version of THREE for the rest of time...
Many thanks for any suggestions :)
FR
So after much experimentation I figured it out myself - go me.
You convert the old Geometry object to a THREE.BufferGeometry() using the aforementioned fromGeometry() function, create an Float32Array array of the location of each labels x,y,z coordinates for each and every vertices and pass that array to the BufferGeometry via the addAttribute function, the shader knows both where to draw the labels and where to pivot when rotating the camera, re-creating the billboard effect using the latest version of THREE.js. 8) See working attached code example, hope someone else finds this useful! :)
var scene;
var book;
var shaderMaterial;
var stats;
var container;
container = document.createElement('div');
document.body.appendChild(container);
var renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setClearColor(0x000000);
document.body.appendChild(renderer.domElement);
var camera = new THREE.PerspectiveCamera(55, 1, 0.1, 40000);
window.onresize = function() {
renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
};
window.onresize();
scene = new THREE.Scene();
camera.position.z = 25;
camera.position.y = 15;
scene.add(camera);
var labelPosArray = [];
var grid = new THREE.GridHelper(100, 10);
scene.add(grid);
stats = new Stats();
container.appendChild(stats.dom);
container.appendChild(renderer.domElement);
var controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.damping = 0.2;
var lettersPerSide = 16;
function createGlpyhSheet() {
var fontSize = 64;
var c = document.createElement('canvas');
c.width = c.height = fontSize * lettersPerSide;
var ctx = c.getContext('2d');
ctx.font = fontSize + 'px Monospace';
var i = 0;
for (var y = 0; y < lettersPerSide; y++) {
for (var x = 0; x < lettersPerSide; x++, i++) {
var ch = String.fromCharCode(i);
ctx.fillText(ch, x * fontSize, -(8 / 32) * fontSize + (y + 1) * fontSize);
}
}
var tex = new THREE.Texture(c);
tex.flipY = false;
tex.needsUpdate = true;
return tex;
}
function createLabels(textArrays, positions) {
var master_geometry = new THREE.Geometry();
for (var k = 0; k < textArrays.length; k++) {
var geo = new THREE.Geometry();
geo.dynamic = true;
var str = textArrays[k];
var vec = positions[k];
var j = 0,
ln = 0;
for (i = 0; i < str.length; i++) {
var code = str.charCodeAt(i);
var cx = code % lettersPerSide;
var cy = Math.floor(code / lettersPerSide);
var oneDotOne = .55;
geo.vertices.push(
new THREE.Vector3(j * oneDotOne + 0.05, ln * oneDotOne + 0.05, 0),
new THREE.Vector3(j * oneDotOne + 1.05, ln * oneDotOne + 0.05, 0),
new THREE.Vector3(j * oneDotOne + 1.05, ln * oneDotOne + 1.05, 0),
new THREE.Vector3(j * oneDotOne + 0.05, ln * oneDotOne + 1.05, 0));
labelPosArray.push(vec);
labelPosArray.push(vec);
labelPosArray.push(vec);
labelPosArray.push(vec);
labelPosArray.push(vec);
labelPosArray.push(vec);
var face = new THREE.Face3(i * 4 + 0, i * 4 + 1, i * 4 + 2);
geo.faces.push(face);
face = new THREE.Face3(i * 4 + 0, i * 4 + 2, i * 4 + 3);
geo.faces.push(face);
var ox = (cx + 0.05) / lettersPerSide;
var oy = (cy + 0.05) / lettersPerSide;
var off = 0.9 / lettersPerSide;
geo.faceVertexUvs[0].push([
new THREE.Vector2(ox, oy + off),
new THREE.Vector2(ox + off, oy + off),
new THREE.Vector2(ox + off, oy)
]);
geo.faceVertexUvs[0].push([
new THREE.Vector2(ox, oy + off),
new THREE.Vector2(ox + off, oy),
new THREE.Vector2(ox, oy)
]);
if (code == 10) {
ln--;
j = 0;
} else {
j++;
}
}
master_geometry.merge(geo);
}
var lps = new Float32Array(labelPosArray.length * 3);
var cnt = 0;
for (i = 0; i < labelPosArray.length; i++) {
lps[cnt++] = labelPosArray[i].x;
lps[cnt++] = labelPosArray[i].y;
lps[cnt++] = labelPosArray[i].z;
} // for
buffGeometry = new THREE.BufferGeometry().fromGeometry(master_geometry);
buffGeometry.addAttribute('labelpos', new THREE.BufferAttribute(lps, 3));
book = new THREE.Mesh(
buffGeometry,
shaderMaterial);
scene.add(book);
}
var uniforms = {
map: {
type: "t",
value: createGlpyhSheet()
}
};
shaderMaterial = new THREE.ShaderMaterial({
uniforms: uniforms,
vertexShader: document.querySelector('#vertex').textContent,
fragmentShader: document.querySelector('#fragment').textContent
});
shaderMaterial.transparent = true;
shaderMaterial.depthTest = false;
strings = [];
vectors = [];
var sizeOfWorld = 100;
var halfSize = sizeOfWorld * 0.5;
for (var i = 0; i < 500; i++) {
strings.push('label ' + i);
var vector = new THREE.Vector3();
vector.x = Math.random() * sizeOfWorld - halfSize;
vector.y = Math.random() * sizeOfWorld - halfSize;
vector.z = Math.random() * sizeOfWorld - halfSize;
vectors.push(vector);
}
//console.log('creating labels');
createLabels(strings, vectors);
function animate() {
controls.update();
renderer.render(scene, camera);
requestAnimationFrame(animate, renderer.domElement);
stats.update();
}
animate();
html {
background-color: #ffffff;
}
* {
margin: 0;
padding: 0;
}
<script src="https://raw.githack.com/mrdoob/three.js/r124/build/three.js"></script>
<script src="https://raw.githack.com/mrdoob/three.js/r124/examples/js/controls/OrbitControls.js"></script>
<script src="https://raw.githack.com/mrdoob/three.js/r124/examples/js/libs/stats.min.js"></script>
<script id="vertex" type="text/x-glsl-vert">
varying vec2 vUv; attribute vec3 labelpos; void main() { vUv = uv; gl_Position = projectionMatrix * (modelViewMatrix * vec4(labelpos, 1) + vec4(position.xy, 0, 0)); }
</script>
<script id="fragment" type="text/x-glsl-frag">
varying vec2 vUv; uniform sampler2D map; void main() { vec4 diffuse = texture2D(map, vUv); vec4 letters = mix(diffuse, vec4(1.0, 1.0, 1.0, diffuse.a), 1.0); gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0) * letters; }
</script>
I have 2 spheres 1 inner and 1 outer sphere. on the outer sphere i have 128 particles/sprites.
i would like to move each sprite/particle out and away from the sphere to a certain distance.
The particles/sprites must act like an audio equalizer moving away from the sphere to a certain distance and the back to the rest position.
Please can you assist.
var geometryInner = new THREE.SphereGeometry(60, 32, 32);
geometryInner.applyMatrix( new THREE.Matrix4().makeScale( 1.0, 1.8, 1.0 ) );
//var geometryMid = new THREE.SphereGeometry(90, 32, 32);
var material = new THREE.ShaderMaterial({
uniforms: uniforms,
vertexShader: document.getElementById('vertexShaderGeneral').textContent,
fragmentShader: document.getElementById('fragmentShaderLineColors').textContent,
transparent: false
});
sphereInner = THREE.SceneUtils.createMultiMaterialObject( geometryInner, [
material,
new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true} )
]);
// sphereInner.rotation.x = 0.3;
// sphereInner.position.y = -30;
scene.add(sphereInner);
//
geometryOuter = new THREE.SphereGeometry(80, 32, 32);
geometryOuter.applyMatrix( new THREE.Matrix4().makeScale( 1.0, 1.8, 1.0 ) );
var materialOuter = new THREE.MeshLambertMaterial({color: 0xFF0000, transparent: true, opacity: 0.1});
var sphereOuter = new THREE.Mesh(geometryOuter, materialOuter);
scene.add(sphereOuter);
points = THREE.GeometryUtils.randomPointsInGeometry( geometryOuter, particleCount );
var pMaterial = new THREE.PointCloudMaterial({
color: 0xFFFFCC,
size: 20,
map: THREE.ImageUtils.loadTexture(
"particle.png"
),
blending: THREE.AdditiveBlending,
opacity : 0.8,
depthWrite : false,
transparent: true
});
// create the particle variables
particles = new THREE.Geometry();
// create the particle variables
// now create the individual particles
for (var p = 0; p < points.length; p++)
{
// create a particle with random
// position values, -250 -> 250
pX = points[p].x;
pY = points[p].y;
pZ = points[p].z;
// add it to the geometry
particles.vertices.push(point);
}
// create the particle system
particleSystem = new THREE.PointCloud(particles,
pMaterial);
// also update the particle system to
// sort the particles which enables
// the behaviour we want
particleSystem.sortParticles = true;
// add it to the scene
scene.add(particleSystem);
I have tried this...when i render. I just need some help.
function render()
{
var timer = 0.0001 * Date.now();
// add some rotation to the system
//particleSystem.rotation.y += boost * 0.0001;
var delta = clock.getDelta();
if(typeof array === 'object' && array.length > 0) {
var k = 0;
for(var i = 0; i < particleSystem.geometry.vertices.length ; i++) {
particleSystem.geometry.verticesNeedUpdate = true;
// particleSystem.position.z = boost/2;
particleSystem.geometry.vertices[k].z = array[i]/4 - 30;
// geometryOuter.applyMatrix( new THREE.Matrix4().makeScale( 2, 1.8, 1.0 ) );
// particleSystem.rotation.y += array[2] * 0.0000005 ;
// sphereInner.rotation.z -= array[0] * 0.0000005;
// sphereInner.position.z = boost/3;
sphereInner.rotation.y += array[0] * 0.0000005;
uniforms.time.value -= array[0] * 0.0000005;
uniformsPlane.time.value += array[1] * 0.0000008;
k += (k < array.length ? 1 : 0);
}
}
// uniforms2.time.value = clock.elapsedTime;
// camera.position.x += ( mouseX - camera.position.x ) * .05;
// camera.position.y += ( - mouseY - camera.position.y ) * .05;
camera.lookAt( scene.position );
renderText();
// renderer.clear();
effect.render( scene, camera );
}
Here is the fix...
if(typeof array === 'object' && array.length > 0) {
var k = 0;
for(var i = 0; i < particleSystem.geometry.vertices.length ; i++) {
particleSystem.geometry.verticesNeedUpdate = true;
// particleSystem.position.z = boost/2;
if(array[k] == 0)
{
particleSystem.geometry.vertices[k].z = points[k].z;
}
else if(points[k].z + array[k] + 100 < points[k].z)
{
particleSystem.geometry.vertices[k].z = points[k].z;
}
else
{
particleSystem.geometry.vertices[k].z = points[k].z + array[k] + 100;// * 0.1 - 60;
}
// particleSystem.geometry.vertices[k].x = -array[i];
// particleSystem.geometry.vertices[k].y = array[i];
// geometryOuter.applyMatrix( new THREE.Matrix4().makeScale( 2, 1.8, 1.0 ) );
// particleSystem.rotation.y += array[2] * 0.0000005 ;
// sphereInner.rotation.z -= array[0] * 0.0000005;
// sphereInner.position.z = boost/3;
sphereInner.rotation.y += array[0] * 0.0000005;
uniforms.time.value -= array[0] * 0.0000005;
uniformsPlane.time.value += array[1] * 0.0000008;
k += (k < array.length ? 1 : 0);
}
}