![](/img/trans.png)
[英]Three.js - Applying a texture( 2D png image ) around 3D sphere appears black
[英]Three.js 3d sphere looks 2d
您好,我最近開始研究Three.js,我正嘗試使用軌道控件創建一個包含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();
}
particle.scale.x = particle.scale.y = particle.scale.z = 10;
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.