作者:桑榆
QQ:934440653
有问题,评论留言,或qq联系
案例效果
主要代码讲解
(1)看看源码中:new THREE.Points(geometry,material);
new THREE.PointsMaterial({color:0x00FF00,size:3})的使用
(2)这里要注意的只要一点,就是将模型的顶点数据与粒子系统的材质融合即可。
var fbxLoader = new THREE.FBXLoader();
fbxLoader.load('./model/Dancing.fbx',function(model){
model.name = 'Dancing';
model.traverse(function(child){
if(child.isMesh){
var Dancing = new THREE.Points(child.geometry,new THREE.PointsMaterial({color:0x00FF00,size:3}));
Dancing.scale.x = 10;
Dancing.scale.y = 10;
Dancing.scale.z = 10;
Dancing.position.x = 200;
group.add(Dancing);
}
})
// mixer = new THREE.AnimationMixer(model);
// var action = mixer.clipAction( model.animations[ 0 ] );
// action.setDuration(18).play();
// group.add(model);
},function (xhr){
if ( xhr.lengthComputable ) {
var percentComplete = xhr.loaded / xhr.total * 100;
console.log( '当前加载进度:' + Math.round( percentComplete, 2 ) + '% ' );
}
},function(error){
console.error(error);
})
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>粒子系统</title>
<style>
*{
padding: 0;
margin: 0;
}
html,body{
height: 100%;
width: 100%;
}
#webGL{
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<script src="../buildJs/build/three105.js"></script>
<script src="../buildJs/libs/inflate.min.js"></script>
<script src="../buildJs/loader/FBXLoader.js"></script>
<script src="../buildJs/loader/OBJLoader.js"></script>
<script src="../buildJs/controls/OrbitControls.js"></script>
<div id="webGL"></div>
<script>
var scene,camera,renderer;
var ambientLight,directionalLight;
var dom,domWidth,domHeight;
var mixer;
var clock = new THREE.Clock();
function initRender(){
dom = document.getElementById('webGL');
domWidth = dom.clientWidth;
domHeight = dom.clientHeight;
renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(domWidth,domHeight);
renderer.setPixelRatio(window.devicePixelRatio);
dom.appendChild(renderer.domElement);
renderer.setClearColor(0xffffff,1.0);
}
function initScene(){
scene = new THREE.Scene();
scene.background = new THREE.Color(0x000000);
}
function initLight(){
ambientLight = new THREE.AmbientLight(0x404040,1.0);
scene.add(ambientLight);
directionalLight = new THREE.DirectionalLight(0xffffff,0.8);
directionalLight.position.set(-300,500,500);
directionalLight.lookAt(scene.position);
scene.add(directionalLight);
}
function initCamera(){
camera = new THREE.PerspectiveCamera(45,domWidth / domHeight,1,30000);
camera.position.set(0,1000,7000);
camera.lookAt(scene.position);
scene.add(camera);
}
function listenWindow(){
window.addEventListener('resize',onWindow,'false');
function onWindow (){
domWidth = window.innerWidth;
domHeight = window.innerHeight;
camera.aspect = domWidth / domHeight;
renderer.setSize(domWidth , domHeight);
camera.updateProjectionMatrix();
}
}
function OrbitControlsEvent(){
var controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.target.set( 0, 100, 0 );
controls.update();
}
function animate(){
var delta = clock.getDelta();
if(mixer) mixer.update(delta);
requestAnimationFrame(animate);
renderer.render(scene,camera);
}
function initObject(){
var group = new THREE.Group();
scene.add(group);
var fbxLoader = new THREE.FBXLoader();
fbxLoader.load('./model/Dancing.fbx',function(model){
model.name = 'Dancing';
model.traverse(function(child){
if(child.isMesh){
var Dancing = new THREE.Points(child.geometry,new THREE.PointsMaterial({color:0x00FF00,size:3}));
Dancing.scale.x = 10;
Dancing.scale.y = 10;
Dancing.scale.z = 10;
Dancing.position.x = 200;
group.add(Dancing);
}
})
// mixer = new THREE.AnimationMixer(model);
// var action = mixer.clipAction( model.animations[ 0 ] );
// action.setDuration(18).play();
// group.add(model);
},function (xhr){
if ( xhr.lengthComputable ) {
var percentComplete = xhr.loaded / xhr.total * 100;
console.log( '当前加载进度:' + Math.round( percentComplete, 2 ) + '% ' );
}
},function(error){
console.error(error);
})
var objLoader = new THREE.OBJLoader();
objLoader.load('./model/male02.obj',function(model){
model.name = 'WaltHead';
model.traverse(function(child){
if(child.isMesh){
var WaltHead = new THREE.Points(child.geometry,new THREE.PointsMaterial({color:0x0000FF,size:3}));
WaltHead.scale.x = 10;
WaltHead.scale.y = 10;
WaltHead.scale.z = 10;
WaltHead.position.x = -1000;
group.add(WaltHead);
}
})
},function (xhr){
console.log( (xhr.loaded / xhr.total) * 100 +'%' );
},function(error){
console.error(error);
})
var plane = new THREE.PlaneBufferGeometry(15000,15000,60,60);
var planeMesh = new THREE.Points(plane,new THREE.PointsMaterial({color:0xFF0000,size:10}));
planeMesh.rotation.x = -Math.PI /2;
planeMesh.position.y = -200;
group.add(planeMesh);
}
initRender();
initScene();
initLight();
initCamera();
listenWindow();
OrbitControlsEvent();
animate();
initObject();
</script>
</body>
</html>