Vector 三点和五彩纸屑
我正试图制造一个五彩纸屑爆炸，但我在投射五彩纸屑时遇到了问题。我的想法是在各个方向（1秒）快速向外爆炸，然后五彩纸屑漂浮到地面上。我肯定我的数学是错的，因为我没有把它展开 我使用了三个.js代码并制作了一些mod： 欢迎提出任何建议。我是三点的noob.js。。。但是我喜欢图书馆 代码：Vector 三点和五彩纸屑,vector,three.js,Vector,Three.js,我正试图制造一个五彩纸屑爆炸，但我在投射五彩纸屑时遇到了问题。我的想法是在各个方向（1秒）快速向外爆炸，然后五彩纸屑漂浮到地面上。我肯定我的数学是错的，因为我没有把它展开 我使用了三个.js代码并制作了一些mod： 欢迎提出任何建议。我是三点的noob.js。。。但是我喜欢图书馆 代码： var容器，stats； 摄像机、控件、场景、投影仪、渲染器； var objects=[]，平面； var-vel=1； var vel2=0.01； var-accel=.3； var accel2=-
var容器，stats；
摄像机、控件、场景、投影仪、渲染器；
var objects=[]，平面；
var-vel=1；
var vel2=0.01；
var-accel=.3；
var accel2=-0.9；
var力=1；
var帧=0；
var mouse=new THREE.Vector2（），
偏移量=新的3.Vector3（），
交叉的，选定的；
init（）；
制作动画（）；
函数init（）{
container=document.createElement（'div'）；
文件.正文.附件（容器）；
摄像头=新的三个透视摄像头（70，window.innerWidth/window.innerHeight，11000）；
摄像机位置z=1000；
/*//控件=新的三个轨迹球控件（摄像头）；
controls.rotateSpeed=1.0；
controls.zoomSpeed=1.2；
控制点速度=0.8；
controls.noZoom=false；
controls.noPan=false；
controls.staticMoving=true；
controls.dynamicDampingFactor=0.3*/
场景=新的三个。场景（）；
添加（新的三个环境光（0x50505））；
var灯光=新的三点聚光灯（0xffffff，1.5）；
光。位置。设置（05002000）；
light.castShadow=true；
light.shadowCameraNear=200；
light.shadowCameraFar=camera.far；
light.shadowCameraFov=50；
light.shadowBias=-0.00022；
明暗度=0.5；
light.shadowMapWidth=2048；
light.shadowmapeight=2048；
场景。添加（灯光）；
var几何=新的三立方测量法（40,40,40）；
//为粒子系统制作彩色纸屑
对于（变量i=0；i<100；i++）{
var object=new THREE.Mesh（几何体，new THREE.MeshLambertMaterial（{color:Math.random（）*0xffffff}））；
//object.material.ambient=object.material.color；
/*object.position.x=Math.random（）*500-100；
object.position.y=Math.random（）*500-100；
object.position.z=300*/
object.position.x=Math.random（）*100-100；
object.position.y=Math.random（）*100-100；
object.position.z=300；
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=.1；
object.scale.y=Math.random（）*.8+.1；
object.scale.z=Math.random（）*.5+.1；
object.castShadow=false；
object.receiveShadow=true；
场景。添加（对象）；
对象。推（对象）；
}
plane=new THREE.Mesh（new THREE.PlaneGeometry（2000,2000,8,8），new THREE.MeshBasicMaterial（{颜色：0x000000，不透明度：0.25，透明：真，线框：真}））；
平面可见=假；
场景。添加（平面）；
投影仪=新的三个投影仪（）；
renderer=new THREE.WebGLRenderer（{antialas:true}）；
renderer.sortObjects=false；
renderer.setSize（window.innerWidth、window.innerHeight）；
renderer.shadowMapEnabled=true；
renderer.shadowMapType=THREE.PCFShadowMap；
container.appendChild（renderer.doElement）；
var info=document.createElement（'div'）；
info.style.position='绝对'；
info.style.top='10px'；
info.style.width='100%'；
info.style.textAlign='center'；
info.innerHTML='webgl-可拖动的多维数据集'；
container.appendChild（info）；
}
函数设置粒子动画（帧）{
//将更新每个粒子
如果（帧<50）{
var pCount=objects.length-1；
如果（帧<40）{
水平+=加速度*2；
}否则{
水平=水平+加速度2；
}
而（pCount>-1）{
如果（帧<30）{
对象[pCount].position.y+=vel；
}否则{
对象[pCount].position.y-=vel；
}
//对象[pCount].rotation.x+=Math.random（）*.7；
//对象[pCount].rotation.z+=Math.random（）*.01；
//对象[pCount].rotation.y+=Math.random（）*.01；
pCount--；
}
}
}
函数animate（）{
请求动画帧（动画）；
设置_粒子（帧）的动画；
render（）；
//stats.update（）；
}
函数render（）{
渲染器。渲染（场景、摄影机）；
frame++；
}
var container, stats;
var camera, controls, scene, projector, renderer;
var objects = [], plane;
var vel = 1;
var vel2 = 0.01;
var accel = .3;
var accel2 = -.9;
var force = 1;
var frame = 0;
var mouse = new THREE.Vector2(),
offset = new THREE.Vector3(),
INTERSECTED, SELECTED;
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = 1000;
/*//controls = new THREE.TrackballControls( camera );
controls.rotateSpeed = 1.0;
controls.zoomSpeed = 1.2;
controls.panSpeed = 0.8;
controls.noZoom = false;
controls.noPan = false;
controls.staticMoving = true;
controls.dynamicDampingFactor = 0.3;*/
scene = new THREE.Scene();
scene.add( new THREE.AmbientLight( 0x505050 ) );
var light = new THREE.SpotLight( 0xffffff, 1.5 );
light.position.set( 0, 500, 2000 );
light.castShadow = true;
light.shadowCameraNear = 200;
light.shadowCameraFar = camera.far;
light.shadowCameraFov = 50;
light.shadowBias = -0.00022;
light.shadowDarkness = 0.5;
light.shadowMapWidth = 2048;
light.shadowMapHeight = 2048;
scene.add( light );
var geometry = new THREE.CubeGeometry( 40, 40, 40 );
//make confetti for particle system
for ( var i = 0; i < 100; i ++ ) {
var object = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: Math.random() * 0xffffff } ) );
//object.material.ambient = object.material.color;
/*object.position.x = Math.random() * 500 - 100;
object.position.y = Math.random() * 500 - 100;
object.position.z = 300;*/
object.position.x = Math.random() * 100 - 100;
object.position.y = Math.random() * 100 - 100;
object.position.z = 300;
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 = .1;
object.scale.y = Math.random() * .8 + .1;
object.scale.z = Math.random() * .5 + .1;
// give every "particle" a random expanding direction vector and normalize it to receive a length of 1.
object.directionVector = new THREE.Vector3( Math.random() - .5, Math.random() - .5, Math.random() - .5 )
object.directionVector.normalize();
// and a random expanding Speed
object.expandingSpeed = Math.random() * 100;
object.castShadow = false;
object.receiveShadow = true;
scene.add( object );
objects.push( object );
}
plane = new THREE.Mesh( new THREE.PlaneGeometry( 2000, 2000, 8, 8 ), new THREE.MeshBasicMaterial( { color: 0x000000, opacity: 0.25, transparent: true, wireframe: true } ) );
plane.visible = false;
scene.add( plane );
projector = new THREE.Projector();
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.sortObjects = false;
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.shadowMapEnabled = true;
renderer.shadowMapType = THREE.PCFShadowMap;
container.appendChild( renderer.domElement );
var info = document.createElement( 'div' );
info.style.position = 'absolute';
info.style.top = '10px';
info.style.width = '100%';
info.style.textAlign = 'center';
info.innerHTML = '<a href="http://threejs.org" target="_blank">three.js</a> webgl - draggable cubes';
container.appendChild( info );
}
function animate_particles(frame) {
//will update each particle
if (frame < 50){
var pCount = objects.length-1;
if (frame < 40){
vel += accel*2;
}else {
vel = vel + accel2;
}
while(pCount > -1) {
if (frame < 30){
// commented that out. not sure why you put it there.
//objects[pCount].position.y += vel;
// move objects along random direction vector at the individual random speed.
objects[pCount].position.x += objects[pCount].directionVector.x * objects[pCount].expandingSpeed;
objects[pCount].position.y += objects[pCount].directionVector.y * objects[pCount].expandingSpeed;
objects[pCount].position.z += objects[pCount].directionVector.z * objects[pCount].expandingSpeed;
}else{
objects[pCount].position.y -= vel;
}
//objects[pCount].rotation.x += Math.random()*.7;
//objects[pCount].rotation.z += Math.random()*.01;
//objects[pCount].rotation.y += Math.random()*.01;
pCount--;
}
}
}
function animate() {
requestAnimationFrame( animate );
animate_particles(frame);
render();
//stats.update();
}
function render() {
renderer.render( scene, camera );
frame++;
}
var容器，stats；
摄像机、控件、场景、投影仪、渲染器；
var objects=[]，平面；
var-vel=1；
var vel2=0.01；
var-accel=.3；
var accel2=-0.9；
var力=1；
var帧=0；
var mouse=new THREE.Vector2（），
偏移量=新的3.Vector3（），
交叉的，选定的；
init（）；
制作动画（）；
函数init（）{
container=document.createElement（'div'）；
document.body.appendChild（续
var container, stats;
var camera, controls, scene, projector, renderer;
var objects = [], plane;
var vel = 1;
var vel2 = 0.01;
var accel = .3;
var accel2 = -.9;
var force = 1;
var frame = 0;
var mouse = new THREE.Vector2(),
offset = new THREE.Vector3(),
INTERSECTED, SELECTED;
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = 1000;
/*//controls = new THREE.TrackballControls( camera );
controls.rotateSpeed = 1.0;
controls.zoomSpeed = 1.2;
controls.panSpeed = 0.8;
controls.noZoom = false;
controls.noPan = false;
controls.staticMoving = true;
controls.dynamicDampingFactor = 0.3;*/
scene = new THREE.Scene();
scene.add( new THREE.AmbientLight( 0x505050 ) );
var light = new THREE.SpotLight( 0xffffff, 1.5 );
light.position.set( 0, 500, 2000 );
light.castShadow = true;
light.shadowCameraNear = 200;
light.shadowCameraFar = camera.far;
light.shadowCameraFov = 50;
light.shadowBias = -0.00022;
light.shadowDarkness = 0.5;
light.shadowMapWidth = 2048;
light.shadowMapHeight = 2048;
scene.add( light );
var geometry = new THREE.CubeGeometry( 40, 40, 40 );
//make confetti for particle system
for ( var i = 0; i < 100; i ++ ) {
var object = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: Math.random() * 0xffffff } ) );
//object.material.ambient = object.material.color;
/*object.position.x = Math.random() * 500 - 100;
object.position.y = Math.random() * 500 - 100;
object.position.z = 300;*/
object.position.x = Math.random() * 100 - 100;
object.position.y = Math.random() * 100 - 100;
object.position.z = 300;
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 = .1;
object.scale.y = Math.random() * .8 + .1;
object.scale.z = Math.random() * .5 + .1;
// give every "particle" a random expanding direction vector and normalize it to receive a length of 1.
object.directionVector = new THREE.Vector3( Math.random() - .5, Math.random() - .5, Math.random() - .5 )
object.directionVector.normalize();
// and a random expanding Speed
object.expandingSpeed = Math.random() * 100;
object.castShadow = false;
object.receiveShadow = true;
scene.add( object );
objects.push( object );
}
plane = new THREE.Mesh( new THREE.PlaneGeometry( 2000, 2000, 8, 8 ), new THREE.MeshBasicMaterial( { color: 0x000000, opacity: 0.25, transparent: true, wireframe: true } ) );
plane.visible = false;
scene.add( plane );
projector = new THREE.Projector();
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.sortObjects = false;
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.shadowMapEnabled = true;
renderer.shadowMapType = THREE.PCFShadowMap;
container.appendChild( renderer.domElement );
var info = document.createElement( 'div' );
info.style.position = 'absolute';
info.style.top = '10px';
info.style.width = '100%';
info.style.textAlign = 'center';
info.innerHTML = '<a href="http://threejs.org" target="_blank">three.js</a> webgl - draggable cubes';
container.appendChild( info );
}
function animate_particles(frame) {
//will update each particle
if (frame < 50){
var pCount = objects.length-1;
if (frame < 40){
vel += accel*2;
}else {
vel = vel + accel2;
}
while(pCount > -1) {
if (frame < 30){
// commented that out. not sure why you put it there.
//objects[pCount].position.y += vel;
// move objects along random direction vector at the individual random speed.
objects[pCount].position.x += objects[pCount].directionVector.x * objects[pCount].expandingSpeed;
objects[pCount].position.y += objects[pCount].directionVector.y * objects[pCount].expandingSpeed;
objects[pCount].position.z += objects[pCount].directionVector.z * objects[pCount].expandingSpeed;
}else{
objects[pCount].position.y -= vel;
}
//objects[pCount].rotation.x += Math.random()*.7;
//objects[pCount].rotation.z += Math.random()*.01;
//objects[pCount].rotation.y += Math.random()*.01;
pCount--;
}
}
}
function animate() {
requestAnimationFrame( animate );
animate_particles(frame);
render();
//stats.update();
}
function render() {
renderer.render( scene, camera );
frame++;
}
var confetti = new ExplosionConfetti({
rate: 1, // percent of explosion in every tick - smaller is fewer - be careful, larger than 10 may crash your browser!
amount: 200, // max amount particle of an explosion
radius: 800, // max radius of an explosion
areaWidth: 500, // width of the area
areaHeight: 500, // height of the area
fallingHeight: 500, // start exploding from Y position
fallingSpeed: 1, // max falling speed
colors: [0xffffff, 0xff0000, 0xffff00] // random colors
});
scene.add( confetti.object );