首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

【愚公系列】2022年09月 微信小程序-three.js绘制球体

文章目录 前言 一、Three.js的使用 1.球体的绘制 二、球体相关js文件 三、效果图 四、总结 ---- 前言 Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景...一个典型的 Three.js 程序至少要包括渲染器(Renderer)、场景(Scene)、照相机(Camera),以及你在场景中创建的物体。...Three.js相关文档:http://docs.thingjs.com/ 一、Three.js的使用 安装第三方包:npm i --save threejs-miniprogram 1.球体的绘制...touchmove'}) }, touchEnd(e) { this.canvas.dispatchTouchEvent({...e, type:'touchend'}) } }) 二、球体相关...画一个图形主要经历如下八个步骤: 1.创建透视相机 2.创建场景 3.创建光源 4.构造辅助网格 5.创建加载器,加载模型文件 6.创建渲染器,渲染场景 7.创建控制器 8.循环渲染场景

1K10
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Three.js 实现 360 度全景浏览的最简单方式

    Three.js 做这样的一个全景图浏览工具,是再简单不过的事情,只需要几行代码,但却很有用。 那我们就来学一下 Three.js 怎么做全景图浏览吧。...这就是 Three.js 的 3D 场景的创建和渲染成 2D 的流程。 简单回顾了下基础,那全景图改怎么浏览呢?...当然,也可以用球体来做,直接贴上一个大的全景图,相机放在中间,转动相机也可以看到不同方向的内容。 那这么说做全景图浏览需要先创建个立方体或者球体喽?...根本不用单独创建立方体或球体。 设置个纹理也就几行代码的事情,我们来写下代码。...我们来做下小结: 全景图浏览不用创建立方体或者球体,直接给场景(Scene)设置立方体纹理(CubeTexture)的背景就可以了,贴上 6 张图。

    4.5K51

    Three.js基础】创建场景、渲染场景、创建轨道控制器

    环境博主建议搭建一个本地的three.js环境,方便快速查看文档。.../main/main.js" type="module">4.创建一个场景(Creating a scene)创建场景借助three.js来进行显示,需要场景...(1)创建场景new THREE.Scence();(2)创建相机three.js里有几种不同的相机,这使用的是PerspectiveCamera(透视摄像机),接收四个参数:视野角度(FOV):摄像机视锥体垂直视野角度...material (可选):一个Material,或是一个包含有Material的数组,默认是一个新的MeshBasicMaterial。...const controls = new OrbitControls(camera,renderer.domElement);//创建一个使渲染器能够在每次屏幕刷新时对场景进行绘制的循环function

    38840

    Three.js - 走进3D的奇妙世界

    创建一个简单的立方体为例,创建简单的立方体需要添加8个顶点和12个三角形的面,创建顶点时需要指定顶点在坐标系中的位置,添加面的时候需要指定构成面的三个顶点的序号,第一个添加的顶点序号为0,第二个添加的顶点序号为...代码如下: /* 创建地球 */ function createGeom() { // 球体 var geom = new THREE.SphereGeometry(1, 64, 64)...THREE.Mesh(geom, material); return earth; } 7.2 反面贴图实现全景视图 这个例子是通过在球形几何体的反面进行纹理贴图实现的全景视图,实现原理是这样的:创建一个球体构成一个球形的空间...,把相机放在球体的中心,相机就像在一个球形的房间中,在球体的里面(也就是反面)贴上图片,通过改变相机拍摄的方向,就能看到全景视图了。...材质默认是在几何体的正面进行贴图的,如果想要在反面贴图,需要在创建材质的时候设置side参数的值为THREE.BackSide,代码如下: /* 创建反面贴图的球形 */ // 球体 var geom

    8.4K20

    Three.js - 走进3D的奇妙世界

    创建一个简单的立方体为例,创建简单的立方体需要添加8个顶点和12个三角形的面,创建顶点时需要指定顶点在坐标系中的位置,添加面的时候需要指定构成面的三个顶点的序号,第一个添加的顶点序号为0,第二个添加的顶点序号为...在这个示例中使用上图左侧的地球纹理,在球形几何体上进行贴图就能制作出一个地球。...代码如下: /* 创建地球 */ function createGeom() {     // 球体     var geom = new THREE.SphereGeometry(1, 64, 64)...这个例子是通过在球形几何体的反面进行纹理贴图实现的全景视图,实现原理是这样的:创建一个球体构成一个球形的空间,把相机放在球体的中心,相机就像在一个球形的房间中,在球体的里面(也就是反面)贴上图片,通过改变相机拍摄的方向...材质默认是在几何体的正面进行贴图的,如果想要在反面贴图,需要在创建材质的时候设置side参数的值为THREE.BackSide,代码如下: /* 创建反面贴图的球形 */ // 球体 var geom

    9.9K40

    web网站使用three.js来绘制三维图形

    # 一:安装 Three.js Three.js一个强大的 JavaScript 库,用于在网页上创建和显示 3D 图形。...提供了一系列基础几何体,例如立方体、球体和圆锥体。...下面代码是如何创建一个立方体的示例: ```javascript const geometry = new THREE.BoxGeometry(1, 1, 1); // 创建一个立方体几何体,边长为1...从基础的几何体(如立方体、球体等)到复杂的模型加载(支持多种格式,如FBX、OBJ、GLTF等),再到材质、纹理、阴影、光照、动画等高级特性的应用,Three.js都能提供全面的支持。...性能优化与调试 虽然Three.js为开发者提供了很多便利,但在创建大型或复杂的三维场景时,性能优化仍然是一个不可忽视的问题。

    14810

    一文搞懂如何在Three.js创建阴影效果 |《Three.js零基础直通14》

    实现阴影的方法有很多种,Three.js一个内置的解决方案。需要注意的是,这个解决方案很方便,使用很简单,但它并不完美。...three.js的官方文档中有一个平行光和聚光灯阴影的示例: https://threejs.org/examples/webgl_shadowmap_viewer.html 准备工作 在场景中创建一个球体...,一个平面,再创建一个平行光和一个环境光。...这是由于在Three.js中点光源的阴影贴图要依赖6个方向上的相机来实现-_-!。 正因为点光源会在每个方向上发光,所以Three.js必须通过6个方向的渲染才能创建出多维数据集阴影贴图。...const simpleShadow = textureLoader.load('/textures/simpleShadow.jpg') 加载好贴图后,我们可以通过使用一个平面来创建阴影,平面是创建出来时默认是面向

    6.9K10

    我用 Three.js 创建一个掘金城市

    我肝了一周,用Three.js创建一个"掘金城市" “肝”货? 先看最终效果 掘金数据城市实时渲染图 数据来源 2021我在掘金写了多少篇文章?...不得已呢,我只好使用文章列表接口去遍历,一旦发现创建时间早于2021年1月1日 0时0分0秒的文章则结束遍历,以此来获得今年我发布的全部文章。...uid=你的掘金uid 数据的表现形式 原本我是打算直接照抄 skyline.github.com 结果光一个底座,我就折腾了大半天,完全完全没想到在Three.js里画一个立体梯形结构体还挺麻烦...边开发边设计边直播...尝试了各种布局 初版 一开始,我为创建城市设定了以下基本规则 1、每个月是一个区块,一共4x3。 2、每篇文章是一个建筑物,每月最多显示30篇。...第三版 创建城市的基本规则3.0 8、区块内建筑物的如果是奇数,最后一个宽度加倍,填满空间 一排单个建筑会填满,看上去整齐多了 现在看上去是不是舒服多了? 但是,也叫城市,怕不是个芯片样板?

    59830

    你的登录界面不够花里胡哨,3D 版本的来了

    今天分享一篇用three.js 做的登录网站,里面还用到了粒子特效,一个字就是酷炫 前言: 该篇文章用到的主要技术:vue3、three.js 我们先看看成品效果: 登录gif 图 座机小图预览...「首先,要有一个立体的空间,其次是有光源,最重要的是要有一双眼睛」。下面我们就看看在three.js中如何创建一个3D世界吧!...创建一个场景 设置光源 创建相机,设置相机位置和相机镜头的朝向 创建3D渲染器,使用渲染器把创建的场景渲染出来 此时,你就通过three.js创建出了一个可视化的3D页面,很简单是吧!...关于场景 你可以为场景添加背景颜色,或创建一个盒模型(球体、立方体),给盒模型的内部贴上图片,再把相机放在这个盒模型内部以达到模拟场景的效果。...32) // 生成网格 const sphere = new THREE.Mesh(sphereGeometry, material) // 为了单独操作球体的运动效果,我们把球体放到一个组中 const

    91510

    CSS3、JS 探索三维粒子

    ,用three.js探索3D空间中的粒子动画。...这套演示使用three.js和easing探索三维粒子动画。 这些演示中的所有粒子和形状都是由三个基本的几何体/材质/网格组成,如球体,线条和盒子。...使用three.js / WebGL也有性能优势。这些动画只是抓住了three.js的能力。自定义的几何图形,材质,光照,阴影和着色器可以将这些提升到一个新的水平。...当它们撞击时,会形成一个带有环的涟漪物体,并形成一个影响粒子位置和不透明度的不可见球体。 6: 旋转风扇 这个演示展示了三条形成浅锥形的粒子线。每个粒子都有一条随机长度的弧线。...四个不同的颜色框彼此紧密放置,并与添加剂混合混合以创建白色。当盒子移动时,颜色将失去完全重叠并显示底色(红色,绿色,蓝色和洋红色)。

    4K10

    —— Three.js 系列

    在前面的介绍中我们可以得到 2:1 的等距投影全景图对应的几何体为球形,还记得我们在前《造一个海洋球》学过,如何来创建一个球体,没错就是 **SphereGeometry**。 ......省略场景初始化等代码 // 创建一个球体 const geometry = new THREE.SphereGeometry(30, 64, 32); // 创建贴图, 并设置为红色 const material...然后我们就得到了一个小红球: 嗯,现在为止你已经学会了如果创建一个小红球,接下来还有2个步骤加油!...幸好 Three.js 给我们提供了一个简单的方法 THREE.DoubleSide ,通过这个方法,就能让我们的物体渲染两个面。这样我们即使在物体内部也能看到贴图啦。...这里有一个注意点,就是在 Three.js 中如果有多张贴图,是支持以数组形式传入的,例如此例子中,传入的顺序为 “左右上下前后” 此时我们也得到了上方一样的效果。

    3.9K41

    不到30行代码实现一个酷炫H5全景

    image.png 1.2 全景展示方式 全景的展示方式有很多中,比如:柱体全景、立方体全景、球体全景等等…… ? 最最通俗的理解:用一个大的纸箱套在头上,看的场景(这种展示方式就是立方体全景) ?...const radius = 500 // 球体半径 // 第一步:创建场景 const scene = new THREE.Scene() // 第二步:绘制一个球体...2.3 生成全景的步骤 在2.1的章节中,我们已经完成了绘制一个球体,绘制全景是在其基础上要做调整: 1、将相机移到球体的球心位置; 2、将全景图片贴到球体的内表面; 具体步骤如下: 第一步:创建一个场景...(Scene) 第二步:创建一个球体,并将全景图片贴到球体的内表面,放入场景中 第四步:创建一个透视投影相机将camera拉到球体的中心,相机观看球体内表面 第五步:通过修改经纬度来,改变相机观察的点...// 屏幕宽高 const radius = 50 // 球体半径 // 第一步:创建场景 const scene = new THREE.Scene

    2.4K40
    领券