From 1353082e8a885b61e132bbc7ccae48ffa036fd59 Mon Sep 17 00:00:00 2001 From: Simple_Not <44047940+moonbaseDelta@users.noreply.github.com> Date: Wed, 2 Aug 2023 01:04:46 +1000 Subject: [PATCH] upd --- main.js | 393 ++++++++++++++++++++++++++++---------------------------- 1 file changed, 196 insertions(+), 197 deletions(-) diff --git a/main.js b/main.js index ba808bd..de0dbad 100644 --- a/main.js +++ b/main.js @@ -1,215 +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 ); - -// // 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; - effect.render( scene, camera ); +// import Stats from 'three/addons/libs/stats.module.js'; -} -animate(); \ 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