Three.js的三维球体看起来是二维的
Three.js 3d sphere looks 2d
你好,我最近开始研究three.js,我正在尝试使用轨道控制创建一个带有一些三维球体和基本旋转的场景。Bellow是我目前的代码,我面临的问题是,当我旋转相机时,球体看起来像是被压扁了/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();
}
particle.scale.x = particle.scale.y = particle.scale.z = 10;
相关文章:
- Steam Web API:I'我不知道该如何处理这个看起来像哈希的url来生成图像
- 作为一个二维数组,从ajax接收
- 如何使删除线看起来像x
- Twitter Bootstrap 2.1.0子菜单在Responsive上看起来很混乱
- 创建P5.js二维数组
- 用javascript创建一个看起来正常分布的模式
- 在WebGL中绘制多个二维图像
- 如何在Javascript中从select标记的一系列选项中构建二维数组
- inArray,indexOf在二维数组中
- 比较二维数组js
- PHP函数的返回看起来如何对AJAX和PHP有效
- 如何使Codeschools棱角分明的一面看起来相似
- 从二维数组中获取img src和img维度,并在body中显示
- 使用方程和/或矢量在三维空间中绘制二维平面
- HTML/JavaScript拖动&Drop-是否可以使重影图像*NOT*看起来'冲洗掉'
- 如何在Java Script中比较二维数组和一维数组,并将常见数据存储在另一个数组中
- 如何将以下字符串拆分为二维数组:
- 使用webqr和getusermedia脚本扫描二维码
- Three.js的三维球体看起来是二维的
- AngularJS json多维数组看起来不像它应该的样子