Add marker to rotating globe object help

Questions
13

If the ball should become boring, you can also use other geometries.

An example20171107-2138-42432

<!doctype html>
<html lang="de">
<head>
	<title> picture coil </title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>

	<script src="../js/three.min.87.js"></script>
	<script src="../js/OrbitControls.js"></script>
	<script src="../js/THREEx.WindowResize.js"></script>
	
	<!--  https://github.com/hofk/THREEf.js/blob/master/THREEf_87/THREEf.js -->
	<script src="../js/THREEf.js"></script>
	
	<div id="threejs" style="position: absolute; left:0px; top:0px"></div>
	
</body>

<script>

var boards = []; 
var texture = []; 
var matTexture = [];

init();
animate();

//...........................

function init() {	

	scene  = new THREE.Scene();
	camera = new THREE.PerspectiveCamera( 75, window.innerWidth/ window.innerHeight,1, 100000 );
	scene.add( camera );
	camera.position.set( -200, 500, 12000 );	
	renderer = new THREE.WebGLRenderer( { antialias:true } );	
	renderer.setSize( window.innerWidth, window.innerHeight );
	renderer.setClearColor( 0xeeeeee );
	container = document.getElementById( 'threejs' );
	container.appendChild( renderer.domElement );
	THREEx.WindowResize( renderer, camera );
	controls = new THREE.OrbitControls( camera, renderer.domElement );
	
	texture[0] = new THREE.TextureLoader().load( "waterlily.png" );
	texture[1] = new THREE.TextureLoader().load( "dahlia.jpg" ); 
	texture[2] = new THREE.TextureLoader().load( "petunia.jpg" );
	texture[3] = new THREE.TextureLoader().load( "frog.jpg" );
	
	for (var z = 0; z < 4; z++) { 
	
		matTexture[z] = new THREE.MeshBasicMaterial( { map: texture[z], transparent:true, opacity:0.8, wireframe:false} ); 	
  	}

	// coil generated with addon THREEf.js 
	var geometry = new THREE.Geometry(); 
	
	geometry.createMorphGeometry = THREEf.createMorphGeometry;  // insert the methode from THREEf.js
	
	// apply the methode with some parameters
	geometry.createMorphGeometry({

		radius: 200,
		height: 600,
		radiusSegments: 18,
		heightSegments: 80,
		withBottom: true,
		withTop: true,
		centerX: function ( v, t ) { return 2 * Math.sin( 6 * Math.PI * v ) },
		centerY: function ( v, t ) { return v * ( v + 10 ) },
		centerZ: function ( v, t ) { return 2 * Math.cos( 6 * Math.PI * v ) }
		
	});
	
	var material = new THREE.MeshBasicMaterial( { color: 0x0099dd, transparent: true, opacity: 0.8, wireframe:false } );
	
	var mesh = new THREE.Mesh( geometry, material );
	scene.add( mesh );
 	
	// board for some things	
	materialBoard   = new THREE.MeshBasicMaterial({color:0xdd00dd, transparent:true, opacity:0.5, wireframe: false });
	boardGeo  = new THREE.PlaneGeometry(500,500);
	
	picGeo = new THREE.PlaneGeometry( 160, 160 );
	 
	idx = 0;  
	for (var i = 0; i < geometry.vertices.length; i++)	{ 	
	
		if ( i % 32 === 0) {
	
			board = new THREE.Mesh( boardGeo, materialBoard );  		// board for pictures etc.  
			
			pic1 = new THREE.Mesh( picGeo, matTexture[ idx % 4 ] );
			pic2 = new THREE.Mesh( picGeo, matTexture[ ( idx % 4 ) % 2 ] );
			
			board.add( pic1 );                                      	//  add picture to the board
			board.add( pic2 );
			
			pic1.position.x = -70;										// position on the board	
			pic1.position.y = 120;
			pic1.position.z = 20;
					
			pic2.position.x = 80;											
			pic2.position.y = -120;
			pic2.position.z = 20;
			
			boards.push( board );
						
			scene.add( boards[ idx ] );                           		
			
			boards[ idx ].position.set( 1.4 * geometry.vertices[ i ].x ,  geometry.vertices[ i ].y + 300, 1.4 * geometry.vertices[ i ].z ); 
		
			idx ++;
			
		}
		
	}	
	
} 

function animate() {

    requestAnimationFrame( animate );
	
	 for( var n = 0; n < boards.length; n ++ ) {
		
		boards[ n ].quaternion.copy( camera.quaternion );
	 }	
	 
	renderer.render( scene, camera );	
	
	controls.update();
}
</script>
</html>
2 Likes