Three.js 学习笔记-入门知识

文档

中文介绍
 中文翻译版
 github地址
 英文文档
翻译的的不是完整版，列出了常用的，想要学的仔细还是看英文文档

浏览器支持WebGL

Chrome 9+ Firefox 4+ Opera 15+ Safari 5.1+ IE 11 Microsoft Edge

WebGL兼容性检查

if (Detector.webgl) {
    // Initiate function or other initializations here
    animate();
} else {
    var warning = Detector.getWebGLErrorMessage();
    document.getElementById('container').appendChild(warning);
}

文件格式

尽管three.js提供了许多加载器，但选择正确的格式和工作流程将在以后节省时间和挫折，可能的话建议使用glTF（GL传输格式，它是使用JSON标准的3D场景和模型的文件格式。它的创作者将其描述为“3D的JPEG”。格式的.GLB和.GLTF版本都得到了很好的支持。由于glTF专注于运行时资产交付，因此传输和加载速度都很紧凑。功能包括网格，材质，纹理，皮肤，骨架，变形目标，动画，灯光和相机。
sketchfab可以访问公共的glTF文件
glTF-Blender-Exporter 导出glTF工具
obj2glTF obj转glTF
FBX2glTF FBX转glTF
编码指南

three.js 包含三个基本对象

场景(scene)
摄像机(camera)
渲染器(renderer)

实例

<html>
    <head>
        <title>My first three.js app</title>
        <style>
            body { margin: 0; }
            canvas { width: 100%; height: 100% }
        </style>
    </head>
    <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: 0x00ff00 } ); //材质
            var cube = new THREE.Mesh( geometry, material );
            scene.add( cube );

            camera.position.z = 5;

            var animate = function () {
                requestAnimationFrame( animate );//实时渲染，根据电脑的帧率

                cube.rotation.x += 0.01;
                cube.rotation.y += 0.01;

                renderer.render( scene, camera );
            };

            animate();
        </script>
    </body>
</html>

Three.js 学习笔记-入门知识

文档

浏览器支持WebGL

WebGL兼容性检查

文件格式

three.js 包含三个基本对象

实例

猜你喜欢