提交 25875b09 编写于 作者: M Mr.doob

Docs: Fixed code snippets formating.

上级 f4ce3b66
......@@ -14,20 +14,24 @@
<h2>Example</h2>
<code>
var Car = function () {
var Car = function () {
EventDispatcher.call( this );
this.start = function () {
this.dispatchEvent( { type: 'start', message: 'vroom vroom!' } );
};
};
};
var car = new Car();
car.addEventListener( 'start', function ( event ) {
var car = new Car();
car.addEventListener( 'start', function ( event ) {
alert( event.message );
} );
car.start();
} );
car.start();
</code>
<h2>Constructor</h2>
......
......@@ -20,7 +20,8 @@
<h2>Before we start</h2>
<div>Before you can use Three.js, you need somewhere to display it. Save the following HTML to a file on your computer, and open it in your browser.</div>
<code>&lt;html&gt;
<code>
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;My first Three.js app&lt;/title&gt;
&lt;style&gt;canvas { width: 100%; height: 100% }&lt;/style&gt;
......@@ -40,12 +41,13 @@
<div>To actually be able to display anything with Three.js, we need three things: A scene, a camera, and a renderer so we can render the scene with the camera.</div>
<code>var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
<code>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
</code>
<div>Let's take a moment to explain what's going on here. We have now set up the scene, our camera and the renderer. There are a few different cameras in Three.js, but we'll go more into that later. For now, let's use a PerspectiveCamera. The first attribute is the <strong>field of view</strong>.</div>
......@@ -62,10 +64,11 @@
<div><em>"That's all good, but where's that cube you promised?"</em> Let's add it now.</div>
<code>var geometry = new THREE.CubeGeometry(1,1,1);
var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
<code>
var geometry = new THREE.CubeGeometry(1,1,1);
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
</code>
......@@ -82,7 +85,8 @@
<div>If you copied the code from above into the HTML file we created earlier, you wouldn't be able to see anything. This is because we're not actually rendering anything yet. For that, we need what's called a <strong>render loop</strong>.</div>
<code>function render() {
<code>
function render() {
requestAnimationFrame(render);
renderer.render(scene, camera);
}
......@@ -97,8 +101,10 @@
<div>Add the following right above the <strong>renderer.render</strong> call in your <strong>render</strong> function:</div>
<code>cube.rotation.x += 0.1;
cube.rotation.y += 0.1;</code>
<code>
cube.rotation.x += 0.1;
cube.rotation.y += 0.1;
</code>
<div>This will be run every frame (60 times per second), and give the cube a nice rotation animation. Basically anything you want to move or change while the game / app is running, has to go through the render loop. You can of course call other functions from there, so that you don't end up with a <strong>render</strong> function that's hundreds of lines.
</div>
......@@ -108,14 +114,15 @@
<div>The full code is available below. Play around with it to get a better understanding of how it works.</div>
<code>&lthtml&gt
&lthead&gt
&lttitle&gtMy first Three.js app&lt/title&gt
&ltstyle&gtcanvas { width: 100%; height: 100% }&lt/style&gt
&lt/head&gt
&ltbody&gt
&ltscript src="https://raw.github.com/mrdoob/three.js/master/build/three.js"&gt&lt/script&gt
&ltscript&gt
<code>
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;My first Three.js app&lt;/title&gt;
&lt;style&gt;canvas { width: 100%; height: 100% }&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;script src="https://raw.github.com/mrdoob/three.js/master/build/three.js"&gt;&lt;/script&gt;
&lt;script&gt;
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
......@@ -139,9 +146,9 @@
renderer.render(scene, camera);
}
render();
&lt/script&gt
&lt/body&gt
&lt/html&gt
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code>
</body>
</html>
......@@ -29,6 +29,21 @@ var onDocumentLoad = function ( event ) {
document.body.innerHTML = text;
// handle code snippets formatting
var elements = document.getElementsByTagName( 'code' );
for ( var i = 0; i < elements.length; i ++ ) {
var element = elements[ i ];
text = element.textContent.trim();
text = text.replace( /^\t\t/gm, '' );
element.textContent = text;
}
// Edit button
var button = document.createElement( 'div' );
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册