geomtery translate

by orion_prime

HTML

<script src="https://threejs.org/build/three.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js"></script>

<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://threejs.org/examples/js/utils/BufferGeometryUtils.js"></script>

JavaScript

let camera, scene, renderer;
let gui = new dat.GUI();
const count = 10;
let y=0
const allMeshes =[]
init();
animate();
setupGui()

function init() {

	scene = new THREE.Scene();
	
	camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.1, 1000 );
	camera.position.set( 0, 5, 15 );
	camera.lookAt( scene.position );
	
	//
	
	const ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
	scene.add( ambientLight );
	
	const pointLight = new THREE.PointLight( 0xffffff, 0.8 );
	camera.add( pointLight );
	scene.add( camera );
	
	//
	
	scene.add( new THREE.AxesHelper( 1 ) );
	
	//
	
	const geometries = [];
	
  
	const geo = new THREE.BoxGeometry( 1, 1, 1 );
	
	
    const  mat = new THREE.MeshPhongMaterial( {color: 0xffff00} );
   
	
	

	for ( let i = 0; i < count; i ++ ) {
	
		const mesh = new THREE.Mesh(geo, mat)
		mesh.position.set(i * 2, 0, 0)
		console.log(mesh)
		scene.add(mesh)
		allMeshes.push(mesh)

	}
	
	renderer = new THREE.WebGLRenderer( { antialias: true } );
	renderer.setPixelRatio( window.devicePixelRatio );
	renderer.setSize( window.innerWidth, window.innerHeight );
	document.body.appendChild( renderer.domElement );
	
	const controls = new THREE.OrbitControls( camera, renderer.domElement );
	
}



function animate() {
	for (const [index,mesh] of allMeshes.entries()){
		mesh.scale.y = Math.abs(Math.sin(y+index))
		y += 0.001
	}

	
	requestAnimationFrame(animate);
	renderer.render(scene, camera);

}


function setupGui(){
	const obj={
		tr(){},
		val:0.000,
	}
	gui.add(obj,'tr').name('trans Y 0.5').onFinishChange(()=>{
		
		for (const mesh of allMeshes){
			// mesh.geometry.applyMatrix4( new THREE.Matrix4().makeTranslation( 0, 0.5, 0 ) )
			mesh.geometry.translate(0,0.5,0)
      break
		}
	})
	gui.add(obj,'tr').name('trans Y -0.5').onFinishChange(()=>{
	
		for (const mesh of allMeshes){
			// mesh.geometry.applyMatrix4( new THREE.Matrix4().makeTranslation( 0, 0.5, 0 ) )
			mesh.geometry.translate(0,-0.5,0)
      break
		}
	})
	

}