Dies ist das Repository meines kleinen Portfolios.
Im Hintergrund läuft eine Planetensimulation, geschrieben in JavaScript und Three.js.
Die zu sehenden Texturen stammen von:
https://www.solarsystemscope.com/textures/
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
86 lines
2.0 KiB
86 lines
2.0 KiB
import * as THREE from 'three'; |
|
|
|
var camera, scene, renderer, group; |
|
|
|
function init( canvas, width, height, pixelRatio, path ) { |
|
|
|
camera = new THREE.PerspectiveCamera( 40, width / height, 1, 1000 ); |
|
camera.position.z = 200; |
|
|
|
scene = new THREE.Scene(); |
|
scene.fog = new THREE.Fog( 0x444466, 100, 400 ); |
|
scene.background = new THREE.Color( 0x444466 ); |
|
|
|
group = new THREE.Group(); |
|
scene.add( group ); |
|
|
|
// we don't use ImageLoader since it has a DOM dependency (HTML5 image element) |
|
|
|
var loader = new THREE.ImageBitmapLoader().setPath( path ); |
|
loader.setOptions( { imageOrientation: 'flipY' } ); |
|
loader.load( 'textures/matcaps/matcap-porcelain-white.jpg', function ( imageBitmap ) { |
|
|
|
var texture = new THREE.CanvasTexture( imageBitmap ); |
|
|
|
var geometry = new THREE.IcosahedronGeometry( 5, 8 ); |
|
var materials = [ |
|
new THREE.MeshMatcapMaterial( { color: 0xaa24df, matcap: texture } ), |
|
new THREE.MeshMatcapMaterial( { color: 0x605d90, matcap: texture } ), |
|
new THREE.MeshMatcapMaterial( { color: 0xe04a3f, matcap: texture } ), |
|
new THREE.MeshMatcapMaterial( { color: 0xe30456, matcap: texture } ) |
|
]; |
|
|
|
for ( var i = 0; i < 100; i ++ ) { |
|
|
|
var material = materials[ i % materials.length ]; |
|
var mesh = new THREE.Mesh( geometry, material ); |
|
mesh.position.x = random() * 200 - 100; |
|
mesh.position.y = random() * 200 - 100; |
|
mesh.position.z = random() * 200 - 100; |
|
mesh.scale.setScalar( random() + 1 ); |
|
group.add( mesh ); |
|
|
|
} |
|
|
|
renderer = new THREE.WebGLRenderer( { antialias: true, canvas: canvas } ); |
|
renderer.setPixelRatio( pixelRatio ); |
|
renderer.setSize( width, height, false ); |
|
|
|
animate(); |
|
|
|
} ); |
|
|
|
} |
|
|
|
function animate() { |
|
|
|
// group.rotation.x = Date.now() / 4000; |
|
group.rotation.y = - Date.now() / 4000; |
|
|
|
renderer.render( scene, camera ); |
|
|
|
if ( self.requestAnimationFrame ) { |
|
|
|
self.requestAnimationFrame( animate ); |
|
|
|
} else { |
|
|
|
// Firefox |
|
|
|
} |
|
|
|
} |
|
|
|
// PRNG |
|
|
|
var seed = 1; |
|
|
|
function random() { |
|
|
|
var x = Math.sin( seed ++ ) * 10000; |
|
|
|
return x - Math.floor( x ); |
|
|
|
} |
|
|
|
export default init;
|
|
|