Three.js人门案例

最新推荐文章于 2023-08-29 09:27:16 发布

白鹭凡

最新推荐文章于 2023-08-29 09:27:16 发布

阅读量319

点赞数

分类专栏： js WebGL 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_43506403/article/details/109351026

版权

js 同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

WebGL

2 篇文章 0 订阅

订阅专栏

刚入门 Three.js

什么是 Three.js？

Three.js 是一款 webGL 框架，由于其易用性被广泛应用。Three.js 在 WebGL 的 API 接口基础上，又进行的一层封装。它是由居住在西班牙巴塞罗那的程序员 Ricardo Cabbello Miguel 所开发，他更为人知的网名是 Mr.doob。

Three.js 以简单、直观的方式封装了 3D 图形编程中常用的对象。Three.js 在开发中使用了很多图形引擎的高级技巧，极大地提高了性能。另外，由于内置了很多常用对象和极易上手的工具，Three.js 的功能也非常强大。最后，Three.js 还是完全开源的，你可以在 GitHub 上找到它的源代码，并且有很多人贡献代码，帮助 Mr.doob 一起维护这个框架。

什么是 WebGL？

WebGL（Web 图形库）是一种 JavaScript API，用于在任何兼容的 Web 浏览器中呈现交互式 3D 和 2D 图形，而无需使用插件。WebGL 通过引入一个与 OpenGL ES 2.0 紧密相符合的 API，可以在 HTML5 元素中使用（简介引自 MDN）。

以我的理解，WebGL 给我们提供了一系列的图形接口，能够让我们通过 JavaScript 去使用 GPU 来进行浏览器图形渲染的工具。

WEBGL 和 Three.js 的关系

WebGL 原生 API 是一种非常低级的接口，而且还需要一些数学和图形学的相关技术。对于没有相关基础的人来说，入门真的很难，Three.js 将入门的门槛降低了一大截，对 WebGL 进行封装，简化我们创建三维动画场景的过程。只要你有一定的 JavaScript 基础，有一定的前端经验，我坚信，用不了多长时间，三维制作会变得很简单。

用最简单的一句话概括：WebGL 和 Three.js 的关系，相当于 JavaScript 和 jQuery 的关系。

Three.js 入门

四大组建

场景

const scene = new THREE.Scene();

相机

透视相机：远处小，近处大正透视投影：远处近处一样大

const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

四个参数（fov,aspect,near,far）：
视野/视角（相当于眼睛睁开的大小，上平面和下平面的夹角）
宽高比
近裁剪平面
远裁剪平面

渲染器 render或animate loop。

const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

在这里插入图片描述

<!DOCTYPE html>
<html>

<head>
    <meta charset=utf-8>
    <title>我的第一个Three.js案例</title>
    <style>
        body {
            margin: 0;
        }
        
        canvas {
            width: 100%;
            height: 100%;
            display: block;
        }
    </style>
</head>

<body onload="init()">
    <script src="https://cdn.bootcss.com/three.js/92/three.js"></script>
    <script>
        //声明一些全局变量   
        var renderer, camera, scene, geometry, material, mesh;
        //初始化场景  
        function initScene() {
            //实例化场景  
            scene = new THREE.Scene();

        }
        //初始化相机 
        function initCamera() {
            //实例化相机  
            camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
            camera.position.set(0, 0, 15);
            // camera.position.x = 5; // 相机移 5 米
        }
        //初始化渲染器   
        function initRenderer() {
            renderer = new THREE.WebGLRenderer(); //实例化渲染器      
            renderer.setSize(window.innerWidth, window.innerHeight); //设置宽和高   
            document.body.appendChild(renderer.domElement); //添加到dom   
        }

        //创建模型 
        function initMesh() {
            geometry = new THREE.BoxGeometry(2, 2, 2); // 长宽高  //创建几何体  
            material = new THREE.MeshNormalMaterial(); //创建材质      
            mesh = new THREE.Mesh(geometry, material); //创建网格    
            scene.add(mesh); //将网格添加到场景 
        }
        //运行动画    
        function animate() {
            //若你想在浏览器下次重绘之前继续更新下一帧动画，那么回调函数自身必须再次调用window.requestAnimationFrame()
            requestAnimationFrame(animate); //循环调用函数    
            mesh.rotation.x += 0.01; //每帧网格模型的沿x轴旋转0.01弧度  
            mesh.rotation.y += 0.02; //每帧网格模型的沿y轴旋转0.02弧度   
            renderer.render(scene, camera); //渲染界面  
        }
        //初始化函数，页面加载完成是调用    
        function init() {
            initScene();
            initCamera();
            initRenderer();
            initMesh();
            animate();
        }
    </script>
</body>

</html>

白鹭凡

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Three.js人门案例

刚入门 Three.js什么是 Three.js？Three.js 是一款 webGL 框架，由于其易用性被广泛应用。Three.js 在 WebGL 的 API 接口基础上，又进行的一层封装。它是由居住在西班牙巴塞罗那的程序员 Ricardo Cabbello Miguel 所开发，他更为人知的网名是 Mr.doob。Three.js 以简单、直观的方式封装了 3D 图形编程中常用的对象。Three.js 在开发中使用了很多图形引擎的高级技巧，极大地提高了性能。另外，由于内置了很多常用对象和极易
复制链接

扫一扫