|
|
@@ -1,258 +0,0 @@
|
|
|
-<!DOCTYPE html>
|
|
|
-<html lang="en">
|
|
|
- <head>
|
|
|
- <title>three.js misc - ubiquity - test</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="js/renderers/Projector.js"></script>
|
|
|
- <script src="js/renderers/SVGRenderer.js"></script>
|
|
|
- <script src="js/renderers/SoftwareRenderer.js"></script>
|
|
|
-
|
|
|
- <script src="js/libs/stats.min.js"></script>
|
|
|
-
|
|
|
- <script>
|
|
|
-
|
|
|
- var stats;
|
|
|
-
|
|
|
- var camera, scene;
|
|
|
- var svgRenderer, softwareRenderer, webglRenderer;
|
|
|
-
|
|
|
- var mesh, group;
|
|
|
-
|
|
|
- init();
|
|
|
- animate();
|
|
|
-
|
|
|
- function init() {
|
|
|
-
|
|
|
- var width = window.innerWidth / 2;
|
|
|
- var height = window.innerHeight / 2;
|
|
|
-
|
|
|
- camera = new THREE.PerspectiveCamera( 75, width / height, 1, 10000 );
|
|
|
- camera.position.z = 500;
|
|
|
-
|
|
|
- scene = new THREE.Scene();
|
|
|
- scene.autoUpdate = false;
|
|
|
- scene.background = new THREE.Color( 0xf0f0f0 );
|
|
|
-
|
|
|
- // QRCODE
|
|
|
-
|
|
|
- var loader = new THREE.JSONLoader();
|
|
|
- loader.load( 'models/json/QRCode.json', function ( geometry ) {
|
|
|
-
|
|
|
- mesh = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { vertexColors: THREE.FaceColors } ) );
|
|
|
- mesh.scale.x = mesh.scale.y = mesh.scale.z = 2;
|
|
|
- scene.add( mesh );
|
|
|
-
|
|
|
- } );
|
|
|
-
|
|
|
- // CUBES
|
|
|
-
|
|
|
- var cube = new THREE.BoxBufferGeometry( 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.PlaneBufferGeometry( 100, 100 ), new THREE.MeshBasicMaterial( { color: Math.random() * 0xffffff, side: THREE.DoubleSide } ) );
|
|
|
- mesh.position.y = - 500;
|
|
|
- mesh.scale.x = mesh.scale.y = mesh.scale.z = 2;
|
|
|
- scene.add( mesh );
|
|
|
-
|
|
|
- // CYLINDER
|
|
|
-
|
|
|
- mesh = new THREE.Mesh( new THREE.CylinderBufferGeometry( 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();
|
|
|
- var material = new THREE.MeshBasicMaterial( { vertexColors: THREE.FaceColors, side: THREE.DoubleSide } );
|
|
|
-
|
|
|
- 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.Vector3(
|
|
|
- Math.random() * 100 - 50,
|
|
|
- Math.random() * 100 - 50,
|
|
|
- Math.random() * 100 - 50
|
|
|
- );
|
|
|
-
|
|
|
- var v1 = new THREE.Vector3(
|
|
|
- Math.random() * 100 - 50,
|
|
|
- Math.random() * 100 - 50,
|
|
|
- Math.random() * 100 - 50
|
|
|
- );
|
|
|
-
|
|
|
- var v2 = new THREE.Vector3(
|
|
|
- Math.random() * 100 - 50,
|
|
|
- Math.random() * 100 - 50,
|
|
|
- Math.random() * 100 - 50
|
|
|
- );
|
|
|
-
|
|
|
- v0.add( v );
|
|
|
- v1.add( v );
|
|
|
- v2.add( v );
|
|
|
-
|
|
|
- var face = new THREE.Face3(
|
|
|
- geometry.vertices.push( v0 ) - 1,
|
|
|
- geometry.vertices.push( v1 ) - 1,
|
|
|
- geometry.vertices.push( v2 ) - 1,
|
|
|
- null,
|
|
|
- new THREE.Color( Math.random() * 0xffffff )
|
|
|
- );
|
|
|
-
|
|
|
- geometry.faces.push( face );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- geometry.computeFaceNormals();
|
|
|
-
|
|
|
- group = new THREE.Mesh( geometry, material );
|
|
|
- group.scale.set( 2, 2, 2 );
|
|
|
- scene.add( group );
|
|
|
-
|
|
|
- // SPRITES
|
|
|
-
|
|
|
- var textureLoader = new THREE.TextureLoader();
|
|
|
-
|
|
|
- textureLoader.load( 'textures/sprite.png', function ( texture ) {
|
|
|
-
|
|
|
- var material = new THREE.SpriteMaterial( { map: texture, transparent: true } );
|
|
|
-
|
|
|
- for ( var i = 0; i < 50; i ++ ) {
|
|
|
-
|
|
|
- var sprite = new THREE.Sprite( material );
|
|
|
- sprite.position.x = Math.random() * 1000 - 500;
|
|
|
- sprite.position.y = Math.random() * 1000 - 500;
|
|
|
- sprite.position.z = Math.random() * 1000 - 500;
|
|
|
- sprite.scale.set( 64, 64, 1 );
|
|
|
- scene.add( sprite );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- } );
|
|
|
-
|
|
|
- for ( var i = 0; i < 50; i ++ ) {
|
|
|
-
|
|
|
- var material = new THREE.SpriteMaterial( { color: Math.random() * 0xffffff } );
|
|
|
- var sprite = new THREE.Sprite( material );
|
|
|
- sprite.position.x = Math.random() * 1000 - 500;
|
|
|
- sprite.position.y = Math.random() * 1000 - 500;
|
|
|
- sprite.position.z = Math.random() * 1000 - 500;
|
|
|
- sprite.scale.set( 64, 64, 1 );
|
|
|
- scene.add( sprite );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- // LIGHTS
|
|
|
-
|
|
|
- var ambient = new THREE.AmbientLight( 0x80ffff );
|
|
|
- scene.add( ambient );
|
|
|
-
|
|
|
- var directional = new THREE.DirectionalLight( 0xffff00 );
|
|
|
- directional.position.set( - 1, 0.5, 0 );
|
|
|
- scene.add( directional );
|
|
|
-
|
|
|
- svgRenderer = new THREE.SVGRenderer();
|
|
|
- svgRenderer.setSize( width, height );
|
|
|
- svgRenderer.setQuality( 'low' );
|
|
|
- document.body.appendChild( svgRenderer.domElement );
|
|
|
-
|
|
|
- softwareRenderer = new THREE.SoftwareRenderer();
|
|
|
- softwareRenderer.setSize( width, height );
|
|
|
- document.body.appendChild( softwareRenderer.domElement );
|
|
|
-
|
|
|
- webglRenderer = new THREE.WebGLRenderer( { antialias: true } );
|
|
|
- webglRenderer.setPixelRatio( window.devicePixelRatio );
|
|
|
- webglRenderer.setSize( width, height );
|
|
|
- document.body.appendChild( webglRenderer.domElement );
|
|
|
-
|
|
|
- stats = new Stats();
|
|
|
- document.body.appendChild( stats.dom );
|
|
|
-
|
|
|
- //
|
|
|
-
|
|
|
- window.addEventListener( 'resize', onWindowResize, false );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- function onWindowResize() {
|
|
|
-
|
|
|
- var width = window.innerWidth / 2;
|
|
|
- var height = window.innerHeight / 2;
|
|
|
-
|
|
|
- camera.aspect = width / height;
|
|
|
- camera.updateProjectionMatrix();
|
|
|
-
|
|
|
- svgRenderer.setSize( width, height );
|
|
|
- softwareRenderer.setSize( width, height );
|
|
|
- webglRenderer.setSize( width, height );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- //
|
|
|
-
|
|
|
- function animate() {
|
|
|
-
|
|
|
- requestAnimationFrame( animate );
|
|
|
-
|
|
|
- render();
|
|
|
- stats.update();
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- function render() {
|
|
|
-
|
|
|
- var time = Date.now() * 0.0002;
|
|
|
-
|
|
|
- camera.position.x = Math.sin( time ) * 500;
|
|
|
- camera.position.z = Math.cos( time ) * 500;
|
|
|
- camera.lookAt( scene.position );
|
|
|
-
|
|
|
- group.rotation.x += 0.01;
|
|
|
-
|
|
|
- scene.updateMatrixWorld();
|
|
|
-
|
|
|
- svgRenderer.render( scene, camera );
|
|
|
- softwareRenderer.render( scene, camera );
|
|
|
- webglRenderer.render( scene, camera );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- </script>
|
|
|
-
|
|
|
- </body>
|
|
|
-</html>
|
Mugen87