Bo的博客: 五月 2017

2017年5月28日星期日

如何显示代码

参考了一个帖子：
http://www.myciscolab.net/2016/02/google-blog.html

使用js，在<head>之前：

<script src="//google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>

使用css

.post .code { 
  display: block; /* fixes a strange ie margin bug */
  font-family: Courier New; 
  font-size: 10pt; 
  overflow:auto; 
  background: #f0f0f0 url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAASwCAYAAAAt7rCDAAAABHNCSVQICAgIfAhkiAAAAQJJREFUeJzt0kEKhDAMBdA4zFmbM+W0upqFOhXrDILwsimFR5pfMrXW5jhZr7PwRlxVX8//jNHrGhExjXzdu9c5IiIz+7iqVmB7Hwp4OMa2nhhwN/PRGEMBh3Zjt6KfpzPztxW9MSAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzAMwzB8HS+J9kUTvzEDMwAAAABJRU5ErkJggg==) left top repeat-y;
  border: 1px solid #ccc;
  padding: 10px 10px 10px 21px;
  max-height:200px;
  line-height: 1.2em;
}

然后在需要显示代码时，在HTML模式下编辑：

<pre class="code prettyprint">
代码
</pre>

Three.js(3)

第一个项目：

在<title>下面添加 js 源文件

<script type="text/javascript" src="three.js"></script>

然后是<script></script>中添加js代码:

        function init() {

            // renderer
            var renderer = new THREE.WebGLRenderer({
                canvas: document.getElementById('mainCanvas') });
            renderer.setClearColor(0x000000); // black

            // scene
            var scene = new THREE.Scene();
            // camera
            var camera = new THREE.PerspectiveCamera(45, 4 / 3, 1, 1000);
            camera.position.set(0, 0, 5); scene.add(camera);

            // a cube in the scene
            var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 2, 3),
                new THREE.MeshBasicMaterial({ color: 0xff0000 }) );
            scene.add(cube);

            // render
            renderer.render(scene, camera);
        }


在<body onload="init()">里添加<canvas>画布



<canvas id="mainCanvas" widh="400px" height="300px"></canvas>

运行结果如下：



解释说明：

在<body>中， onload 会载入在<script>里定义的 function。

一般来说，three.js 包含4个部分：


render（渲染器）


scene（场景）


camera（照相机）


物体

说明：

场景：scene，用来包含物体。创建方法：

var scene = new THREE.Scene();  // 场景

照相机：camera 这里的照相机采用和opengl相同的方向，即 右--X正向， 上--Y正向， 穿出屏幕

向外--Z正向，创建方法：

var camera = new THREE.PerspectiveCamera(45, 4 / 3, 1, 1000);
camera.position.set(0, 0, 5); 
scene.add(camera);
物体：
var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 2, 3),
    new THREE.MeshBasicMaterial({ color: 0xff0000 }) );
scene.add(cube);
渲染器：render，这里是在body中定义了canvas之后的设置方法。并将背景色设置为黑色。
var renderer = new THREE.WebGLRenderer({
    canvas: document.getElementById('mainCanvas') });
renderer.setClearColor(0x000000); // black


最后，将场景和摄像机添加到渲染器中：
renderer.render(scene, camera);

Three.js(2)

在编辑器中新建项目。HTML5文件。

html5文件的基本结构：

<html>
<head>
<title>...</title>
</head>
<body>
Text
</body>
</html>

Javascript 代码位置：
[1]：
位于 <head> 标签的 <title> 之下：
<head>
<title>.....</title>
<script>
Javascript code
</script>
</head>
[2]:
独立的 .js 文件，需要在 <head> 中指定src文件：文件：
<head>
<title>...</title>
<script src="file.js"></script>
</head>
[3]:
推荐：独立的 .js 文件，在 </body> 之前放置 <script> 标签：
<body>
Text
<script src="file.js"></script>
</body>

2017年5月27日星期六

Three.js(1) 下载及调试

Three.js(1)

今天试试把以前荒废的Three.js 捡起来。

什么是Three.js？

3D+js：3维空间，用javascript编写。

在此网址下载，并解压：

https://github.com/mrdoob/three.js

Three.js 目录：

目录解释：

build：包含three.js（未压缩） three.min.js（压缩）

docs：api文档

editor：三维工具

examples：例子

src：源代码

test：测试代码

utils：脚本目录

Javascript开发工具：webstorm 可在以下网站下载：
https://www.jetbrains.com/webstorm/

调试代码：

在Chrome 浏览器中调试：
1. 用chorme浏览器打开js代码
2. 右击页面→审查元素
3. 在弹出窗体中单击 “Resources”标签
4. “Enable resource tracking”导入源文件
5. 选择 “Script”标签
6. 断点：在代码左侧的行数上双击

debug模式：
1. 刷新网页，重新载入代码
2. 弹出jscript标签，中止在断点处。

2017年5月28日星期日

如何显示代码

Three.js(3) 第一个项目

Three.js(3)

运行结果如下：

解释说明：

在<body>中， onload 会载入在<script>里定义的 function。

Three.js(2) js文件的位置