line

by grano

HTML

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/loaders/GLTFLoader.js"></script>
<script src='https://threejs.org/examples/js/postprocessing/EffectComposer.js'></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://threejs.org/examples/js/libs/dat.gui.min.js"></script>
<script src="https://threejs.org/examples/js/objects/MarchingCubes.js"></script>

JavaScript

// reference https://www.pentacreation.com/blog/2020/10/201009.html

let camera, scene, renderer, composer, meta;
let time;
const lineNum = 100;
const clock = new THREE.Clock();

init();
animate();


  


function init() {
	camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.01, 1000 );
	camera.position.set( 140, 140, 140 );
	camera.lookAt( 0, -10, 0 );	
  
	scene = new THREE.Scene();

	const normalBox = new THREE.Mesh(new THREE.BoxGeometry(10, 10, 10), new THREE.MeshBasicMaterial({color: "red"}));
  normalBox.position.set(1,50,60);
  scene.add(normalBox);
  
	const lineList = new THREE.Group();
    [...new Array(lineNum)].forEach((_, num) => {
      const line = getLine(num);
      lineList.add(line)    
	  })
  scene.add(lineList);

  
const light = new THREE.DirectionalLight( 0xffffff );
			light.position.set( 0.5, 0.5, 1 );
			scene.add( light );
const	ambientLight = new THREE.AmbientLight( 0x080808 );
			scene.add( ambientLight );


  renderer = new THREE.WebGLRenderer();
	renderer.setSize( window.innerWidth, window.innerHeight );
	document.body.appendChild( renderer.domElement );
  
 	const controls = new THREE.OrbitControls( camera, renderer.domElement );
  controls.target.set( 0, 1, 0 );

  setGui()
}

function getLine(num) {
	const segmentNum = 100
  const lineLength = 500;
  const data = [...new Array(segmentNum)].map(() => Math.random())
  const amplitude = 5;

 const points = data.map((d, i) => {
		  const x = ((lineLength/segmentNum) * i) - lineLength / 2;
      const y =  amplitude * d 
//      const y = 0;
      const z = num * 0.3 - ((lineNum * 0.3) / 2);
      const p = new THREE.Vector3(x, y, z);
      return p
})
  const geometry = new THREE.BufferGeometry().setFromPoints(points);

// color
	const h = Math.round((num / lineNum) * 360);
  const s = 100;
  const l = Math.round((num / lineNum) * 100);
  const color = new THREE.Color(`hsl(${h},${s}%,${l}%)`);

  const material = new THREE.LineBasicMaterial({
     ...