你好我最近开始研究三个。我和我试图创建一个带有一些3d球体的场景和一个使用轨道控制的基本旋转。贝娄是我目前的代码,我面临的问题是,当我旋转相机时,球体看起来像是被压扁/ 2d而且我不知道我做错了什么。
这是jsFiddle
var camera, scene, renderer, controls, particles = [];
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function( callback ){
window.setTimeout(callback, 1000 / 60);
};
})();
var generateParticles = function() {
var geometry, material, particle;
for ( var zpos= -10000; zpos < 10000; zpos+=200 ) {
geometry = new THREE.SphereGeometry( 6, 32, 32 );
//material = new THREE.MeshLambertMaterial({color: 0xD43001});
material = new THREE.MeshPhongMaterial({
color: 0x333333,
ambient: 0xffffff,
specular: 0xffffff,
shininess: 50
});
// material = new THREE.MeshNormalMaterial();
particle = new THREE.Mesh( geometry, material );
particle.geometry.dynamic = true;
particle.geometry.verticesNeedUpdate = true;
//particle.geometry.normalsNeedUpdate = true;
particle.position.x = Math.random() * 2000 - 1000;
particle.position.y = Math.random() * 2000 - 1000;
particle.position.z = zpos;
particle.scale.x = particle.scale.y = 10;
scene.add( particle );
particles.push(particle);
}
}
var generateLight = function() {
var ambient = new THREE.AmbientLight( 0x111111);
scene.add( ambient );
var color = new THREE.Color("rgb(255,0,0)");
var pointLightRed = new THREE.PointLight(color, 1, 2000);
pointLightRed.position.set( 0, 0, -2000);
scene.add( pointLightRed );
var color = new THREE.Color("rgb(0,255,0)");
var pointLightGreen = new THREE.PointLight(color, 1, 2000);
pointLightGreen.position.set( 0, 0, 2000);
scene.add( pointLightGreen );
var directionalLight1 = new THREE.DirectionalLight( 0xffffff, 5, 10000 );
directionalLight1.position.set( 0, 2000, 0 );
scene.add( directionalLight1 );
}
var init = function() {
// camera
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = 5000;
// scene
scene = new THREE.Scene();
scene.add( camera );
// renderer
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.autoClear = false;
controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.rotateSpeed = 0.5;
controls.minDistance = 500;
controls.maxDistance = 6000;
document.body.appendChild( renderer.domElement );
// add particles
generateParticles();
// add light
generateLight();
// start rendering
render();
}
var update = function() {
for(var i=0; i<particles.length; i++) {
particles[i].position.z += 20;
if ( particles[i].position.z > 10000 ) particles[i].position.z = -10000;
}
}
var render = function() {
requestAnimationFrame( render );
update();
controls.update();
renderer.render(scene, camera);
}
window.onload = function(){
init();
}
答案 0 :(得分:2)
particle.scale.x = particle.scale.y = particle.scale.z = 10;