[three.js]学习笔记

时间 2019-11-05

原文原文链接

再此以前必须提一个sublime的插件，HTML-CSS-JS Prettify（注意插件须要node.js的安装html

装完事后右键菜单Prettify code或者ctrl+shift+h，就会看到再也不一团糟、格式干净的代码了。有人推荐TAG package，能够优化html代码，可是我遇到js乱码的状况比较多因此以为很鸡肋。html5

Three.js is a library that makes WebGL - 3D in the browser - easy to use.java

three.js的introduction却是很简单易懂。node

three.js      918KB            jquery-1.12.3.js      286KB
three.min.js  486KB            jquery-1.12.3.min.js  94.9KB

压缩后的大小勉强能接受，不过仍是jquery的5倍。jquery

|workflow

１.Create the scene (scene, camera, renderer)web

2.Create the cube (geometry, material, mesh)canvas

3. Render the scene浏览器

4. Animate the sceneapp

下面是演示代码：dom

<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 接口