[three.js]学习笔记

为什么80%的码农都做不了架构师？>>>

再此之前必须提一个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

[three.js]学习笔记相关推荐

ArcGIS JS 学习笔记4 实现地图联动
原文:ArcGIS JS 学习笔记4 实现地图联动 1.开篇守望屁股实在太好玩了,所以最近有点懒,这次就先写个简单的来凑一下数.这次我的模仿目标是天地图的地图联动. 天地的地图联动不仅地图有联动,而 ...
backbone.js学习笔记
backbone.js学习笔记之前只接触过jQuery,看来Backbone是除了jQuery的第二大JS框架... backbone到底是个啥? 其实刚开始我也不知道=_=,我是这周二才听说居然还 ...
node.js学习笔记
# node.js学习笔记标签(空格分隔): node.js---## 一内置模块学习 ### 1. http 模块 ``` //1 导入http模块 const http =require('ht ...
node.js学习笔记14—微型社交网站
node.js学习笔记14-微型社交网站 1.功能分析微博是以用户为中心,因此需要有注册和登录功能. 微博最核心的功能是信息的发表,这个功能包括许多方面,包括:数据库访问,前端显示等. 一个完整的微 ...
WebGL three.js学习笔记 6种类型的纹理介绍及应用
WebGL three.js学习笔记 6种类型的纹理介绍及应用本文所使用到的demo演示: 高光贴图Demo演示反光效果Demo演示(因为是加载的模型,所以速度会慢) (一)普通纹理计算机图形学 ...
html 流程控制,HTML5独家分享：原生JS学习笔记2——程序流程控制
当当当当 .....楼主又来了!新一期的js学习笔记2--程序流程控制更新了! 想一键获取全部js学习笔记的可以给楼主留言哦! js中的程序控制语句常见的程序有三种执行结构: 1.顺序结构 2.分支 ...
基于jquery的插件turn.js学习笔记
基于jquery的插件turn.js学习笔记简介 turn.js是一个可以实现3d书籍展示效果的jq插件,使用html5和css3来执行效果.可以很好的适应于ios和安卓等触摸设备. How it ...
Node.js学习笔记8
Node.js学习笔记8 HTTP服务器与客户端 Node.js的http模块,封装了一个高效的HTTP服务器和一个简易的HTTP客户端 http.server是一个基于事件的HTTP服务器,核心由N ...
node.js学习笔记5——核心模块1
node.js学习笔记5--核心模块1 Node.js核心模块主要内容包括:(1)全局对象 (2)常用工具 (3)事件机制 (4)文件系统访问 (5)HTTP服务器与客户端一: 全局对象 Node. ...
Vue.js 学习笔记十二 Vue发起Ajax请求
首先需要导入vue-resource.js,可以自己下载引入,也可以通过Nuget下载,它依赖于Vue.js. 全局使用方式: Vue.http.get(url,[options]).then(suc ...

[three.js]学习笔记

|workflow

[three.js]学习笔记相关推荐

最新文章

热门文章