[three.js]学习笔记
再此之前必须提一个sublime的插件，HTML-CSS-JS Prettify（注意插件需要node.js的安装
装完过后右键菜单Prettify code或者ctrl+shift+h，就会看到不再一团糟、格式干净的代码了。有人推荐TAG package，可以优化html代码，但是我遇到js乱码的情况比较多所以觉得很鸡肋。
Three.js is a library that makes WebGL - 3D in the browser - easy to use.
three.js的introduction倒是很简单易懂。
three.js 918KB jquery-1.12.3.js 286KB
three.min.js 486KB jquery-1.12.3.min.js 94.9KB压缩后的大小勉强能接受，不过还是jquery的5倍。
|workflow
１.Create the scene (scene, camera, renderer)
2.Create the cube (geometry, material, mesh)
3. Render the scene
4. Animate the scene
下面是演示代码：
<body>
<script src="js/three.js"></script>
<script>
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);
var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshBasicMaterial({
color: 0x2ea9df,
wireframe: true
});
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
var render = function() {
requestAnimationFrame(render);
cube.rotation.x += 0.1;
cube.rotation.y += 0.1;
renderer.render(scene, camera);
};
render();
</script>
</body>用浏览器打开可以看到一个旋转的正方体。（用了露草色 #3ea9df ，默认wireframe：false，改为true
2016.4.11
试着自己敲代码熟悉，不过总是无法成功，最后发现用webGLRenderer就能显示，而CanvasRenderer就会失败。
未找到很好的解释，不过有对两种渲染方法的比较：[日语] Three.jsの基本②
WebGLRendererだとリッチな処理になります。CanvasRendererは雑な処理になります。
提到在低配电脑、移动端需要用性能差一些的CanvasRenderer。在threejs官网则有解释:
The Canvas renderer displays your beautifully crafted scenes not using WebGL, but draws it using the (slower) Canvas 2D Context API.
CanvasRender不适用webGL而是使用Canvas 2D Context 接口
转载于:https://my.oschina.net/sikou/blog/656032
上一篇： JAVA--GUI:Dialog组件
下一篇： 协程爬取doutula网站所有表情包