draft-with-tan

some scratch three.js, cube and spheres

by hirako2000

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/0.148.0/three.min.js"></script>

CSS

* {
  margin: 0;
}

JavaScript

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 geometry = new THREE.BoxGeometry( 1, 1, 1 );
const material = new THREE.MeshBasicMaterial( { color: 0xffffff } );
const cube = new THREE.Mesh( geometry, material );
material.wireframe = true;
scene.add( cube ); 


const cubes = [];
const spheres = [];

function createCube() {


	 const geometry = new THREE.BoxGeometry( Math.random()* 10, Math.random()*5, Math.random() * 7 );
   
   
    const material = new THREE.MeshBasicMaterial( {
    	color: 0xff0000 
     } );
    
    
    const cube = new THREE.Mesh( 
    	geometry,
      material 		
    );
    
    cube.position.x = Math.random() * 8;
    cube.position.y = Math.random() * 10;
    material.wireframe = true;
    scene.add( cube ); 
    
    cubes.push(cube);

}

function createSphere() {

		const geometry = new THREE.SphereGeometry( 15,32, 16 );
    
  const material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );

  const sphere = new THREE.Mesh( 
    geometry, 
    material 
  );
  
  sphere.position.x = 10
  sphere.position.y = 10
  material.wireframe = true;
  scene.add( sphere );
    
  spheres.push(sphere);
}


function sss(count) {
	for(let i = 0; i < count; i = i+ 1) {
   createCube();
   createSphere();
  }
}

camera.position.z = 5;

sss(9);

function animate() {
	requestAnimationFrame( animate );
  for(let i = 0; i < cubes.length; i++) {
    cubes[i].rotation.x =cubes[i].rotation.x + 0.01;
 		cubes[i].rotation.y =cubes[i].rotation.y + 0.02;
  }



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