XProfan

<!DOCTYPE html>
<!--   *** wheel ***
/**
* @author hofk
*/
-->
<html lang="de">
<head>
<title> numberwheel  </title>
<meta charset="utf-8" />
</head>
<body>
</body>
<script src="three.min.88.js"></script>
<script src="OrbitControls.js"></script>
<script src="THREEx.WindowResize.js"></script>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 20000 );
camera.position.set( 250, 100, 60 );
var renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor( 0xdddddd, 1 );
var container = document.createElement('div' );
document.body.appendChild( container );
container.appendChild( renderer.domElement );
THREEx.WindowResize( renderer, camera );
var controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.enableZoom = true;
var clock  = new THREE.Clock( true );
var time;
// material
var uvTex	= new THREE.TextureLoader().load( "uvgrid_w_0_9 .jpg" );
var material = new THREE.MeshBasicMaterial( { map: uvTex, side: THREE.DoubleSide } );
var geometry = new THREE.CylinderGeometry(80, 80, 80, 10, 1, true);
// mesh
var mesh1 = new THREE.Mesh( geometry, material );
scene.add( mesh1 );
mesh1.rotation.x = 1.57;
animate();

function animate() {

    requestAnimationFrame( animate );
    time = clock.getElapsedTime();
    mesh1.rotation.y = 0.4 * time;
    renderer.render( scene, camera );
    controls.update();

}

</script>
</html>

var exampleObject = new THREE.Object3D();

var mtlLoaderExample = new THREE.MTLLoader( );

mtlLoaderExample.load(

	'spiner.mtl',  // Lizenz
	
	function (materials) {

		materials.preload();

		var objLoaderExample = new THREE.OBJLoader( );
		
		objLoaderExample.setMaterials( materials );
		
		objLoaderExample.load(
		
			'spiner.obj', // Lizenz
			
			function (object) {

				exampleObject.add(object);
			
			}
			
		);
	
	}
	
);

scene.add( exampleObject );

<!DOCTYPE html>
<!--   *** modify THREEf geometries ***
/**
* @author hofk / https://sandbox.threejs.hofk.de/
*/
-->
<html lang="de">
<head>
<title> modify </title>
<meta charset="utf-8" />
</head>
<body>
<div id="webGL">  </div>
<div id="output"> output </div>
</body>
<script src="three.min.88.js"></script>
<script src="OrbitControls.js"></script>
<script src="THREEx.WindowResize.js"></script>
<script src="THREEf.js"></script>
<script src="geo.js"></script>
<script>
'use strict'
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 200000 );
camera.position.set( 0, 80, 200 );
var renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor( 0xeeeeee, 1 );
var container = document.getElementById('webGL' );
container.appendChild( renderer.domElement );
THREEx.WindowResize( renderer, camera );
var controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.enableZoom = true;
// material
var uvTex			= new THREE.TextureLoader().load( "uvgrid01.png" );
var waterlilyTex	= new THREE.TextureLoader().load( "waterlily.png" );
var side =  THREE.DoubleSide;
var materials = [// material index:
new THREE.MeshBasicMaterial( { transparent: true,  color: 0x00ff00, opacity: 0.7, 	side: side	} ),//  0 transparent
new THREE.MeshBasicMaterial( { map: uvTex, 					side: side	} ),//  1 uv grid
new THREE.MeshPhongMaterial( { color: 0xff0000, emissive: 0xff0000, side: side,  } ),//  2 red
new THREE.MeshPhongMaterial( { color: 0x00ff00, emissive: 0x00ff00, side: side, } ),//  3 green
new THREE.MeshPhongMaterial( { color: 0x0000ff, emissive: 0x0000ff, side: side, } ),//  4 blue
new THREE.MeshPhongMaterial( { color: 0xffff00, emissive: 0xffff00, side: side, } ),//  5 yellow
new THREE.MeshPhongMaterial( { color: 0xff00ff, emissive: 0xff00ff, side: side, } ),//  6 mgenta
new THREE.MeshPhongMaterial( { color: 0x00ffff, emissive: 0x00ffff, side: side, } ),//  7 cyan
new THREE.MeshBasicMaterial( { map: waterlilyTex,					side: side	} ),//  8 photo waterlily (free)
new THREE.MeshPhongMaterial( { color: 0x7755ff, emissive: 0x4433dd, side: side	} ),//  9 color
new THREE.MeshPhongMaterial( { color: 0x444444, emissive: 0x333333, side: side	} )// 10 grey
];
var sun1 = new THREE.DirectionalLight();
sun1.intensity =  0.6;
sun1.position.set(50, 200, 300);
scene.add(sun1);
var sun2 = new THREE.DirectionalLight();
sun2.intensity =  0.5;
//sun2.position.set(-50, -200, 300);
sun2.position.set(0, 0, 0);
scene.add(sun2);
// geometry

var parameters = {

    height: 20,
    quadLine: true,
    quadColor: 0xff00ff,
    circOpen:	true,
    unrollCover:	function ( v, t ) { return 0.2 },
    radiusSegments: 2,
    heightSegments: 1,
    rCircHeight: function ( u, v, t ) { return u + v },
    materialCover:	function ( u, v, t ) { return 0 },

}

var geometry = new THREE.BufferGeometry();
geometry.createMorphGeometry = THREEf.createMorphGeometry;
geometry.createMorphGeometry( parameters );
// ........... start output JavaScript Code ....................................................
var vc3 = geometry.vertices.length;
var uvc2 = geometry.uvs.length;
var fc = geometry.faceIndices.length / 3;
output.innerHTML = "var geo = new THREE.BufferGeometry(); <br />";
output.innerHTML += "geo.faceIndices = new Uint32Array( [ " + geometry.faceIndices + " ] ); <br /> ";
output.innerHTML += "geo.vertices = new Float32Array( [ ";

for ( var v = 0; v < vc3 ; v ++ ) {

    output.innerHTML += geometry.vertices[ v ];
    output.innerHTML += v < vc3 - 1  ? ", " : "";

}

output.innerHTML += " ] ); <br /> ";
output.innerHTML += "geo.normals = new Float32Array( [ ";

for ( var v = 0; v < vc3 ; v ++ ) {

    output.innerHTML += geometry.normals[ v ];
    output.innerHTML += v < vc3 - 1  ? ", " : "";

}

output.innerHTML += " ] ); <br /> "
output.innerHTML += "geo.uvs = new Float32Array( [ ";

for ( var v = 0; v < uvc2 ; v ++ ) {

    output.innerHTML += geometry.uvs[ v ];
    output.innerHTML += v < uvc2 - 1  ? ", " : "";

}

output.innerHTML += " ] ); <br /> "
output.innerHTML += "geo.setIndex( new THREE.BufferAttribute( geo.faceIndices, 1 ) ); <br /> geo.addAttribute( 'position', new THREE.BufferAttribute( geo.vertices, 3 )); <br />geo.addAttribute( 'normal', new THREE.BufferAttribute( geo.normals, 3 )); <br /> geo.addAttribute( 'uv', new THREE.BufferAttribute( geo.uvs, 2 ) );<br /> ";
output.innerHTML += "var geoG = [ ";

for ( var f = 0, p = 0; f < fc ; f ++, p += 3 ) {

    output.innerHTML += geometry.groups[ f ].start + ", " + geometry.groups[ f ].count + ", " + geometry.groups[ f ].materialIndex ;
    output.innerHTML += f < fc - 1  ? ", " : "";

}

output.innerHTML += " ]; <br /> ";
output.innerHTML +=  " for ( var f = 0, p = 0; f < " + fc + "; f ++, p += 3 ) { geo.addGroup( geoG[ p ], geoG[ p + 1 ], geoG[ p + 2 ] ); } <br /> ";

if ( geometry.quadLine ) {

    output.innerHTML += "geo.lineGeometry = new THREE.BufferGeometry(); <br />";
    output.innerHTML += "geo.quadLine = new THREE.Line( geo.lineGeometry, new THREE.LineBasicMaterial( { color: " + geometry.quadColor + "} ) ); <br />";
    output.innerHTML += "geo.linePositions = new Float32Array( [ ";

    for ( var v = 0; v < 2 * vc3 ; v ++ ) {

        output.innerHTML += geometry.linePositions[ v ];
        output.innerHTML += v < 2 * vc3 - 1  ? ", " : "";

    }

    output.innerHTML += " ] ); <br /> ";
    output.innerHTML += "geo.lineGeometry.addAttribute( 'position', new THREE.BufferAttribute( geo.linePositions, 3 ) );  <br />";

}

// .............. end output JavaScript Code .......................................................
// mesh
var mesh = new THREE.Mesh( geometry, materials );
scene.add( mesh );
mesh.add( geometry.quadLine );
mesh.colorsNeedUpdate = true;
//...  skript geo.js def. Geometry geo ............ ......
var me = new THREE.Mesh( geo, materials );
scene.add( me );
me.add( geo.quadLine );
me.position.x = 50;
//..........................................................
animate();
//-----------------

function animate() {

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

}

</script>
</html>

if ( facePicked ) {

    geo.vertices[ a * 3 ] = handlePos.x + paV.x;
    geo.vertices[ a * 3 + 1 ] = handlePos.y + paV.y;
    geo.vertices[ a * 3 + 2 ] = handlePos.z + paV.z;
    geo.vertices[ b * 3 ] = handlePos.x + pbV.x;
    geo.vertices[ b * 3 + 1 ] = handlePos.y + pbV.y;
    geo.vertices[ b * 3 + 2 ] = handlePos.z + pbV.z;
    geo.vertices[ c * 3 ] = handlePos.x + pcV.x;
    geo.vertices[ c * 3 + 1 ] = handlePos.y + pcV.y;
    geo.vertices[ c * 3 + 2 ] = handlePos.z + pcV.z;

}