|
|
@@ -15,21 +15,16 @@
|
|
|
<body>
|
|
|
|
|
|
<script src="../build/three.min.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 src="obj/Qrcode.js"></script>
|
|
|
-
|
|
|
<script>
|
|
|
|
|
|
var stats;
|
|
|
|
|
|
var camera, scene;
|
|
|
- var canvasRenderer, svgRenderer, softwareRenderer, webglRenderer;
|
|
|
+ var canvasRenderer, webglRenderer;
|
|
|
|
|
|
- var mesh;
|
|
|
+ var texture, mesh;
|
|
|
|
|
|
init();
|
|
|
animate();
|
|
|
@@ -37,16 +32,18 @@
|
|
|
function init() {
|
|
|
|
|
|
var width = window.innerWidth / 2;
|
|
|
- var height = window.innerHeight / 2;
|
|
|
+ var height = window.innerHeight;
|
|
|
|
|
|
camera = new THREE.PerspectiveCamera( 70, width / height, 1, 1000 );
|
|
|
camera.position.z = 400;
|
|
|
|
|
|
scene = new THREE.Scene();
|
|
|
|
|
|
- var geometry = new THREE.CubeGeometry( 200, 200, 200 );
|
|
|
+ var geometry = new THREE.CubeGeometry( 200, 200, 200, 4, 4, 4 );
|
|
|
|
|
|
- var texture = THREE.ImageUtils.loadTexture( 'textures/ash_uvgrid01.jpg' );
|
|
|
+ texture = THREE.ImageUtils.loadTexture( 'textures/ash_uvgrid01.jpg' );
|
|
|
+ texture.wrapS = THREE.RepeatWrapping;
|
|
|
+ texture.wrapT = THREE.RepeatWrapping;
|
|
|
|
|
|
var material = new THREE.MeshBasicMaterial( { map: texture } );
|
|
|
|
|
|
@@ -58,17 +55,6 @@
|
|
|
canvasRenderer.setSize( width, height );
|
|
|
document.body.appendChild( canvasRenderer.domElement );
|
|
|
|
|
|
- svgRenderer = new THREE.SVGRenderer();
|
|
|
- svgRenderer.setClearColor( 0xf0f0f0 );
|
|
|
- svgRenderer.setSize( width, height );
|
|
|
- svgRenderer.setQuality( 'low' );
|
|
|
- document.body.appendChild( svgRenderer.domElement );
|
|
|
-
|
|
|
- softwareRenderer = new THREE.SoftwareRenderer();
|
|
|
- softwareRenderer.setClearColor( 0xf0f0f0 );
|
|
|
- softwareRenderer.setSize( width, height );
|
|
|
- document.body.appendChild( softwareRenderer.domElement );
|
|
|
-
|
|
|
webglRenderer = new THREE.WebGLRenderer( { antialias: true } );
|
|
|
webglRenderer.setClearColor( 0xf0f0f0 );
|
|
|
webglRenderer.setSize( width, height );
|
|
|
@@ -88,14 +74,12 @@
|
|
|
function onWindowResize() {
|
|
|
|
|
|
var width = window.innerWidth / 2;
|
|
|
- var height = window.innerHeight / 2;
|
|
|
+ var height = window.innerHeight;
|
|
|
|
|
|
camera.aspect = width / height;
|
|
|
camera.updateProjectionMatrix();
|
|
|
|
|
|
canvasRenderer.setSize( width, height );
|
|
|
- svgRenderer.setSize( width, height );
|
|
|
- softwareRenderer.setSize( width, height );
|
|
|
webglRenderer.setSize( width, height );
|
|
|
|
|
|
}
|
|
|
@@ -113,20 +97,24 @@
|
|
|
|
|
|
function render() {
|
|
|
|
|
|
- var time = Date.now() * 0.0002;
|
|
|
+ var time = performance.now() * 0.0001;
|
|
|
|
|
|
camera.position.x = Math.sin( time ) * 500;
|
|
|
camera.position.z = Math.cos( time ) * 500;
|
|
|
camera.lookAt( scene.position );
|
|
|
|
|
|
- mesh.rotation.x += 0.01;
|
|
|
- mesh.rotation.y += 0.02;
|
|
|
+ texture.repeat.x = Math.sin( time ) * 0.5 + 0.5;
|
|
|
+ texture.repeat.y = Math.cos( time ) * 0.5 + 0.5;
|
|
|
+
|
|
|
+ texture.offset.x = Math.sin( time );
|
|
|
+ texture.offset.y = Math.cos( time );
|
|
|
+
|
|
|
+ mesh.rotation.x = time * 2;
|
|
|
+ mesh.rotation.y = time * 4;
|
|
|
|
|
|
scene.updateMatrixWorld();
|
|
|
|
|
|
canvasRenderer.render( scene, camera );
|
|
|
- svgRenderer.render( scene, camera );
|
|
|
- softwareRenderer.render( scene, camera );
|
|
|
webglRenderer.render( scene, camera );
|
|
|
|
|
|
}
|
Mr.doob