关于从入门three.js到做出3d地球这件事(第二篇: 开发必备的辅助技能)

最新推荐文章于 2023-09-13 10:37:58 发布
最新推荐文章于 2023-09-13 10:37:58 发布
阅读量726 收藏 3
点赞数 1
文章标签： 游戏 java javascript vue js

来源：lulu_up

https://segmentfault.com/a/1190000039683111

本篇介绍

开发3d效果的时候, 不能每次都通过刷新页面来更新图像, 我们工程师当然会发明出相应的工具辅助开发工作, 这一篇我们一起学习三个好用的工具, 让我们的开发更畅快。

上篇我们讲解了three.js的基本配置代码, 想看的同学可以访问这个链接: 关于从入门three.js到做出3d地球这件事(第一篇: 通俗易懂的入门)

一. 相机的配置

  • 这里介绍的是透视相机

介绍工具之前我们先把相机的关键概念系统的学一遍, 因为以后我们要利用相机做很多有趣的事。     这里以上一篇绘制的最基本的坐标系为例进行说明, 如下图:

第一: position 相机位置

位置属性很重要很常用, 不同的位置呈现出不同的景色, 我们可以把相机理解为我们在3d世界中的眼睛, 而调整相机的位置就相当于我们走到不同的角度去看这个3d世界。     看过上一篇你会知道我们的相机实例叫camera, 我们对他的position属性进行设置就可以调整位置。

  • 第一种设置方式

    camera.position.x = 2;
    camera.position.y = 2;
    camera.position.z = 10;

上面就是分别调节了相机的x, y, z轴的距离, 我们看到的景象变成了下面的样子。

  • 第二种设置方式

position身上有set方法可以设置, 三个参数对应的是x, y, z。

camera.position.set(2, 2, 10)

效果与上面的一样。

  • 第三种设置方式

position可以直接设置x, y, z属性, 本身又有set方法, 那么position属性本身到底是个什么那? 让我们打印出来看看。isVector3: true也就是说它是一个Vector实例, 那么Vector是什么? 我们以后会经常和这个单词打交道, 让我们一起记住它。

  • 先不细聊向量

因为向量是个很重要的概念, 我们后面会单独大篇幅的详谈, 这里咱们单纯的理解为new THREE.Vector3(2, 2, 10)是生成了一个点, 参数就是这个点的xyz坐标, 而我们相机的position属性就是这样一个对象。

  • 注意: 直接赋值是无效的

camera.position = new THREE.Vector3(2, 2, 10) 无效

需要利用add方法来实现camera.position.add(new THREE.Vector3(2, 2, 10)) 有效

  • 别被唬住

上面展示了大部分常用的设置position的方法, 我在初学three.js的时候被网上各种写法弄晕了所以这里特意列出大部分写法, 希望当你再看其它资料的时候就不会被乱七八糟的写法唬住了。

第二: lookAt 相机看向哪里

这个概念简直太重要了, 如其字面意思就是看向哪里, 上面相机位置已经调整完毕, 那么我们要调整相机拍摄哪里了。

默认是(0,0,0)的位置如下图:

当我们看向坐标系的 (3, 3, 0)位置也就是右上角:

从它的效果我们可以发现, 这个属性非常适合在3d游戏中调整人物的方向时改变图像, 如果你要做第一人称游戏一个人在城市里奔跑的效果, 那无非就是不断的改变相机的position与lookAt就能做到了。

  • 设置方式

这里可以直接设置: camera.lookAt(3, 3, 0); 还可以利用向量来设置: camera.lookAt(new THREE.Vector3(3, 3, 0));

第三: up 谁为相机上方

先来一张默认的情况, 不难看出绿的是y, 红的是x, z正对着我们所以暂时看不到:

我们设置一下camera.up.set(1, 0, 0);

上面x的值成为了最大, 所以他变成了上方的坐标轴, 当然如我们设一个乱乱的值camera.up.set(1, 0.5, 0); 那么效果如下:

这个属性的设置方式就是set方法或者camera.up = new THREE.Vector3(1, 0.5, 0);

可以利用这个属性模拟第一人称游戏里任务摔倒了看这个世界....

坑点

我当前版本的three.js想要up属性生效需要在设置完up属性之后再主动指定一下camera.lookAt(0, 0, 0);否则up属性不生效;

二. GUI的使用

上面讲了这么多, 我们现在想让场景动起来, 所以需要不断的渲染出3d图像, 我们利用requestAnimationFrame反复调用渲染函数就能实现动画效果了。

const animate = function () {
        requestAnimationFrame(animate);
        renderer.render(scene, camera);
    };
animate();

-全名dat.gui.js他的功能是为属性生成一个可调节值的面板, 方便我们不断修改数值而不用刷新页面如下图:鼠标拖动调节

-引入GUI<script src="https://cdn.bootcdn.net/ajax/libs/dat-gui/0.7.7/dat.gui.min.js"></script>引入之后我们全局多了一个dat属性。

const gui = new dat.GUI();
// 1: 定义一个我们要改变的对象
const pames = {
  x: 0
}
// 2: 把这个值放入控制器
gui.add(pames, "x", 0, 5).name("x轴的距离")

参数解答

  1. 传入要改变的对象。

  2. 要改变这个对象身上的哪个属性。

  3. 最小值

  4. 最大值

  5. .name('显示在调节栏的名称')

在每次渲染的时候更新一下相机的x轴位置。

const animate = function () {
    camera.position.x = pames.x
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}
animate();

知道上面这些就可以应付很多的场景了, 一个工具而已不用深究啦。

全部代码
<html>
    <script src="https://cdn.bootcdn.net/ajax/libs/three.js/r122/three.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/dat-gui/0.7.7/dat.gui.min.js"></script>
    <script>
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 1, 1000);
        camera.position.z = 20;
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.setClearColor(0x00FFFF, .5);
        document.body.appendChild(renderer.domElement);
        const axisHelper = new THREE.AxisHelper(2)
        scene.add(axisHelper)
        const pames = {
            x: 0
        }
        function createUI() {
            var gui = new dat.GUI();
            gui.add(pames, "x", 0, 5).name("x轴的距离")
        }
        const animate = function () {
            camera.position.x = pames.x
            requestAnimationFrame(animate);
            renderer.render(scene, camera);
        }
        createUI()
        animate();
    </script>
</body>
</html>

三. tween的使用

tween.js是用来做流畅动画的库, 比我们自己写动画方便多了tween官网地址。

下面编写了一个相机平滑的向右上角移动的代码。

const tween = new TWEEN.Tween(camera.position).to({
    x: 10,
    y: 10
}, 2000).repeat(Infinity).start();

 // tween.stop() // 可以停止动画
 
const animate = function () {
    TWEEN.update();
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}
animate();

  1. new TWEEN.Tween("这里传入要改变的对象")。

  2. .to( x: 10 y: 10}, 2000), 在2000毫秒时将x与y属性变成10。

  3. .repeat(Infinity), 这个动无限循环。

  4. .start();, 开始执行动画。

  5. .stop();, 停止动画。

  6. TWEEN.update();, 每次调用渲染函数都要调用一下动画的更新函数。

效果如下(思否暂时无法传gif图片, 但我已经向高老板反应了):

下面是动图, 显示可能有问题。

这个库大概的原理就是每次调用update方法的时候判断一下该动画已经执行了多久时间, 然后算出当前时间目标对象的值应该变为多少, 当然它还会对性能有所优化。

全部代码如下:
<html>
<style>
    * {
        padding: 0;
        margin: 0;
    }
</style>

<body>
    <script src="https://cdn.bootcdn.net/ajax/libs/three.js/r122/three.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/tween.js/18.6.4/tween.umd.js"></script>
    <script>
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 1, 1000);
        camera.position.z = 20;
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.setClearColor(0x00FFFF, .5);
        document.body.appendChild(renderer.domElement);
        const axisHelper = new THREE.AxisHelper(2)
        scene.add(axisHelper)

        const tween = new TWEEN.Tween(camera.position).to({
            x: 10,
            y: 10
        }, 2000).repeat(Infinity).start()
        const animate = function () {
            TWEEN.update()
            requestAnimationFrame(animate);
            renderer.render(scene, camera);
        }
        animate();
    </script>
</body>

</html>

四. 轨道控制器的使用

这个就厉害了, 让我们可以使用鼠标转动我们的相机, 仿若进入到3d世界一般。

随着我们按住鼠标并且移动, 视角就随之变化仿佛身临其境一般。

// 将轨道控制器的代码放在对应的文件夹里面, 如果你没找到就用下面我分享的文件。
<script src="./utils/OrbitControls.js"></script>

引入成功页面THREE身上会出现OrbitControls方法, 我们需要传入相机与渲染的容器。

  const orbitControls = new THREE.OrbitControls(camera, renderer.domElement);
  orbitControls.target = new THREE.Vector3(0, 0, 0);//控制焦点

cdn上我没查到, 想要获取代码的同学可以复制我的笔记内容到项目中 three.js轨道控制器点击预览

直接在页面引入与通过npm包的方式引入有区别, 到了讲在vue里的使用的时候我们再详细说。
全部代码如下: (要有./utils/OrbitControls.js的代码, 没有的话来我笔记下载)
<html>

<body>
    <script src="https://cdn.bootcdn.net/ajax/libs/three.js/r122/three.min.js"></script>
    <script src="./utils/OrbitControls.js"></script>
    <script>
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 1, 1000);
        camera.position.z = 10;
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.setClearColor(0x00FFFF, .5)
        // 轨道控制器
        orbitControls = new THREE.OrbitControls(camera, renderer.domElement);
        // orbitControls.target = new THREE.Vector3(0, 0, 0);
        // 轨道控制器
        document.body.appendChild(renderer.domElement);
        const axisHelper = new THREE.AxisHelper(2)
        scene.add(axisHelper)
        var animate = function () {
            requestAnimationFrame(animate);
            renderer.render(scene, camera);
        };
        animate();
    </script>
</body>

</html>

end.

下一篇将会介绍 光源, 与 阴影的玩法了, 希望与你一起进步。

最后

欢迎关注【前端瓶子君】✿✿ヽ(°▽°)ノ✿

回复「算法」，加入前端算法源码编程群，每日一刷（工作日），每题瓶子君都会很认真的解答哟！

回复「交流」，吹吹水、聊聊技术、吐吐槽！

回复「阅读」，每日刷刷高质量好文！

如果这篇文章对你有帮助，「在看」是最大的支持

》》面试官也在看的算法资料《《

“在看和转发”就是最大的支持

前端瓶子君
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【three.js】gui.js库(可视化改变三维场景)
qq_38196449的博客
06-14 44
说白了就是一个前端js库，对HTML、CSS和JavaScript进行了封装，学习开发的时候，借助可以快速创建控制三维场景的UI交互界面。
three.js(使用总结一）
qq_52054730的博客
08-27 866
three.js使用总结 1、引入需要 的文件 <script src="./build/three.min.js"></script> <!-- 此处引入threejs基础类 --> <script src="CSS3DRenderer.js"></script> <!-- 此处引入CSS3Drenderer.js类 --> <!-- 以上两个文件，在下载threejs的时候就有的，引入就好 --> 2、要在前端页面中展
JavaScript 3D动画库three.js入门篇
热门推荐
cnds123的专栏
10-31 1万+
什么是three.js？你将它理解成three+js，three表示3D的意思，js表示JavaScript的意思，合起来，three.js就是使用JavaScript来写3D程序的意思。three.js是WebGL的一个运行在浏览器上的开源框架，它省去了很多麻烦的细节，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。
threejs的使用
Coco_998的博客
04-20 2869
threeJs的简单使用
前端效果积累 ｜ 酷炫、实用3D地球路径飞行效果实现
陶人超有料的博客
01-15 1248
这样的3D地球飞行线效果，其主要的应用场景在于酷炫的数据报表大屏！在日常的开发工作中，搭建数据大屏其实是很多前端工程师都必须经历的一个基础需求！Three.js开道，快速实现3D地球飞行线效果！
最前端｜注意看！我用代码写了一个会动的3D地球
在数字化道路无限探索
09-13 1133
让数据动起来！
three.js 3D地球实例，支持国家点击和飞线
02-11
2. **3D地球建模**：在three.js中，3D地球通常通过球形几何体（SphereGeometry）来创建，然后应用纹理映射（Texture Mapping）来展示地球表面的地理信息。地图纹理通常来自高分辨率的地球图像，如卫星图片或GIS数据...
Three.js开发实现3D地图的实践过程总结
10-18
在本篇文章中，作者分享了使用Three.js库开发3D地图的实践经验，Three.js是一个基于WebGL的JavaScript库，旨在简化3D图形编程。以下是文章的主要知识点： 1. **Three.js简介**：Three.js是为了降低WebGL的学习曲线...
用three.js打造的3D个人炫酷网站.zip
12-10
用three.js打造的3D个人炫酷网站.zip用three.js打造的3D个人炫酷网站.zip用three.js打造的3D个人炫酷网站.zip用three.js打造的3D个人炫酷网站.zip用three.js打造的3D个人炫酷网站.zip用three.js打造的3D个人炫酷网站...
三维地球-使用React+Three.js开发的三维地球前端-优质项目实战.zip
02-18
2. **引入Three.js**：通过npm安装Three.js库，并在项目中导入所需的模块，如`THREE.Scene`, `THREE.Camera`, `THREE.WebGLRenderer`等。 3. **创建地球模型**：利用Three.js创建一个球体几何体，作为地球的基础...
基于three.js开发的3d地球，科技感十足
最新发布
05-25
【作品名称】：基于three.js开发的3d地球，科技感十足 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【项目介绍】：这是一个基于...
three.min.js多版本集合
09-20
three.js是WebGL的一个重要开发工具。three.js的版本升级更新比较频繁，不同版本的有些语法是有差别的。本资源包括了r64版本至r87的所有版本，方便大家下载使用。
超炫酷HTML5 Canvas 3D旋转地球动画
08-23
这是一款基于HTML5 Canvas的3D地球模拟动画，动画以太空作为背景，地球在太空中旋转，同时我们也可以拖拽鼠标来从不同的角度观察地球。另外我们也可以通过点击全屏按钮来全屏观看地球旋转动画，记得在很早以前我们也分享过一款基于HTML5 Canvas的地球动画，请看这里。
一个excel做的3D地球
11-30
一个用EXCEL做的3D地球，国外牛人做的，VBA源码没有密码的。
webgl 实现的炫酷地球 基于three.js
05-26
webgl 实现的炫酷地球 基于three.js
threejs-googly-eyes:ThreeJS的即时搜寻眼睛！
04-01
ThreeJS Googly眼睛 ThreeJS的即时搜寻眼睛！ 享受！ 例子： 用法 GooglyEyes可以轻松创建并添加到现有模型中。 移动/旋转模型将导致在调用update方法时，食人魔的眼睛正确update 。 将其添加到您的项目中： npm install @derschmale/threejs-googly-eyes 并将其添加到您的代码中！ // ... (whatever ThreeJS code) import GooglyEyes from "@derschmale/threejs-googly-eyes"; // metric units are generally assumed const eyes = new GooglyEyes(0.03, 0.05); eyes.position.z = 0.1; someModelThatNeedsGoogly
基于ThreeJS的3D地球
张_优秀的博客
06-16 6377
标记点、动画、旋转、标记点点击事件、信息弹窗
three.js（JS 三维模型库）介绍和入门
南北极之间
04-20 5804
three.js是一个基于WebGL的JavaScript 3D库。它封装了WebGL API，为开发者提供了简单易用的API，以便在Web浏览器中展示3D图形。three.js提供了几个组件、方法和工具，用于创建和处理3D图形，使得开发者可以在Web浏览器中快速创建3D图形和动画，而不需要深入了解WebGL的底层实现。three.js支持多种类型的3D对象，例如几何体、材质、灯光和相机等。它还提供了许多常用的几何体，例如球体、立方体、圆锥体和圆柱体，这些几何体可以进行旋转、平移和缩放等变换操作。
Threejs实现3d地球记录（1）
qq_41051239的博客
08-04 1048
Threejs实现3d地球
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值