From a35440ad0ebb9ee425e3e64b51cfbd7f4254ba87 Mon Sep 17 00:00:00 2001 From: Simple_Not <44047940+moonbaseDelta@users.noreply.github.com> Date: Wed, 2 Aug 2023 00:40:50 +1000 Subject: [PATCH] upd --- main.js | 222 ++++++++++++++++++++++++++++++++++++++++++++++++++------ 1 file changed, 201 insertions(+), 21 deletions(-) diff --git a/main.js b/main.js index 5a7be28..7e026af 100644 --- a/main.js +++ b/main.js @@ -1,34 +1,214 @@ import * as THREE from 'three'; -const scene = new THREE.Scene(); -const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); +// // const scene = new THREE.Scene(); +// // const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); -const renderer = new THREE.WebGLRenderer(); -renderer.setSize( window.innerWidth, window.innerHeight ); -document.body.appendChild( renderer.domElement ); +// // const renderer = new THREE.WebGLRenderer(); +// // renderer.setSize( window.innerWidth, window.innerHeight ); +// // document.body.appendChild( renderer.domElement ); -const geometry = new THREE.BoxGeometry( 1, 2, 1 ); -const material = new THREE.MeshBasicMaterial( { color: 0x277BC0 } ); -const cube = new THREE.Mesh( geometry, material ); -scene.add( cube ); +// // const geometry = new THREE.BoxGeometry( 1, 2, 1 ); +// // const material = new THREE.MeshBasicMaterial( { color: 0x277BC0 } ); +// // const cube = new THREE.Mesh( geometry, material ); +// // scene.add( cube ); -camera.position.z = 5; +// // camera.position.z = 5; -const points = []; -points.push( new THREE.Vector3( - 10, 0, 0 ) ); -points.push( new THREE.Vector3( 0, 10, 0 ) ); -points.push( new THREE.Vector3( 10, 0, 0 ) ); +// // const points = []; +// // points.push( new THREE.Vector3( - 10, 0, 0 ) ); +// // points.push( new THREE.Vector3( 0, 10, 0 ) ); +// // points.push( new THREE.Vector3( 10, 0, 0 ) ); -const material2 = new THREE.LineBasicMaterial( { color: 0x0000ff } ); -const geometry2 = new THREE.BufferGeometry().setFromPoints( points ); -const line = new THREE.Line( geometry2, material2 ); +// // const material2 = new THREE.LineBasicMaterial( { color: 0x0000ff } ); +// // const geometry2 = new THREE.BufferGeometry().setFromPoints( points ); +// // const line = new THREE.Line( geometry2, material2 ); -scene.add( line ); +// // scene.add( line ); + +// // function animate() { +// // requestAnimationFrame( animate ); +// // renderer.render( scene, camera ); +// // } +// // animate(); + + + + +import Stats from 'three/addons/libs/stats.module.js'; + +import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; +import { OutlineEffect } from 'three/addons/effects/OutlineEffect.js'; +import { FontLoader } from 'three/addons/loaders/FontLoader.js'; +import { TextGeometry } from 'three/addons/geometries/TextGeometry.js'; + +let container, stats; + +let camera, scene, renderer, effect; +let particleLight; + +const loader = new FontLoader(); +loader.load( 'fonts/gentilis_regular.typeface.json', function ( font ) { + + init( font ); + animate(); + +} ); + +function init( font ) { + + container = document.createElement( 'div' ); + document.body.appendChild( container ); + + camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 2500 ); + camera.position.set( 0.0, 400, 400 * 3.5 ); + + // + + scene = new THREE.Scene(); + scene.background = new THREE.Color( 0x444488 ); + + // + + renderer = new THREE.WebGLRenderer( { antialias: true } ); + renderer.setPixelRatio( window.devicePixelRatio ); + renderer.setSize( window.innerWidth, window.innerHeight ); + container.appendChild( renderer.domElement ); + + // Materials + + const cubeWidth = 400; + const numberOfSphersPerSide = 5; + const sphereRadius = ( cubeWidth / numberOfSphersPerSide ) * 0.8 * 0.5; + const stepSize = 1.0 / numberOfSphersPerSide; + const format = ( renderer.capabilities.isWebGL2 ) ? THREE.RedFormat : THREE.LuminanceFormat; + + const geometry = new THREE.SphereGeometry( sphereRadius, 32, 16 ); + + for ( let alpha = 0, alphaIndex = 0; alpha <= 1.0; alpha += stepSize, alphaIndex ++ ) { + + const colors = new Uint8Array( alphaIndex + 2 ); + + for ( let c = 0; c <= colors.length; c ++ ) { + + colors[ c ] = ( c / colors.length ) * 256; + + } + + const gradientMap = new THREE.DataTexture( colors, colors.length, 1, format ); + gradientMap.needsUpdate = true; + + for ( let beta = 0; beta <= 1.0; beta += stepSize ) { + + for ( let gamma = 0; gamma <= 1.0; gamma += stepSize ) { + + // basic monochromatic energy preservation + const diffuseColor = new THREE.Color().setHSL( alpha, 0.5, gamma * 0.5 + 0.1 ).multiplyScalar( 1 - beta * 0.2 ); + + const material = new THREE.MeshToonMaterial( { + color: diffuseColor, + gradientMap: gradientMap + } ); + + const mesh = new THREE.Mesh( geometry, material ); + + mesh.position.x = alpha * 400 - 200; + mesh.position.y = beta * 400 - 200; + mesh.position.z = gamma * 400 - 200; + + scene.add( mesh ); + + } + + } + + } + + function addLabel( name, location ) { + + const textGeo = new TextGeometry( name, { + + font: font, + + size: 20, + height: 1, + curveSegments: 1 + + } ); + + const textMaterial = new THREE.MeshBasicMaterial(); + const textMesh = new THREE.Mesh( textGeo, textMaterial ); + textMesh.position.copy( location ); + scene.add( textMesh ); + + } + + addLabel( '-gradientMap', new THREE.Vector3( - 350, 0, 0 ) ); + addLabel( '+gradientMap', new THREE.Vector3( 350, 0, 0 ) ); + + addLabel( '-diffuse', new THREE.Vector3( 0, 0, - 300 ) ); + addLabel( '+diffuse', new THREE.Vector3( 0, 0, 300 ) ); + + particleLight = new THREE.Mesh( + new THREE.SphereGeometry( 4, 8, 8 ), + new THREE.MeshBasicMaterial( { color: 0xffffff } ) + ); + scene.add( particleLight ); + + // Lights + + scene.add( new THREE.AmbientLight( 0xc1c1c1, 3 ) ); + + const pointLight = new THREE.PointLight( 0xffffff, 2, 800, 0 ); + particleLight.add( pointLight ); + + // + + effect = new OutlineEffect( renderer ); + + // + + stats = new Stats(); + container.appendChild( stats.dom ); + + const controls = new OrbitControls( camera, renderer.domElement ); + controls.minDistance = 200; + controls.maxDistance = 2000; + + window.addEventListener( 'resize', onWindowResize ); + +} + +function onWindowResize() { + + camera.aspect = window.innerWidth / window.innerHeight; + camera.updateProjectionMatrix(); + + renderer.setSize( window.innerWidth, window.innerHeight ); + +} + +// function animate() { - requestAnimationFrame( animate ); - renderer.render( scene, camera ); + + requestAnimationFrame( animate ); + + stats.begin(); + render(); + stats.end(); + } -animate(); \ No newline at end of file + +function render() { + + const timer = Date.now() * 0.00025; + + particleLight.position.x = Math.sin( timer * 7 ) * 300; + particleLight.position.y = Math.cos( timer * 5 ) * 400; + particleLight.position.z = Math.cos( timer * 3 ) * 300; + + effect.render( scene, camera ); + +} \ No newline at end of file