mirror of
https://github.com/wahyd4/three.js.git
synced 2026-08-08 20:46:21 +10:00
Mr.doob
d902ca3bf0
Removed LOD text example. I think LOD example is good enough. Ubiquity test working again. Tweaked README to show the new pattern (Scene first thing created).
209 lines
5.8 KiB
HTML
209 lines
5.8 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>three.js misc - geometry - polyfield</title>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
|
|
<style>
|
|
body {
|
|
background-color: #ffffff;
|
|
margin: 0px;
|
|
overflow: hidden;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<script src="../build/Three.js"></script>
|
|
|
|
<script src="obj/Qrcode.js"></script>
|
|
|
|
<script src="js/RequestAnimationFrame.js"></script>
|
|
<script src="js/Stats.js"></script>
|
|
|
|
<script>
|
|
|
|
var SCREEN_WIDTH = window.innerWidth / 3;
|
|
var SCREEN_HEIGHT = window.innerHeight;
|
|
var AMOUNT = 100;
|
|
|
|
var container, stats;
|
|
|
|
var camera, scene;
|
|
var canvasRenderer, svgRenderer, webglRenderer;
|
|
|
|
var mesh, group, qrcode;
|
|
|
|
var mouseX = 0, mouseY = 0;
|
|
|
|
var windowHalfX = window.innerWidth / 2;
|
|
var windowHalfY = window.innerHeight / 2;
|
|
|
|
init();
|
|
animate();
|
|
|
|
function init() {
|
|
|
|
container = document.createElement( 'div' );
|
|
document.body.appendChild( container );
|
|
|
|
camera = new THREE.PerspectiveCamera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 100000 );
|
|
camera.position.z = 500;
|
|
|
|
scene = new THREE.Scene();
|
|
|
|
// QRCODE
|
|
|
|
qrcode = mesh = new THREE.Mesh( new Qrcode(), new THREE.MeshFaceMaterial() );
|
|
mesh.scale.x = mesh.scale.y = mesh.scale.z = 2;
|
|
scene.add( mesh );
|
|
|
|
// CUBES
|
|
|
|
var cube = new THREE.CubeGeometry( 100, 100, 100 );
|
|
|
|
mesh = new THREE.Mesh( cube, new THREE.MeshBasicMaterial( { color: 0x0000ff, opacity: 0.5, transparent: true } ) );
|
|
mesh.position.x = 500;
|
|
mesh.rotation.x = Math.random();
|
|
mesh.rotation.y = Math.random();
|
|
mesh.scale.x = mesh.scale.y = mesh.scale.z = 2;
|
|
scene.add( mesh );
|
|
|
|
mesh = new THREE.Mesh( cube, new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff } ) );
|
|
mesh.position.x = 500;
|
|
mesh.position.y = 500;
|
|
mesh.rotation.x = Math.random();
|
|
mesh.rotation.y = Math.random();
|
|
mesh.scale.x = mesh.scale.y = mesh.scale.z = 2;
|
|
scene.add( mesh );
|
|
|
|
// PLANE
|
|
|
|
mesh = new THREE.Mesh( new THREE.PlaneGeometry( 100, 100 ), new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff } ) );
|
|
mesh.position.y = -500;
|
|
mesh.scale.x = mesh.scale.y = mesh.scale.z = 2;
|
|
mesh.doubleSided = true;
|
|
scene.add( mesh );
|
|
|
|
// CYLINDER
|
|
|
|
mesh = new THREE.Mesh( new THREE.CylinderGeometry( 20, 100, 200, 10 ), new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff } ) );
|
|
mesh.position.x = -500;
|
|
mesh.rotation.x = - Math.PI / 2;
|
|
mesh.scale.x = mesh.scale.y = mesh.scale.z = 2;
|
|
scene.add( mesh );
|
|
|
|
// POLYFIELD
|
|
|
|
var geometry = new THREE.Geometry();
|
|
|
|
for ( var i = 0; i < 100; i ++ ) {
|
|
|
|
var v = new THREE.Vector3( Math.random() * 1000 - 500, Math.random() * 1000 - 500, Math.random() * 1000 - 500 );
|
|
|
|
var v0 = new THREE.Vertex( new THREE.Vector3( Math.random() * 100 - 50, Math.random() * 100 - 50, Math.random() * 100 - 50 ) );
|
|
var v1 = new THREE.Vertex( new THREE.Vector3( Math.random() * 100 - 50, Math.random() * 100 - 50, Math.random() * 100 - 50 ) );
|
|
var v2 = new THREE.Vertex( new THREE.Vector3( Math.random() * 100 - 50, Math.random() * 100 - 50, Math.random() * 100 - 50 ) );
|
|
|
|
v0.position.addSelf( v );
|
|
v1.position.addSelf( v );
|
|
v2.position.addSelf( v );
|
|
|
|
var face = new THREE.Face3( geometry.vertices.push( v0 ) - 1, geometry.vertices.push( v1 ) - 1, geometry.vertices.push( v2 ) - 1, null, null, geometry.materials.length );
|
|
|
|
geometry.materials.push( new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff } ) );
|
|
|
|
geometry.faces.push( face );
|
|
|
|
}
|
|
|
|
geometry.computeFaceNormals();
|
|
geometry.computeCentroids();
|
|
|
|
group = new THREE.Object3D();
|
|
group.scale.x = group.scale.y = group.scale.z = 2;
|
|
scene.add( group );
|
|
|
|
mesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial() );
|
|
mesh.doubleSided = true;
|
|
group.add( mesh );
|
|
|
|
/*
|
|
mesh = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { color: 0xff0000, opacity: 0.5, transparent: true, wireframe: true, wireframeLinewidth: 10 } ) );
|
|
mesh.doubleSided = true;
|
|
group.add( mesh );
|
|
*/
|
|
|
|
// LIGHTS
|
|
|
|
var ambient = new THREE.AmbientLight( 0x80ffff );
|
|
scene.add( ambient );
|
|
|
|
var directional = new THREE.DirectionalLight( 0xffff00 );
|
|
scene.add( directional );
|
|
|
|
canvasRenderer = new THREE.CanvasRenderer();
|
|
canvasRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
|
|
container.appendChild( canvasRenderer.domElement );
|
|
|
|
svgRenderer = new THREE.SVGRenderer();
|
|
svgRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
|
|
svgRenderer.setQuality( 'low' );
|
|
container.appendChild( svgRenderer.domElement );
|
|
|
|
webglRenderer = new THREE.WebGLRenderer();
|
|
webglRenderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
|
|
// webglRenderer.setFaceCulling( 0 );
|
|
container.appendChild( webglRenderer.domElement );
|
|
|
|
stats = new Stats();
|
|
stats.domElement.style.position = 'absolute';
|
|
stats.domElement.style.top = '0px';
|
|
container.appendChild( stats.domElement );
|
|
|
|
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
|
|
|
|
}
|
|
|
|
function onDocumentMouseMove(event) {
|
|
|
|
mouseX = ( event.clientX - windowHalfX );
|
|
mouseY = ( event.clientY - windowHalfY );
|
|
|
|
}
|
|
|
|
//
|
|
|
|
function animate() {
|
|
|
|
requestAnimationFrame( animate );
|
|
|
|
render();
|
|
stats.update();
|
|
|
|
}
|
|
|
|
function render() {
|
|
|
|
camera.position.x += ( mouseX - camera.position.x ) * .05;
|
|
camera.position.y += ( - mouseY - camera.position.y ) * .05;
|
|
camera.lookAt( scene.position );
|
|
|
|
group.rotation.y += 0.01;
|
|
|
|
/*
|
|
qrcode.rotation.x += 0.01;
|
|
qrcode.rotation.z += 0.02;
|
|
*/
|
|
|
|
canvasRenderer.render( scene, camera );
|
|
svgRenderer.render( scene, camera );
|
|
webglRenderer.render( scene, camera );
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|