|
|
@@ -11,10 +11,19 @@
|
|
|
margin: 0px;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
+
|
|
|
+ #info {
|
|
|
+ position: absolute;
|
|
|
+ top: 10px;
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
-
|
|
|
+ <div id="info">
|
|
|
+ <a href="http://threejs.org" target="_blank">three.js</a> webgl - Resolution-Independent Vector Fonts. <a href="https://github.com/mrdoob/three.js/issues/4746">info</a>.
|
|
|
+ </div>
|
|
|
<script src="../build/three.min.js"></script>
|
|
|
<script src="./js/controls/OrbitControls.js"></script>
|
|
|
|
|
|
@@ -65,21 +74,12 @@
|
|
|
|
|
|
<script>
|
|
|
|
|
|
- var container, stats;
|
|
|
+ var stats;
|
|
|
|
|
|
var camera, scene, renderer, controls;
|
|
|
|
|
|
var group, text;
|
|
|
|
|
|
- var targetRotation = 0;
|
|
|
- var targetRotationOnMouseDown = 0;
|
|
|
-
|
|
|
- var mouseX = 0;
|
|
|
- var mouseXOnMouseDown = 0;
|
|
|
-
|
|
|
- var windowHalfX = window.innerWidth / 2;
|
|
|
- var windowHalfY = window.innerHeight / 2;
|
|
|
-
|
|
|
var t = false;
|
|
|
|
|
|
function toggle() {
|
|
|
@@ -104,25 +104,13 @@
|
|
|
|
|
|
function init() {
|
|
|
|
|
|
- container = document.createElement( 'div' );
|
|
|
- document.body.appendChild( container );
|
|
|
-
|
|
|
- var info = document.createElement( 'div' );
|
|
|
- info.style.position = 'absolute';
|
|
|
- info.style.top = '10px';
|
|
|
- info.style.width = '100%';
|
|
|
- info.style.textAlign = 'center';
|
|
|
- info.innerHTML = 'Resolution-Independent Vector Fonts<br/><a href="https://github.com/mrdoob/three.js/issues/4746">rendered with three.js and WebGL </a>';
|
|
|
- container.appendChild( info );
|
|
|
-
|
|
|
camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
|
|
|
- camera.position.set( 0, 150, 500 );
|
|
|
-
|
|
|
+ camera.position.set( 0, 100, 500 );
|
|
|
|
|
|
controls = new THREE.OrbitControls( camera );
|
|
|
+ controls.center.set( 0, 100, 0 );
|
|
|
|
|
|
scene = new THREE.Scene();
|
|
|
-
|
|
|
|
|
|
var theText = "&"; // i % & j b 8
|
|
|
|
|
|
@@ -235,7 +223,7 @@
|
|
|
|
|
|
for (var i=0; i<subshape.holes.length;i++) {
|
|
|
hole = subshape.holes[i];
|
|
|
- console.log('hole', hole);
|
|
|
+ // console.log('hole', hole);
|
|
|
|
|
|
process = processShape(hole.curves, true);
|
|
|
|
|
|
@@ -340,20 +328,17 @@
|
|
|
|
|
|
//
|
|
|
|
|
|
- renderer = new THREE.WebGLRenderer();
|
|
|
+ renderer = new THREE.WebGLRenderer( { antialias: true } );
|
|
|
renderer.setClearColor( 0xf0f0f0 );
|
|
|
renderer.setSize( window.innerWidth, window.innerHeight );
|
|
|
-
|
|
|
- container.appendChild( renderer.domElement );
|
|
|
+ document.body.appendChild( renderer.domElement );
|
|
|
|
|
|
stats = new Stats();
|
|
|
stats.domElement.style.position = 'absolute';
|
|
|
stats.domElement.style.top = '0px';
|
|
|
- container.appendChild( stats.domElement );
|
|
|
-
|
|
|
- document.addEventListener( 'mousedown', onDocumentMouseDown, false );
|
|
|
+ document.body.appendChild( stats.domElement );
|
|
|
|
|
|
- //
|
|
|
+ document.addEventListener( 'mousedown', toggle, false );
|
|
|
|
|
|
window.addEventListener( 'resize', onWindowResize, false );
|
|
|
|
|
|
@@ -361,9 +346,6 @@
|
|
|
|
|
|
function onWindowResize() {
|
|
|
|
|
|
- windowHalfX = window.innerWidth / 2;
|
|
|
- windowHalfY = window.innerHeight / 2;
|
|
|
-
|
|
|
camera.aspect = window.innerWidth / window.innerHeight;
|
|
|
camera.updateProjectionMatrix();
|
|
|
|
|
|
@@ -371,14 +353,6 @@
|
|
|
|
|
|
}
|
|
|
|
|
|
- //
|
|
|
-
|
|
|
- function onDocumentMouseDown( event ) {
|
|
|
-
|
|
|
- toggle();
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
|
|
|
//
|
|
|
|
Mr.doob