第135篇:Three.js基础入门
好家伙,这东西太帅了,我要学会
先放张帅图(都是用three.js做出来的,这我学习动力直接拉满)
还有另外一个
帧数太高,录不了
开始学习
官方文档
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 ...
随机推荐
- [转帖]linux性能检测之sar详解
http://blog.51niux.com/?id=99 sar也是sysstat中的一员. 一.介绍 1.1 简介 sar是一个优秀的一般性能监视工具,它可以输出Linux所完成的几乎所有工作的数 ...
- 30岁程序媛求职路复盘：文转码+失业半年+PHP如何涨薪5K！？
这篇文章来自一位群友的分享: 这篇文章写于下班路上,刚刚入职不久,我想再冲刺一下大厂,阳哥建议我坚持总结打卡,可以尝试写写博客. 那我就从这篇开始吧,希望开个好头! 上班的感觉真好 今天是入职的第二周 ...
- window.addEventListener注册滚动scroll事件不生效
先了解一下滚动事件触发的条件 视图或者一个元素在滚动时,会触发元素的 scroll 事件. 备注: 在 iOS UIWebViews 中,滚动进行时不会触发 scroll 事件:只有当滚动结束后事件才 ...
- Go复合类型之数组类型
Go复合类型之数组 @ 目录 Go复合类型之数组 一.数组(Array)介绍 1.1 基本介绍 1.2 数组的特点 二.数组的声明与初始化 2.1 数组声明 2.2 常见的数据类型声明方法 2.3 数 ...
- Go - 基本数据类型和其字符串表示之间转换
1. 基本数据类型和其字符串表示之间转换 基本类型的值,都有一个字符串表示,如数字类型值1 字符串表示为 "1",字符的编码为Unicode或者UTF-8,数字的编码是 int,底 ...
- MakeFile文件的使用 [补档-2023-07-13]
makefile-gdb文件 可以在文件中指定那些文件可以先进行编译,那些文件可以后进行编译,那些文件可以重新编译.他可以自动化编译程序.... 6-1 makefile基本规则 如下: ...
- C/C++中的可变参数和可变参数模板
目录 1.说明 2.C语言中的可变参数 3.C++中的可变参数模板 2.1.使用递归的方式遍历 2.2.使用非递归的方式遍历 1.说明 不谈官方定义,就从个人理解上说,可变参数 就是函数传参的时候,不 ...
- 飞桨paddlespeech语音唤醒推理C INT8 定点实现
前面的文章(飞桨paddlespeech语音唤醒推理C定点实现)讲了INT16的定点实现.因为目前商用的语音唤醒方案推理几乎都是INT8的定点实现,于是我又做了INT8的定点实现. 实现前做了一番调研 ...
- Linux虚拟机追加扩展磁盘
一.使用VMware给虚拟机追加磁盘 使用VMware打开虚拟机设置对话框,选择硬盘,点击右侧的扩展按钮,输入扩展后的磁盘容量. 点击扩展按钮.提示磁盘已成功扩展. 二.对闲置的空间进行分区 上面扩展 ...
- 【算法】【动态规划】动规dp解决不同路径两道经典OJ笔试题【力扣62-力扣63】超详细的动态规划入门详解，掌握动态规划的解题方法
[算法][动态规划]动规dp解决不同路径两道经典OJ笔试题[力扣62-力扣63]超详细的动态规划入门详解,掌握动态规划的解题方法 作者: @小小Programmer 这是我的主页:@小小Program ...