【ThreeJS基础教程-高级几何体篇】2.1更好的视觉效果-综合案例（2）

最新推荐文章于 2023-06-30 09:48:36 发布
最新推荐文章于 2023-06-30 09:48:36 发布
阅读量318 收藏 1
点赞数 1
分类专栏： Threejs基础教程 文章标签： javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42760477/article/details/127405602
版权

2.1更好的视觉效果-综合案例（2

学习ThreeJS的捷径

本段内容会写在0篇以外所有的，本人所编写的Threejs教程中

对，学习ThreeJS有捷径
当你有哪个函数不懂的时候，第一时间去翻一翻文档
当你有哪个效果不会做的时候，第一时间去翻一翻所有的案例，也许就能找到你想要的效果
最重要的一点，就是，绝对不要怕问问题，越怕找找别人问题，你的问题就会被拖的越久

如果你确定要走WebGL/ThreeJS的开发者路线的话，以下行为可以让你更快的学习ThreeJS

  1. 没事就把所有的文档翻一遍，哪怕看不懂，也要留个印象，至少要知道Threejs有什么
  2. 没事多看看案例效果，当你记忆的案例效果足够多时，下次再遇到相似问题时，你就有可能第一时间来找对应的案例，能更快解决你自己的问题
  3. 上述案例不只是官网的案例，郭隆邦技术博客，跃焱邵隼，暮志未晚等站点均有不少优质案例，记得一并收藏
    http://www.yanhuangxueyuan.com/ 郭隆邦技术博客
    https://www.wellyyss.cn/ 跃焱邵隼
    http://www.wjceo.com/ 暮志未晚
    这三个站点是我最常逛的站点，推荐各位有事没事逛一下，看看他们的案例和写法思路，绝对没坏处

初识纹理Texture

先提前纠正一下纹理(Texture)和贴图(Map)不是一个东西

纹理一般是指贴图贴在模型表面之后，显示出来的样子，称为纹理，通常会由贴图来生成纹理

贴图的本质就是一张图片资源

如何生成一片草地

	    let geometry = new THREE.PlaneGeometry(10,10,10).rotateX(-Math.PI/2);
        let material = new THREE.MeshBasicMaterial({
            color:"#00ff00"
        });
        let mesh = new THREE.Mesh(geometry,material);
        scene.add(mesh);

在这里插入图片描述
上述方式虽然可以制作一块绿色的平面，但是这很难让人联想到这里是一块草地

这时候我们就需要借助纹理来生成草地了

    function addMesh(){

        let texture = new THREE.TextureLoader().load("./grass.jpg");

        let geometry = new THREE.PlaneGeometry(10,10,10).rotateX(-Math.PI/2);
        let material = new THREE.MeshBasicMaterial({
            map:texture
        });
        let mesh = new THREE.Mesh(geometry,material);
        scene.add(mesh);
    }

在这里插入图片描述
这样的草地是否显得更逼真一些呢？

Texture与TextureLoader

先在这里说明一下，官方的写法这里存在问题
在这里插入图片描述
上面的案例也是按照官方写法而写的，但是这种写法会存在一个问题，就是TextureLoader.load()是一个异步函数，当你的图片加载速度低于你使用纹理的速度时，就有可能会出现错误，尤其是当你要一次加载多个纹理时，或者你加载的贴图过于巨大时（极高分辨率的大型巨型图片），此时受网速影响加载纹理太慢时，就会出现这样的问题
这种错误一般是线上更容易发生，而在本地开发过程中几乎不会遇到

因此笔者建议从一开始接触纹理时，就使用下面的写法

    function addMesh(){
    	//创建纹理加载器
        let textureLoader = new THREE.TextureLoader();
        //加载器读取grass.jpg，加载完成时执行下面的函数
        textureLoader.load("./grass.jpg",(texture)=>{
            let geometry = new THREE.PlaneGeometry(10,10,10).rotateX(-Math.PI/2);
            let material = new THREE.MeshBasicMaterial({
                map:texture
            });
            let mesh = new THREE.Mesh(geometry,material);
            scene.add(mesh);
        });
        
    }

官方文档中的wrapS和warpT等暂时不在本篇讨论，后续将有一篇文章单独对纹理详细讲解

Texture官方文档
TextureLoader官方文档
关于Loader会在后续专门写一篇文章来详细讲解，本篇仅对纹理做基本介绍

函数：textureLoader.load(url : String, onLoad : Function, onProgress : Function, onError : Function );
url：图片路径
onLoad：资源全部加载完成时的回调函数
onProgress：在加载过程中调用，用于监控加载进度
onError：加载错误时回调

在前期的学习和开发中，笔者建议始终添加onError参数来监控加载情况，后续讲到模型加载时会再提这方面事宜

        let textureLoader = new THREE.TextureLoader();

        textureLoader.load("./gr2ass.jpg",(texture)=>{
            let geometry = new THREE.PlaneGeometry(10,10,10).rotateX(-Math.PI/2);
            let material = new THREE.MeshBasicMaterial({
                map:texture
            });
            let mesh = new THREE.Mesh(geometry,material);
            scene.add(mesh);
        },null,(error)=>{
            console.log(error);
        });

如果仅对一个文件做加载时，onProgress函数可以先写为null

在onLoad函数中，我们可以获取到加载完成的资源，textureLoader中，已经将生成好的纹理，以对象的方式返回给我们了，所以这里我们直接访问它即可

官方写法中，并没有使用()=>{}这样的箭头函数，这种写法容易造成this指向错误，所以这里笔者建议，从这里开始，每一个Load函数，都使用箭头函数，以免出现一些奇奇怪怪的问题

箭头函数为ES6的语法，不熟悉ES6的同学这时还可以去了解一下

当我们拿到了加载完成后的纹理后，将它作为值，传给Material的map属性

 let material = new THREE.MeshBasicMaterial({
                map:texture
            });

如果这里再添加Color属性的话，Color会覆盖当前加载出来的纹理颜色

这样我们的草地就被创建出来了

案例完整源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas{
            display: block;
        }
        body {
            margin: 0;
            overscroll-behavior: none;
        }
        #btns{
            position: absolute;
            top:10%;
            width: 500px;
            height: 100px;
            left: 50%;
            transform:translateX(-50%);
        }
    </style>
</head>
<body>
<div id="btns"></div>

<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>

<script type="importmap">
			{
				"imports": {
					"three": "../../three.js-master/build/three.module.js"
				}
			}
		</script>
<script type="module">
    import * as THREE from '../../three.js-master/build/three.module.js';
    import {OrbitControls} from "../../three.js-master/examples/jsm/controls/OrbitControls.js";

    let scene,renderer,camera,orbitControls;

    function init(){
        scene = new THREE.Scene();
        renderer = new THREE.WebGLRenderer({
            alpha:true,
            antialias:true
        });
        renderer.setSize(window.innerWidth,window.innerHeight);
        document.body.appendChild(renderer.domElement);
        camera = new THREE.PerspectiveCamera(60,window.innerWidth/window.innerHeight,1,1000);
        camera.position.set(10,10,10);
        orbitControls = new OrbitControls(camera,renderer.domElement);
        scene.add(new THREE.AmbientLight(0xffffff,1));
        let helper = new THREE.AxesHelper(5);
        scene.add(helper);
    }
    function addMesh(){


        let textureLoader = new THREE.TextureLoader();

        textureLoader.load("./grass.jpg",(texture)=>{
            let geometry = new THREE.PlaneGeometry(10,10,10).rotateX(-Math.PI/2);
            let material = new THREE.MeshBasicMaterial({
                map:texture
            });
            let mesh = new THREE.Mesh(geometry,material);
            scene.add(mesh);
        },null,(error)=>{
            console.log(error);
        });

    }
    function render(){
        renderer.render(scene,camera);
        requestAnimationFrame(render);
    }
    init();
    addMesh();
    render();
</script>
</body>
</html>

案例使用的图片文件，图片来源：three.js-master\examples\textures\terrain下的草地贴图
在这里插入图片描述

做一个简单的地球出来

上面我们学会了怎么使用纹理，那么，这次我们不再将纹理贴到plane上，贴到我们的球体Sphere上

地球的贴图素材three.js-master\examples\textures\planets，这里我们选用的素材是earth_atmos_2048.jpg

在这里插入图片描述
完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas{
            display: block;
        }
        body {
            margin: 0;
            overscroll-behavior: none;
        }
        #btns{
            position: absolute;
            top:10%;
            width: 500px;
            height: 100px;
            left: 50%;
            transform:translateX(-50%);
        }
    </style>
</head>
<body>
<div id="btns"></div>

<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>

<script type="importmap">
			{
				"imports": {
					"three": "../../three.js-master/build/three.module.js"
				}
			}
		</script>
<script type="module">
    import * as THREE from '../../three.js-master/build/three.module.js';
    import {OrbitControls} from "../../three.js-master/examples/jsm/controls/OrbitControls.js";

    let scene,renderer,camera,orbitControls;

    function init(){
        scene = new THREE.Scene();
        renderer = new THREE.WebGLRenderer({
            antialias:true
        });
        renderer.setSize(window.innerWidth,window.innerHeight);
        document.body.appendChild(renderer.domElement);
        camera = new THREE.PerspectiveCamera(60,window.innerWidth/window.innerHeight,1,1000);
        camera.position.set(10,10,10);
        orbitControls = new OrbitControls(camera,renderer.domElement);

        let helper = new THREE.AxesHelper(5);
        scene.add(helper);

        let light = new THREE.PointLight();
        camera.add(light);
        scene.add(camera);
    }
    function addMesh(){

        let textureLoader = new THREE.TextureLoader();

        textureLoader.load("./earth_atmos_2048.jpg",(texture)=>{
            let geometry = new THREE.SphereGeometry(5,32,32);
            let material = new THREE.MeshStandardMaterial({
                map:texture
            });
            let mesh = new THREE.Mesh(geometry,material);
            scene.add(mesh);
        },null,(error)=>{
            console.log(error);
        });
    }
    function render(){
        renderer.render(scene,camera);
        requestAnimationFrame(render);
    }
    init();
    addMesh();
    render();
</script>
</body>
</html>

完整效果：
在这里插入图片描述
大多数知识点在前面已经解析完成，笔者在这里就不多做解释了

下一篇预告：加载模型

下一篇主要讲解主流的几种模型格式与Loader，以及加载管理器LoadingManager

幻梦丶海炎
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
threejs写的一些特效
03-31
threejs写的一些特效
three-geojson-geometry:ThreeJS几何体可在球体上绘制GeoJSON对象
04-27
ThreeJS GeoJSON几何 ThreeJS几何类，用于在球体上抚摸GeoJSON对象。 快速开始 import { GeoJsonGeometry } from 'three-geojson-geometry'; 或者 const { GeoJsonGeometry } = require('three-geojson-geometry');...
threejs教程(一)
LI_YICHAO的博客
01-11 424
three.js教程(一)
【Three.js】Three.js快速上手教程
余浩的博客
12-19 5722
`three.js`是`JavaScript`编写的`WebGL`第三方库。提供了非常多的3D显示功能，是一个常见的`web 3D`库。
三维GIS开发核心：Three.js教程
GIS前端嘉欣的博客
05-17 802
讲到 Three.js，就需要先说一下 OpenGL 和 WebGL， OpenGL 是一个跨平台的3D/2D的绘图标准（规范），WebGL（Web Graphics Library）是一种3D绘图协议，它允许把JavaScript和OpenGL 结合在一起运用，但使用WebGL原生的API来写3D程序非常的复杂，同时需要相对较多的数学知识，对于前端开发者来说学习成本非常高。WebGL是一种Javascript的3D图形接口，把JavaScript和OpenGL ES 2.0结合在一起。
ThreeJS视频教程
09-24
对整threeJS体系进行全面剖析。整理出全面的教学大纲，涵盖内容面非常广。此教学版本为threeJS107版本。关于版本不建议大家使用低于90的版本学习。以下是课程目录1-ThreeJS概览（基本图形简介，什么是点线面如何绘制点线面，什么是材质，什么是几何体，什么是相机，什么是渲染器，什么是场景）2-相机和渲染器（详解相机类型，渲染器如何使用，针对不同场景怎么用，怎么调效果，怎么渲染，怎么输出画布，如何解决透明问题等等）3-创建平面几何（常见的几何体如何使用，如何使用简单的几何体绘制出自定义自己想要的几何体，关于几何体的性能剖析，如何解决性能，几何体的渲染原理）4-高级图形算法常见库（求直线的斜率  计算线段与圆的交点 计算线段的长度 判断折线是否在多边形内 等等）5-sprite精灵(怎么让一个图标永远朝向屏幕，精灵的属性，精灵材质原理等，广告提示框必用)6-骨骼游戏动画（什么是模型动画，常见游戏案例，如何让人头进行各种攻击动作）7-3d模型加载（常见模型格式，如何渲染不同格式，不同格式的特点，什么格式性能优越，模型渲染异常，贴图不显示等问题详解）8-高阶动态纹理（你所不知道的纹理用法，我说你不知道，你肯定不知道）9-漫游轨迹以及其动画路径（怎么绘制贝塞尔曲线，如何使用曲线上的路径，跟随路径移动的原理，相机如何运动，物体如何运动）10-着色器（什么是着色器。初识着色器基础，着色器材质怎么用，怎么使用着色器库）11-常见渲染以及透明度问题12-对象拾取以及拖拽（3d世界里面如何拖拽物体，拖拽的原理，mousemove mouseon等的事件效果）13-世界坐标以及组的问题（什么是相对坐标，什么是世界坐标，什么是当前坐标，怎么转化父子坐标系，组的优化，为什么用组，组的优势）14-指定对象旋转中心（什么是物体的几何体中心，如何改变中心，如何绕轴转动）15-层级对象渲染（多个场景一键切换，切换的优势，针对大项目的用法）16-拓展了解系列（不定期不断更新案例，各种酷炫效果bloom,halo等，以及各种3d图表，粒子案例等,不断构建你的3d实践能力）
ThreeJS 3D高级教程
07-11
该课程是在ThreeJS 3D基础版的提升，学习基础版以后，再学习该课程，目的是帮助在ThreeJS 3D应用方面做一个技术提升，该课程实现了一些比较复杂的效果，当然这些效果实现起来也不难，只要掌握了ThreeJS 3D编程的精髓，学习就容易的多了。
Three.js教程：threejs语法总结
ygtu2018的博客
06-30 260
本节课从JavaScript面向对象语法的角度，给大家总结下threejs API的使用习惯，这样方便大家更好的使用threejs API。Three.js提供了各种各样的类(构造函数),通过new关键字可以实例化类(构造函数)，获得一个对象，对象具有属性和方法。// new实例化类THREE.MeshLambertMaterial，创建一个材质对象// 可以看到材质对象的属性color、side、opacity、transparent...// 通过属性可以看到threejs默认的属性值。
ThreeJs使用教程
PIOnly的博客
03-06 815
threejs使用教程
three-conic-polygon-geometry:ThreeJS几何体，用于在球体上绘制多边形
04-27
ThreeJS圆锥多边形几何 ThreeJS几何类，用于使用圆锥体在球面上绘制多边形。 例子： （ ） （ ）快速开始import { ConicPolygonGeometry } from 'three-conic-polygon-geometry';或者const { ConicPolygonGeometry }...
D3.js自学推荐的两本书（精通D3.js交互式数据可视化高级编程，d3.js数据可视化实践）
03-26
在自学D3.js过程中看过的两本书，这两本书的特点是结合案列讲的很详细，适合快速入门和提升，附件为pdf高清版资料。
three-csg-ts:与THREE.js一起使用的CSG库
05-02
三个csg-ts 带有Typescript支持的CSG（本几何）库。 这是的打字稿重写。概念CSG是用于根据两个输入几何图形生成新几何图形的技术的名称。 在3d建模包中，CSG有时称为...// Make 2 box meshes..const meshA = new THREE.
Three.js学习之几何形状
10-21
本文利用实例代码详细介绍了一些Three.js中的几何形状的实现过程，包括立方体、平面与球体，有需要的朋友们可以学习下。
threejs-csg:用于Three.js，ES6 + BufferGeometry的构造实体几何
04-05
threejs-csg（进行中） 用于Three.js，ES6 + BufferGeometry的构造实体几何发展运行npm install然后npm start 要查看演示，请将浏览器定向到用法const box = new Mesh(new BoxBufferGeometry(0.2, 0.2, 1), material...
threejs渲染效果
rui913的博客
10-14 553
threejs 渲染效果
Threejs—sketch 素描特效实现
BIM树洞的博客
08-10 361
最近在研究shadertoy上的各种shader特效，并且想把这些特效移植到threejs里面，下面是最近实现的一个简单的素描特效
Three.js-着色器（glsl内置函数实现各种效果2）
damadashen的博客
07-16 1206
使用glsl内置函数及自定义函数实现各种图形。
three.js学习：给obj模型设置发光并解决渲染变暗问题
qq_43641110的博客
02-28 4121
在three.js中实现几何体边界发光，并解决渲染之后环境变暗的问题
three.js three.js入门指南-中文基础教程
最新发布
01-23
three.js是一款用于创建3D图形的JavaScript库。它提供了丰富的功能和工具，可以在Web上轻松创建复杂的3D场景和动画效果。如果你想学习three.js，可以按照下面的入门指南来开始。 首先，你需要了解一些基本的Web开发知识，比如HTML、CSS和JavaScript。然后，你需要在你的项目中引入three.js库，你可以通过下载源代码或者使用CDN来获取这个库。一旦你引入了库，你就可以开始使用three.js创建3D场景了。 在使用three.js之前，你需要了解一些基本概念，比如场景（Scene）、相机（Camera）、渲染器（Renderer）和几何体（Geometry）。你可以通过在文档和教程中学习这些概念。 一旦你理解了基本概念，你就可以尝试创建一些简单的3D图形和动画效果。你可以尝试创建立方体、球体或者其他基本形状，也可以尝试给它们添加材质和光照效果。通过不断的尝试和实践，你会逐渐掌握three.js的使用方法和技巧。 除了基本形状和物体，你还可以学习如何导入模型和纹理，以及如何添加交互和动画效果。通过持续学习和实践，你可以创建出更加复杂和精美的3D场景和动画效果。 总的来说，学习three.js需要持续的学习和实践。希望这个入门指南可以帮助你快速入门three.js，并在Web上创建出令人惊叹的3D图形和动画效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值