Three.js之如何创建一个场景
上一面讲述了向场景中添加物体对象。这一篇准备把每个功能点细细的讲述一遍，一方面是为了加深自己的理解。另一方面希望能够
帮助到有需要的人。
一、在学习WEBGL的时候，你应该先了解要创建一个WebGL程序需要哪些步骤。就跟弄梅菜扣肉一样，需要哪些步骤。
初始化WebGL绘图上下文
初始化着色器程序
建立模型和数据缓存
完成绘制和动画
这是一个面向过程编程。然而three.js不一样，是一个面向对象编程。主要构建三个对象 scene(场景) camera(相机) renderer(渲染器).。
这三个东西是什么意思呢？听起来完全不懂是啥。举个小列子：就拿电影来说。场景（scene)就好比整个布局空间，相机(camera)相当于
拍摄期。而渲染器相当于(renderer)把拍摄的电影转换成胶卷也就是电脑的屏幕。
场景和空间包含了3D和数据模型，而renderer包含了着色器和WebGL绘图上下文。
二、THREE.JS创建场景，相机，渲染器
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Demo1(three入门第一篇)</title></head><body></body><script type="text/javascript" src="js/three.js?1.1.11"></script><script type="text/javascript">var width = window.innerWidth, height = window.innerHeight;var scene = new THREE.Scene(); //创建一个场景var camera = new THREE.PerspectiveCamera(75,width/height,1,5000); //创建相机/*three.js创建相机的方式有很多种,其中最长用的是PerspectiveCamera();
远景相机，相当于人眼观察模式
肯定有人会有疑问，这几个参数是什么意思呢？
第一个 75 是 视角
width / height 相机拍摄面的长宽比，别问为什么这么写，我也没搞清楚。反正设置为窗口
的width/height图形就不会被压变形。
下面两个是近裁剪面。和远裁剪面。 */var renderer = new THREE.WebGLRenderer(); //s上一篇用的是CSS3DRenderer//WebGLrenderer其实是用CANVAS渲染。 renderer.setSize(width,height);
document.getElementsByTagName('body')[0].appendChild(renderer.domElement);</script></html>电影，场景，胶卷都准备好了，那如何才能展示演员呢？也就是上面一篇说 的如何向场景中添加物体对象呢？
三、添加演员（3D立方体）。
//演员进场var geometry = new THREE.BoxGeometry(1,1,1);//BoxGeometry(); 3D盒子模型。包含了立方体所有顶点和填充面的对象。var material = new THREE.MeshBasicMaterial({color:'red'});//有个几何模型，我们需要材料为其上色。我们采用的时候 网孔基础材料MeshBasicMaterial();var mesh = new THREE.Mesh(geometry,material);//需要一个网孔,来承载几何模型和材料scene.add(mesh); //把这个网孔放置到场景中去。camera.position.z = 5; //调节相机的位置。renderer.render(scene,camera); //把画面转换成相机，并播放
这样这个演员就入镜了。
四、如何让这个演员动起来呢？
//懂动起来。function loop(){
requestAnimationFrame(loop);
mesh.rotation.x += 0.1; //X选择mesh.rotation.y += 0.1; //Y旋转renderer.render(scene,camera); //把画面转换成相机，并播放 }
loop();//解释下requestAnimationFrame这个api/* requestAnimationFrame这个函数，它用来替代 setInterval， 这个新接口具备多个优点，
比如浏览器Tab切换后停止渲染以节约资源、
和屏幕刷新同步避免无效刷新、在不支持该接口的浏览器中能安全回退为setInterval。
简直就是动画神奇 */
演员入镜，并有了，打动效果。第一个小短篇算完成了吧。
五、整个代码(本来想托管到githup上)。发现太慢了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo1(three入门第一篇)</title>
</head>
<body>
</body>
<script type="text/javascript" src="js/three.js?1.1.11"></script>
<script type="text/javascript">var width = window.innerWidth, height = window.innerHeight;var scene = new THREE.Scene(); //创建一个场景var camera = new THREE.PerspectiveCamera(75,width/height,1,5000); //创建相机/*three.js创建相机的方式有很多种,其中最长用的是PerspectiveCamera();
远景相机，相当于人眼观察模式
肯定有人会有疑问，这几个参数是什么意思呢？
第一个 75 是 视角
width / height 相机拍摄面的长宽比，别问为什么这么写，我也没搞清楚。反正设置为窗口
的width/height图形就不会被压缩。
下面两个是近裁剪面。和远裁剪面。 */var renderer = new THREE.WebGLRenderer(); //s上一篇用的是CSS3DRenderer//WebGLrenderer其实是用CANVAS渲染。 renderer.setSize(width,height);
document.getElementsByTagName('body')[0].appendChild(renderer.domElement);//演员进场var geometry = new THREE.BoxGeometry(1,1,1);//BoxGeometry(); 3D盒子模型。包含了立方体所有顶点和填充面的对象。var material = new THREE.MeshBasicMaterial({color:'red'});//有个几何模型，我们需要材料为其上色。我们采用的时候 网孔基础材料MeshBasicMaterial();var mesh = new THREE.Mesh(geometry,material);//需要一个网孔,来承载几何模型和材料scene.add(mesh); //把这个网孔放置到场景中去。camera.position.z = 5; //调节相机的位置。//懂动起来。function loop(){
requestAnimationFrame(loop);
mesh.rotation.x += 0.1; //X选择mesh.rotation.y += 0.1; //Y旋转renderer.render(scene,camera); //把画面转换成相机，并播放 }
loop();//解释下requestAnimationFrame这个api/* requestAnimationFrame这个函数，它用来替代 setInterval， 这个新接口具备多个优点，
比如浏览器Tab切换后停止渲染以节约资源、
和屏幕刷新同步避免无效刷新、在不支持该接口的浏览器中能安全回退为setInterval。
简直就是动画神奇 */</script>
</html>六、在WebGL中three.js扮演了重要的角色，然而中文api真的少。只有一个一个的慢慢累积。
以上是Three.js之如何创建一个场景的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
值得你花时间看的扩散模型教程，来自普渡大学
Apr 07, 2024 am 09:01 AM
Diffusion不仅可以更好地模仿，而且可以进行「创作」。扩散模型（DiffusionModel）是一种图像生成模型。与此前AI领域大名鼎鼎的GAN、VAE等算法，扩散模型另辟蹊径，其主要思想是一种先对图像增加噪声，再逐步去噪的过程。其中如何去噪还原原图像是算法的核心部分。最终算法能够从一张随机的噪声图像中生成图像。近年来，生成式AI的惊人增长将文本转换为图像生成、视频生成等领域的许多令人兴奋的应用提供了支持。这些生成工具背后的基本原理是扩散的概念，这是一种特殊的采样机制，克服了以前的方法中被
一键生成PPT！Kimi ：让「PPT民工」先浪起来
Aug 01, 2024 pm 03:28 PM
Kimi：一句话，十几秒钟，一份PPT就新鲜出炉了。PPT这玩意儿，可太招人烦了！开个碰头会，要有PPT；写个周报，要做PPT；拉个投资，要展示PPT；就连控诉出轨，都得发个PPT。大学更像是学了个PPT专业，上课看PPT，下课做PPT。或许，37年前丹尼斯・奥斯汀发明PPT时也没想到，有一天PPT竟如此泛滥成灾。吗喽们做PPT的苦逼经历，说起来都是泪。「一份二十多页的PPT花了三个月，改了几十遍，看到PPT都想吐」；「最巅峰的时候，一天做了五个PPT，连呼吸都是PPT」；「临时开个会，都要做个
自动驾驶场景中的长尾问题怎么解决？
Jun 02, 2024 pm 02:44 PM
昨天面试被问到了是否做过长尾相关的问题，所以就想着简单总结一下。自动驾驶长尾问题是指自动驾驶汽车中的边缘情况，即发生概率较低的可能场景。感知的长尾问题是当前限制单车智能自动驾驶车辆运行设计域的主要原因之一。自动驾驶的底层架构和大部分技术问题已经被解决，剩下的5%的长尾问题，逐渐成了制约自动驾驶发展的关键。这些问题包括各种零碎的场景、极端的情况和无法预测的人类行为。自动驾驶中的边缘场景"长尾"是指自动驾驶汽车（AV）中的边缘情况，边缘情况是发生概率较低的可能场景。这些罕见的事件
CVPR 2024全部奖项公布！近万人线下参会，谷歌华人研究员获最佳论文奖
Jun 20, 2024 pm 05:43 PM
北京时间6月20日凌晨，在西雅图举办的国际计算机视觉顶会CVPR2024正式公布了最佳论文等奖项。今年共有10篇论文获奖，其中2篇最佳论文，2篇最佳学生论文，另外还有2篇最佳论文提名和4篇最佳学生论文提名。计算机视觉（CV）领域的顶级会议是CVPR，每年都会吸引大量研究机构和高校参会。据统计，今年共提交了11532份论文，2719篇被接收，录用率为23.6%。根据佐治亚理工学院对CVPR2024的数据统计分析，从研究主题来看，论文数量最多的是图像和视频合成与生成（Imageandvideosyn
如何在真我手机上创建文件夹？
Mar 23, 2024 pm 02:30 PM
标题：真我手机新手指南：如何在真我手机上创建文件夹？在当今社会，手机已经成为人们生活中必不可少的工具。而真我手机作为一款备受欢迎的智能手机品牌，其简洁、实用的操作系统备受用户喜爱。在使用真我手机的过程中，很多人可能会遇到需要整理手机中的文件和应用的情况，而创建文件夹就是一种有效的方式。本文将介绍如何在真我手机上创建文件夹，帮助用户更好地管理自己的手机内容。第
从裸机到700亿参数大模型，这里有份教程，还有现成可用的脚本
Jul 24, 2024 pm 08:13 PM
我们知道LLM是在大规模计算机集群上使用海量数据训练得到的，本站曾介绍过不少用于辅助和改进LLM训练流程的方法和技术。而今天，我们要分享的是一篇深入技术底层的文章，介绍如何将一堆连操作系统也没有的「裸机」变成用于训练LLM的计算机集群。这篇文章来自于AI初创公司Imbue，该公司致力于通过理解机器的思维方式来实现通用智能。当然，将一堆连操作系统也没有的「裸机」变成用于训练LLM的计算机集群并不是一个轻松的过程，充满了探索和试错，但Imbue最终成功训练了一个700亿参数的LLM，并在此过程中积累
格力+如何创建家庭
Mar 01, 2024 pm 12:40 PM
很多朋友表示想知道在格力+软件里该怎么去创建家庭，下面为大家带来了操作方法，想要了解的朋友和我一起来看看吧。首先，打开手机上的格力+软件，并登录。接着，在页面底部的选项栏中，点击最右边的“我的”选项，即可进入个人账户页面。2.来到我的页面后，在“家庭”下方的选项里有一个“创建家庭”，找到后在它的上面点击进入。3.接下来跳转到创建家庭的页面里，根据提示在输入框里输入要设置的家庭名称，输入好后在右上角点击“保存”按钮。4.最后在页面下方会弹出一个“保存成功”的提示，代表家庭已经成功创建好了。
AI在用 | AI制作独居女孩生活Vlog，3天狂揽上万点赞量
Aug 07, 2024 pm 10:53 PM
机器之能报道编辑：杨文以大模型、AIGC为代表的人工智能浪潮已经在悄然改变着我们生活及工作方式，但绝大部分人依然不知道该如何使用。因此，我们推出了「AI在用」专栏，通过直观、有趣且简洁的人工智能使用案例，来具体介绍AI使用方法，并激发大家思考。我们也欢迎读者投稿亲自实践的创新型用例。视频链接：https://mp.weixin.qq.com/s/2hX_i7li3RqdE4u016yGhQ最近，独居女孩的生活Vlog在小红书上走红。一个插画风格的动画，再配上几句治愈系文案，短短几天就能轻松狂揽上
