almost merkaba

2022-12-21 16:16:07 +01:00
parent 4522bfeedb
commit db158011dc
11 changed files with 237 additions and 92 deletions
@@ -0,0 +1,3 @@
+body {
+    margin: 0;
+}
@@ -0,0 +1,10 @@
+<!doctype html>
+<html oncontextmenu="return false;">
+    <head>
+        <meta charset="utf-8">
+        <title>Thrive</title>
+        <meta name="viewport" content="width=device-width,initial-scale=1">
+    </head>
+    <body>
+    </body>
+</html>
@@ -0,0 +1,129 @@
+
+import * as THREE from 'three';
+import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+
+import './css/styles.scss';
+
+const scene = new THREE.Scene();
+scene.background = new THREE.Color(0xf44f04);
+
+
+const camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 500 );
+camera.position.z = 20;
+camera.position.x = 30;
+camera.position.y = 8;
+
+
+
+const renderer = new THREE.WebGLRenderer();
+renderer.setSize( window.innerWidth, window.innerHeight );
+renderer.shadowMap.enabled = true;
+renderer.shadowMap.type = THREE.PCFSoftShadowMap; // default THREE.PCFShadowMap
+renderer.shadowMap.enabled = true;
+renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+renderer.gammaFactor = 2.2;
+renderer.outputEncoding = THREE.sRGBEncoding;
+renderer.toneMapping = THREE.ACESFilmicToneMapping;
+renderer.toneMappingExposure = 1;
+renderer.physicallyCorrectLights
+document.body.appendChild( renderer.domElement );
+
+const controls = new OrbitControls( camera, renderer.domElement );
+
+// const geometry_torus = new THREE.TorusGeometry( 2.5, 2.5, 32, 128 );
+// const material_torus = new THREE.MeshBasicMaterial( { color: 0x049ef4, wireframe: true, wireframeLinewidth: 1} );
+// const torus = new THREE.Mesh( geometry_torus, material_torus );
+// torus.rotation.x = Math.PI / 2;
+// torus.castShadow = true;
+// scene.add( torus );
+
+const tetraGeometry = new THREE.TetrahedronGeometry( 2 );
+const tetraMaterial = new THREE.MeshBasicMaterial( {color: 0xffff00 } );
+const tetra = new THREE.Mesh( tetraGeometry, tetraMaterial );
+tetra.rotation.x = Math.PI / 4 ;
+
+scene.add( tetra );
+
+const tetraEdges = new THREE.EdgesGeometry( tetraGeometry );
+const tetraEdgesLine = new THREE.LineSegments( tetraEdges, new THREE.LineBasicMaterial( { color: 0x000000, linewidth: 15 } ) );
+tetraEdgesLine.rotation.x = Math.PI / 4 ;
+tetraEdgesLine.rotation.z = Math.PI / 4 ;
+tetraEdgesLine.castShadow = true; 
+scene.add( tetraEdgesLine );
+
+const tetraGeometry2 = new THREE.TetrahedronGeometry( 2 );
+const tetraMaterial2 = new THREE.MeshBasicMaterial( {color: 0xffff00 } );
+const tetra2 = new THREE.Mesh( tetraGeometry2, tetraMaterial2 );
+tetra2.rotation.z = Math.PI / 2 ;
+tetra2.rotation.y = Math.PI / 4 ;
+// scene.add( tetra2 );
+
+const tetraEdges2 = new THREE.EdgesGeometry( tetraGeometry );
+const tetraEdgesLine2 = new THREE.LineSegments( tetraEdges, new THREE.LineBasicMaterial( { color: 0x000000, linewidth: 15 } ) );
+tetraEdgesLine2.castShadow = true; 
+tetraEdgesLine2.rotation.z = Math.PI / 2 ;
+tetraEdgesLine2.rotation.y = Math.PI / 4 ;
+// scene.add( tetraEdgesLine2 );
+
+
+// const icoGeometry = new THREE.IcosahedronGeometry( 5 );
+// const icoMaterial= new THREE.MeshBasicMaterial( {color: 0x049ef4, wireframe: true, wireframeLinewidth: 8 } );
+// const iso = new THREE.Mesh( icoGeometry, icoMaterial );
+// iso.castShadow = true;
+// scene.add( iso );
+
+// const circleGeometry = new THREE.CircleGeometry( 5, 64 );
+// const circleMaterial = new THREE.MeshBasicMaterial( { color: 0x049ef4, side: THREE.DoubleSide } );
+// const circle = new THREE.Mesh( circleGeometry, circleMaterial );
+// circle.castShadow = true;
+// scene.add( circle );
+
+
+// const spotLight = new THREE.SpotLight( 0xffffff );
+const spotLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
+spotLight.position.set( 10, 0, 0 );
+spotLight.castShadow = true;
+// spotLight.shadow.mapSize.width = 8182;
+// spotLight.shadow.mapSize.height = 8182;
+spotLight.shadow.mapSize.width = 1024;
+spotLight.shadow.mapSize.height = 1024;
+spotLight.shadow.camera.far = 45;
+spotLight.shadow.camera.fov = 35;
+scene.add( spotLight );
+
+
+//Create a plane that receives shadows (but does not cast them)
+const planeGeometry = new THREE.PlaneGeometry( 10, 10, 10, 10 );
+const planeMaterial = new THREE.MeshStandardMaterial( { color: 0xffffff } )
+const plane = new THREE.Mesh( planeGeometry, planeMaterial );
+planeMaterial.side = THREE.DoubleSide;
+plane.rotation.y = Math.PI / 2;
+plane.position.x = -10
+plane.receiveShadow = true;
+scene.add( plane );
+
+//Create a helper for the shadow camera (optional)
+const helper = new THREE.CameraHelper( spotLight.shadow.camera );
+scene.add( helper );
+
+const light = new THREE.HemisphereLight( 0xffffbb, 0x080820, 0.2 );
+scene.add( light );
+
+
+function animate() {
+    requestAnimationFrame( animate );
+
+
+    // tetra.rotation.x += 0.005;
+    // tetraEdgesLine.rotation.x += 0.005;
+ 
+    // const time = performance.now() / 1000;
+    // spotLight.position.x = Math.cos( time ) * 20;
+    // spotLight.position.z = Math.sin( time ) * 20;
+    
+    controls.update();
+
+    renderer.render( scene, camera );
+};
+
+animate();