Cześć, tworzę model ziemi w webgl w bibliotece three.js:
Chcę uzyskać efekt światła słońca z oddali. Myślę, że najlepiej się nada tzw. światło punktowe:
const light = new THREE.PointLight( 0xff0000, 1, 100 );
light.position.set( 50, 50, 50 );
scene.add( light );
Mam problem z zaimplementowaniem, gdzie bym nie dał światła - brak efektu. To kwesta tego, że nie ma podłoża pod obiektem?
Albo niewłaściwy rodzaj światła?
Tak wygląda mój kod:
<html>
<head>
<style>canvas { width: 100%; height: 100% }</style>
</head>
<style>
body { background-color: black;}
p {color: white;};
</style>
<body>
<script src="js/three.js"></script>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 0.1, 40*1024 );
var renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
camera.position.set(0,128,1024);
var textures = ['img/EARTH.jpg']; var materials = [];
for(var i=0;i<textures.length;i++) {
var texture = THREE.ImageUtils.loadTexture(textures[i]);
texture.anisotropy = renderer.getMaxAnisotropy();
materials.push( new THREE.MeshBasicMaterial({map: texture}));
}
var geometry = new THREE.SphereGeometry(512,128,256);
var cube = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( materials )); //Utworzenie siatki trojkatow tworzacej kostke
scene.add( cube );
cube.position.x+=512;
cube.position.y+=128;
//Wczytanie tekstur
var textures = ['img/skybox/north.jpg',
'img/skybox/south.jpg',
'img/skybox/top.jpg',
'img/skybox/bottom.jpg',
'img/skybox/west.jpg',
'img/skybox/east.jpg'];
var materials = [];
for(var i=0;i<textures.length;i++) {
var texture = THREE.ImageUtils.loadTexture(textures[i]);
texture.anisotropy = renderer.getMaxAnisotropy();
materials.push( new THREE.MeshBasicMaterial({map: texture, side: THREE.BackSide}));
}
var geometry = new THREE.CubeGeometry(32*1024,32*1024,32*1024); // cube (skybox)
var skyBox = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( materials ));
skyBox.position.y -= 1024;
scene.add( skyBox );
const directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
scene.add( directionalLight );
var kat = 0;
function render() {
requestAnimationFrame(render);
kat -= 0.004;
camera.position.x = Math.sin( kat ) * 1500;
camera.position.z = Math.cos( kat ) * 1024;
camera.lookAt( scene.position );
renderer.render(scene, camera);
}
render();
</script>
</body>
</html>
Teoretycznie powinno działać niemal gdziekolwiek, gdzie zaimplementuję kod w <script>