用这样方式绘制的其实是随机的小球。不是点,绘制的数量多会很消耗内存,后面会介绍three.js的粒子系统。
定义一个数组,通过push的方法存入点的三维坐标。
点的形式是三维向量。
<script type="text/javascript">
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000);
camera.position.set(-40,30,40);
camera.lookAt(scene.position);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth,window.innerHeight);
renderer.setClearColor(0x111111);
var sphereGeometry = new THREE.SphereGeometry(0.4,20,20);
var sphereMaterial = new THREE.MeshLambertMaterial({color:0xFF00FF});
var sphere = new THREE.Mesh(sphereGeometry,sphereMaterial);
sphere.position.set(0,0,0);
scene.add(sphere);
function pointPosition() {
var points = [];
for(var i=0;i<300;i++){
var randomX = -30+Math.round(Math.random()*60);
var randomY = -30+Math.round(Math.random()*60);
var randomZ = -30+Math.round(Math.random()*60);
points.push(new THREE.Vector3(randomX,randomY,randomZ));
}
spGroup = new THREE.Object3D();
var spmat = new THREE.MeshLambertMaterial({color:0xFFFFFF});
points.forEach(function (point) {
var spgeom = new THREE.SphereGeometry(0.2,10,10);
var spmesh = new THREE.Mesh(spgeom,spmat);
spmesh.position.copy(point);
spGroup.add(spmesh);
});
scene.add(spGroup);
console.log(spGroup);//输出看一下
}
var contrals = new function () {
this.cameraHigh = 0;
this.speed = 0.1;
}
var gui = new dat.GUI();
gui.add(contrals,'cameraHigh',-90,90,"相机高度");
gui.add(contrals,'speed',0,1,"旋转速度");
pointPosition();
var ambLight = new THREE.AmbientLight(0x444444);
scene.add(ambLight);
var spotLight = new THREE.SpotLight(0xFFFFFF);
spotLight.position.set(-20,50,-20);
scene.add(spotLight);
console.log(scene.children);//为什么输出长度还是4,而不是304?
document.body.appendChild(renderer.domElement);
renderer.render(scene,camera);
var angle = 0;
function run() {
angle += contrals.speed;
camera.position.y = contrals.cameraHigh;
camera.position.x = -40*Math.sin(angle*Math.PI/180);
camera.position.z = 40*Math.cos(angle*Math.PI/180);
camera.lookAt(scene.position);
requestAnimationFrame(run);
renderer.render(scene,camera);
}
run();
// 必须设置动画不停的renderer才能生效
function onResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
window.addEventListener('resize', onResize, false);
</script>