diff --git a/index.html b/index.html index 33565ae..f9ef811 100644 --- a/index.html +++ b/index.html @@ -8,6 +8,7 @@ +
\ No newline at end of file diff --git a/main.js b/main.js index de0dbad..e2833d1 100644 --- a/main.js +++ b/main.js @@ -1,214 +1,215 @@ -import * as THREE from 'three'; +// 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 ); - -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 ); - -// } - -// // +// scene.add( line ); // function animate() { - -// requestAnimationFrame( animate ); - -// stats.begin(); -// render(); -// stats.end(); - +// requestAnimationFrame( animate ); +// renderer.render( scene, camera ); // } +// animate(); -// 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; +import * as THREE from 'three'; -// effect.render( scene, camera ); +import Stats from 'three/addons/libs/stats.module.js'; -// } \ No newline at end of file +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 ); + + stats.begin(); + render(); + stats.end(); + +} + +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