好家伙,这东西太帅了,我要学会

先放张帅图(都是用three.js做出来的,这我学习动力直接拉满)

还有另外一个

Junni is...

帧数太高,录不了

开始学习

官方文档

1.Three.js是什么?

Three.js是一款运行在浏览器中的 3D 引擎（基于WebGL的API的封装），你可以用它来创造你所需要的一系列3D动画场景，

2.安装,我们可以直接去到github上下载

选择要使用的版本

这里我们偷懒,直接用最方便的

<script type="module">

            import * as THREE from 'https://unpkg.com/three/build/three.module.js';

</script>

更多安装方法

安装 – three.js docs (threejs.org)

3.上手

three.js三大要素

场景（scene）、相机（camera）、渲染器（renderer）

3.1.场景（scene）

我们把它抽象成一个什么都没的房间

哦,他建立在xyz轴坐标之上

场景允许在什么地方、摆放什么东西来交给three.js来进行渲染，场景也就是放置物体、灯光和相机的地方。

使用

const scene = new THREE.Scene(); // 创建场景

来创建一个新场景

3.2.相机（camera）

想象把你的眼球挖下来

想象有个相机来代替你的眼睛去"观察"这个场景

在场景中需要添加一个相机，相机用来确定观察位置、方向、角度，相机看到的内容，就是我们最终在屏幕上看到的内容。

可以远程控制相机移动，摄像机传给远程电脑上展示出来的画面，就是Threejs在屏幕上呈现的画面

使用:

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

来新建一个相机对象

参数:

来自Three.js基础入门（一） - 掘金 (juejin.cn)

3.3.渲染器（renderer）

渲染器的作用就是将相机拍摄出的画面在浏览器中呈现出来。

Three.js中有很多种类的渲染器，例如webGLRenderer、canvasRenderer、SVGRenderer，通常使用的是WebGLRenderer渲染器。

使用

const renderer = new THREE.WebGLRenderer();

创建一个新的WebGLRenderer渲染器对象

4.画点东西

好了,我大概懂了,接下来我们来画点东西

来画官网的实例吧

<html>

    <head>

        <meta charset="utf-8">

        <title>My first three.js app</title>

        <style>

            body { margin: 0; }

        </style>

    </head>

    <body>

        <script type="module">

            import * as THREE from 'https://unpkg.com/three/build/three.module.js';

            //新建场景对象

            const scene = new THREE.Scene();

            //新建相机对象

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

            //新建渲染器对象

            const renderer = new THREE.WebGLRenderer();

            renderer.setSize( window.innerWidth, window.innerHeight );// 通过调用 setSize() 方法设置渲染的长宽（设置渲染器为全屏）

            //dom操作添加渲染器

            document.body.appendChild( renderer.domElement );

            //添加立方体

            const geometry = new THREE.BoxGeometry( 1, 1, 1 );

            //添加纹理

            const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );

            //把纹理塞到立方体上

            const cube = new THREE.Mesh( geometry, material );

            //将立方体添加到场景中

            scene.add( cube );

            //移动相机,避免相机与物体重合

            camera.position.z = 5;

            function animate() {//动画请求框架

                requestAnimationFrame( animate );

                //改变正方体在场景中的位置,让正方体动起来

                cube.rotation.x += 0.01;

                cube.rotation.y += 0.01;

                renderer.render( scene, camera ); // 结合场景和相机进行渲染，即用摄像机拍下此刻的场景（最后一步）

            }

            animate();

        </script>

    </body>

</html>

来看看效果：

当然我们也可以让它加快一点转速

function animate() {

//动画请求框架

                requestAnimationFrame( animate );

                //改变正方体在场景中的位置,让正方体动起来

                cube.rotation.x += 0.999;

                cube.rotation.y += 0.999;

                renderer.render( scene, camera ); // 结合场景和相机进行渲染，即用摄像机拍下此刻的场景（最后一步）

            }

来看看效果

gif效果显示不出来，想象一下有个绿色的正方体在中间鬼畜就对了

5.课后习题

 function animate() {
　　　　　//请求-动画-框架

        requestAnimationFrame( animate );

        //改变正方体在场景中的位置,让正方体动起来

                cube.rotation.x += 0.01;

        cube.rotation.y += 0.01;

        renderer.render( scene, camera ); // 结合场景和相机进行渲染，即用摄像机拍下此刻的场景（最后一步）

            }

5.1.requestAnimationFrame()是什么?

动画渲染部分为什么不使用定时器setTimeout而使用requestAnimationFrame()?

下章回答

第135篇:Three.js基础入门的更多相关文章

JS基础入门篇（三十五）—面向对象（二）
如果没有面向对象这种抽象概念的小伙伴,建议先看一下我写的JS基础入门篇(三十四)-面向对象(一)
JS基础入门篇（二十七）—BOM
虽然上次写到js基础篇(二十四),这次直接写到(二十七).是为了提醒自己中间有几篇没写.特此说明一下啊. 1.window.open() 使用a标签呢,点击一下a标签页面才会跳转,有时候我们需要做的操 ...
JS基础入门篇（六）— 数据类型
1.数据类型数据类型:我感觉就是对数据的种类进行分类.就好比把人分为儿童,青少年,中年,老年一样. 基础数据类型: Number(数字),String(字符串),Null(空),Undefined( ...
JS基础入门篇（三）—使用JS获取页面中某个元素的4种方法以及之间的差别（一）
1.使用JS获取页面中某个元素的4种方法 1.通过id名获取元素 document.getElementById("id名"); 2.通过class名获取元素 document.g ...
JS基础入门篇（四）—this的使用，模拟单选框，选项卡和复选框
1.this的使用 this js中的关键字 js内部已经定义好了,可以不声明直接使用 this的指向问题 1. 在函数外部使用 this指向的是window 2. 在函数内部使用有名函数直接调 ...
JS基础入门篇（二十四）—DOM（下）
1.offsetLeft/offsetTop offsetLeft/offsetTop : 到定位父级节点的距离. <!DOCTYPE html> <html lang=" ...
JS基础入门篇（三）— for循环，取余，取整。
1.for循环 1.for的基本简介作用: 根据一定的条件,重复地执行一行或多行代码语法: for( 初始化 ; 判断条件 ; 条件改变 ){ 代码块 } 2.for循环的执行顺序 <bod ...
JS基础入门篇（七）—运算符
1.算术运算符 1.算术运算符算术运算符:+ ,- ,* ,/ ,%(取余) ,++ ,-- . 重点:++和--前置和后置的区别. 1.1 前置 ++ 和后置 ++ 前置++:先自增值,再使用值 ...
JS基础入门篇（三十四）— 面向对象（一）
1.对象对象的定义 : 对象是由键值对组成的无序集合. 创建对象两种方法 : 方法一 : 字面量方法 var obj = {name: "k"}; 方法二 : new O ...
JS基础入门篇（四十三）—ES6（二）
1.对象简洁表示法原来写法 var name = "lzf"; var gender = "male"; var fn = function(){consol ...

随机推荐

[转帖]焱融全闪系列科普| 为什么 SSD 需要 NVMe？
https://xie.infoq.cn/article/7026237b455c7d62f33afc4a9 NVMe 的由来目前机械硬盘大多数使用 SATA (Serial ATA Advance ...
手工创建一个带sticky模块的nginx镜像并且实现容器化负载均衡的方法
最近想进行容器化运行的nginx反向代理负载均衡服务. 找了一下 dockerhub上面的 nginx 发现里面不包含 sticky模块. 会报错为: nginx: [emerg] unknown d ...
浅谈kafka
作者:京东科技徐拥入门 1.什么是kafka? apache Kafka is a distributed streaming platform. What exactly dose that m ...
js-正则表达式边界符和前瞻、后顾的使用-保证你看明白
创建正则表达式第两种方式 1==>通过new字符的方式,来创建正则表达式 2==>通过创建字面量的方式去创建 1.new字符的方式 let regexp=new RegExp(/123/) ...
2020美亚个人赛wp
案例背景 2020年9月,数名信用卡持有人向警方报案,指他们的信用卡被不知名人士在一家本地网上商店购买手机.订单大部分来自海外的网络地址,但有一宗订单来自本地.警方经调查后发现该本地网络地址的注册地址 ...
微信小程序网页嵌入开发
无脑开发下载微信开发者工具新建一个项目找到index开头的进去全选删除粘贴下面代码   <web-v ...
.NET Core(C#) PadLeft和PadRight特定格式字符串长度补齐的方法和js中如何填充字符串
.NET Core(C#) 1､PadLeft和PadRight使用说明两个方法都是对字符串格式化进行补齐填充,PadLeft是左边,而PadRight是右边 '1010'.PadLeft(10,' ...
springboot security 权限控制 -- @PreAuthorize 的使用
1. 说明 security 鉴权方式常用的有两种配置,1.配置文件中配置:2.使用注解标注:他们都是基于 acess 表达式,如果需要自定义逻辑的鉴权认证,只需要自定义 access 表达式即可.本 ...
【SpringBoot】AOP默认的动态代理
分析: 当引入AOP相关依赖后 <dependency> <groupId>org.springframework</groupId> <artifactId ...
Python 实现ARP扫描与欺骗
ARP欺骗又称ARP毒化或ARP攻击,是针对以太网地址解析协议ARP的一种攻击技术,通过欺骗局域网内访问者PC的网关MAC地址,使访问者PC错以为攻击者更改后的MAC地址是网关的MAC,导致网络不通. ...

第135篇:Three.js基础入门