首页
学习
活动
专区
工具
TVP
发布

教你如何用Three.js创造一个三维太阳

前言 笔者认为Three.js是一个伟大的框架,为什么这样说,因为它可以让我们轻易创造三维世界,甚至好像笔者写这遍教程,可以创造一个太阳系,在这个三维世界里你就是创世主。哈哈!好像说得有点夸!!...三维太阳系完整效果 了解一些基本天文知识 学习创造这个三维太阳系之前先了解一下基本的天文知识:太阳系有“八大行星”,按照离太阳的距离从近到远,它们依次为水星、金星、地球、火星、木星、土星、天王星、海王星...而相邻的火星自转一天是24.6小时 公转一年则有687天,其他行星也有不同的公转和自转信息,有了这些信息就可以定义一些基本规则 [image.png] 了解Three框架 Three的一些基本概念我在用最简单方式打造Three.js...3D汽车展示厅一文也粗略介绍一下,为了让同学们加深理解,笔者就相对于太阳系来比如一下 场景 Sence 相当于太阳系,宇宙中有无数星系,比如现在说的太阳系,后续还可以增加其他星系,那不是永远都加不完的呀...,这个例子也是很适合刚入门three.js的同学,目的也是提高对三维的兴趣,提高自身成就感。

2.4K43
您找到你想要的搜索结果了吗?
是的
没有找到

微信小程序之生成指定页面的太阳

最近的项目中也是需要生成小程序的邀请太阳码.一开始生成的是个二维码.但是小程序的客户扫了之后总不能让人家跳到H5页面.所以也是研究了一下.一路上也是坎坎坷坷.这里总结下.顺当分享下自己写的代码.哪里写的不好...首先看下官方给出生成程序码的例子: 获取小程序码。通过该接口生成的小程序码,永久有效,数量暂无限制。...补充下小程序生成太阳码的错误码 41030  接口所传page页面不存在,或者小程序没有发布 47001  请求的数据不是json格式 40001  失效的access_token  token两个小时的有效期...php /** * Class WxQrcode * 小程序生成太阳码 */ class WxQrcode{ /** * @param $appid * @param...getAccessToken(); } return $access_token; } /** * @return string * 生成小程序太阳

7.5K30

Three.js教程(1):初识three.js

---- 为什么要使用three.js 要回答为什么要使用three.js?首先我们想想什么是three.js?...而three.js直接支持前3种渲染方式,可以看出three.js的强大。 大多情况下如果是为了展示3D的效果,那么直接用图片就可以了,如果要动起来的话,视频往往可以胜任。...别急,正因为原生的WebGL这么晦涩难懂,所以才有了我们的主角three.js。...现在你可以忘掉上面的内容,因为three.js封装的特别好,根本看不到任何WebGL的影子,你再也不需要去了解什么着色器,更不用写GLSL ES,我们先来看一个更高级且更简单的three.js的例子。...初识three.js three.js可以使用模块化引入,当然也可以直接用script标签来引入。

23.1K73

【带着canvas去流浪(15)】threejs fundamentals翻译系列1-scene graph

本文是three.js系列博文的一篇,第一篇文章是【three.js基础知识】,如果你还没有阅读过,可以从这一篇开始,页面顶部可以切换为中文或英文。...假设现在我们想制作一个包含太阳,地球和月亮的图谱。从太阳开始绘制,首先要做的就是生成一个球体,然后将其放置在坐标原点。我们希望使用三者之间的相对关系来展示scene graph的用法。...我们将生成的模型加入到场景中,并把它定位到太阳左侧10个单位的地方,因为地球模型也被加入了objects数组,所以它也会转动。...点击在线示例可直接查看,原文中此处有支持在线编辑的示例代码 现在看起来就好很多了,地球比太阳小,并且一边自转,一边绕太阳公转,依据同样的模式,可以生成月亮的模型: ?...我们将使用dat.GUI工具,它是一个非常流行的UI库,通常在three.js项目中使用。dat.GUI使用一个配置对象,将属性名和属性值的类型添加后,它将自动生成一个可以动态调整这些参数的UI。

1.6K10

Three.js入门

Three.js的核心五步就是: 1.设置three.js渲染器 2.设置摄像机camera 3.设置场景scene 4.设置光源light 5.设置物体object 1.设置three.js渲染器 三维空间里的物体映射到二维平面的过程被称为三维渲染...(1) 声明全局render对象; (2) 获取画布的高和宽; (2) 生成渲染器对象 (3) 指定渲染器的高宽(一般跟画布框大小一致); (4) 追加canvas元素到canvas3d元素中; (5)...canvas3d').clientHeight; //获取画布的高 renderer = new THREE.WebGLRenderer({antialias:true}); //生成渲染器对象...在Three.js也能够指定透视投影和正投影两种方式的相机。 本文按照以下的步骤设置透视投影方式。...clientHeight; //获取画布的高 renderer = new THREE.WebGLRenderer({antialias:true}); //生成渲染器对象

7.7K92

元宇宙基础案例 | 大帅老猿threejs特训

这时我们可以使用Three.js来简化我们对底层图形学的开发知识,更快的上手3D开发过程。...Three.js自学篇 官网以及下载 Three.js的官网 Three.js下载地址:github下载, 国内码云 本文采用码云下载 下载后,解压 备注,你可以根据下载后的文件,搭建一个本地的...引入 新建文件夹 前端demo ,如下: 在该项目下执行,打开cmd,执行 npm install three 在前端demo目录下,生成node_modules目录 安装three...完成 Three.js入门案例 参考博客Three.js入门教程——教不会算我输 编码 在前端demo的文件夹下创建src目录,在src目录下创建a.html内容如下 代码: <!...// 常常用平行光来模拟太阳光 的效果; 太阳足够远,因此我们可以认为太阳的位置是无限远,所以我们认为从太阳发出的光线也都是平行的。

33330

【带着canvas去流浪(14)】Three.js中凹浮雕模型的生成方式

本文分别对利用Three.js在Web环境中生成凹浮雕模型时的几种策略进行讲解。 一....shape实例的holes数组中,Three.js就可以自动将其识别为孔: ?...方案3:Cinema 4D建模后输出模型文件 Three.js这种基于编程的建模方式并不够直观,面对复杂模型时,通用的解决办法是使用三维建模软件进行模型构建,然后导出Three.js能够识别的模型文件,...本例中恰好每个大类均用到一个功能(上图中红框标记的功能),立方体功能生成立体包围盒毛坯模型,文本功能生成需要雕刻的文字,使用挤压功能生成一个拉伸体对象后,在界面右侧的对象管理面板中将“文本模型”拖放到挤压文字上...上可以直接搜出来)对导出的文件进行格式转换,最后只需要将生成的marvel.gltf文件利用Three.js提供的GLTFLoader加载器导入到网页中即可,相关代码如下: // instantiate

2.4K30
领券