Three.js 零基础保姆级教程

最新推荐文章于 2024-05-16 09:25:17 发布
最新推荐文章于 2024-05-16 09:25:17 发布
阅读量1w 收藏 56
点赞数 12
分类专栏： Three js 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42817995/article/details/118753443
版权
Three 同时被 2 个专栏收录
3 篇文章 5 订阅
订阅专栏
js
3 篇文章 0 订阅
订阅专栏

文章目录

一、Three.js 是什么？

1.介绍

Three.js是基于原生WebGL封装运行的三维引擎，在所有WebGL引擎中，Three.js是国内文资料最多、使用最广泛的三维引擎。

2.环境配置

js作为一个跨端语言，可作为IDE的软件有很多，笔者这里使用的是 websotrm，它的好处是改动一处便可直接显示。

在此给出Three.js的官方GitHub库，[Three.js-GitHub](https://github.com/mrdoob/three.js)，请提前下载

3.WebGL和Three.js学习顺序？

引用自Three教程
如果你急于要实现一个Web3D功能，时间有限，也没有图形学基础，个人建议直接学习先Three.js即可，以后想深入掌握，可以学习原生WebGL和图形学相关知识。

如果时间比较充足，又希望有更大的成长空间，学习底层原生WebGL肯定是必要的，可以WebGL和Threejs结合着学习，顺序也不是非常重要。

二、麻雀虽小而五脏俱全的例子

1.引入资源包

<head>
    <meta charset="UTF-8">
    <title>第一个three.js文件_WebGL三维场景</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            /* 隐藏body窗口区域滚动条 */
        }
    </style>
    <!--    引入three.js三维引擎-->
    <script src="./three.js-r95/build/three.js"></script>
    <!--    引入OrbitControls.js鼠标操作三维场景-->
    <script src="./three.js-r95/examples/js/controls/OrbitControls.js"></script>


</head>

2.创建场景和添加2个以上的3D对象

    /**
     * 创建场景对象Scene
     */
    var scene = new THREE.Scene();

    /**
     * 创建网格模型，并添加到场景
     */
    var geometry = new THREE.BoxGeometry(25, 50, 50); //创建一个立方体几何对象Geometry
    var material = new THREE.MeshLambertMaterial({
        color: 0xff00ff,  //颜色 16进制
        opacity:0.9,      //透明度 0-1
        transparent:true, //开启透明度，默认关闭
        wireframe:false   //线框，默认关闭
    }); //材质对象Material
    var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
    scene.add(mesh); //网格模型添加到场景中

    var geometry2 = new THREE.BoxGeometry(25, 50, 50); //创建一个球体几何对象
    var material2 = new THREE.MeshLambertMaterial({
        color: 0xffffff,
        opacity:0.9,      //透明度 0-1
        transparent:true  //开启透明度
    }); //材质对象Material2
    var mesh2 = new THREE.Mesh(geometry2,material2)
    mesh2.translateX(-100);
    mesh2.translateZ(-30);
    // mesh2.translateY(30); //球体网格模型沿Y轴正方向平移
    scene.add(mesh2)

(可选)3.添加辅助坐标系

    /**
     * 辅助坐标系  参数1000表示坐标系大小
     */
    var axisHelper = new THREE.AxisHelper(1000);
    scene.add(axisHelper)

4.光源和相机设置

    /**
     * 光源设置
     */
        //点光源
    var point = new THREE.PointLight(0xfffffff);
    point.position.set(100, 100, 100); //点光源位置
    scene.add(point); //点光源添加到场景中
    //环境光
    var ambient = new THREE.AmbientLight(0x444444);
    scene.add(ambient);


    /**
     * 相机设置
     */
    var width = window.innerWidth; //窗口宽度
    var height = window.innerHeight; //窗口高度
    var k = width / height; //窗口宽高比
    var s = 100; //三维场景显示范围控制系数，系数越大，显示的范围越大
    //创建相机对象
    // var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
    var camera = new THREE.PerspectiveCamera( 45, width / height, 1, 1000 );
    camera.position.set(200, 0, 0); //设置相机位置
    camera.lookAt(scene.position); //设置相机方向(指向的场景对象)position

5.渲染得到结果

    /**
     * 创建渲染器对象
     */
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height);//设置渲染区域尺寸
    renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
    document.body.appendChild(renderer.domElement); //body元素中插入canvas对象

    function render() {
        console.log(camera.position)
        renderer.render(scene,camera);//执行渲染操作
    }
    render();
    var controls = new THREE.OrbitControls(camera,renderer.domElement);//创建控件对象
    controls.addEventListener('change', render);//监听鼠标、键盘事件

结果图如下：
在这里插入图片描述

总结及完整源码

以上就是今天要讲的内容，本文仅仅简单介绍了Three.js的使用。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>第一个three.js文件_WebGL三维场景</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            /* 隐藏body窗口区域滚动条 */
        }
    </style>
    <!--    引入three.js三维引擎-->
    <script src="./three.js-r95/build/three.js"></script>
    <!--    引入OrbitControls.js鼠标操作三维场景-->
    <script src="./three.js-r95/examples/js/controls/OrbitControls.js"></script>


</head>

<body>
<script>
    /**
     * 创建场景对象Scene
     */
    var scene = new THREE.Scene();

    /**
     * 创建网格模型，并添加到场景
     */
    var geometry = new THREE.BoxGeometry(25, 50, 50); //创建一个立方体几何对象Geometry
    var material = new THREE.MeshLambertMaterial({
        color: 0xff00ff,  //颜色 16进制
        opacity:0.9,      //透明度 0-1
        transparent:true, //开启透明度，默认关闭
        wireframe:false   //线框，默认关闭
    }); //材质对象Material
    var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
    scene.add(mesh); //网格模型添加到场景中

    var geometry2 = new THREE.BoxGeometry(25, 50, 50); //创建一个球体几何对象
    var material2 = new THREE.MeshLambertMaterial({
        color: 0xffffff,
        opacity:0.9,      //透明度 0-1
        transparent:true  //开启透明度
    }); //材质对象Material2
    var mesh2 = new THREE.Mesh(geometry2,material2)
    mesh2.translateX(-100);
    mesh2.translateZ(-30);
    // mesh2.translateY(30); //球体网格模型沿Y轴正方向平移
    scene.add(mesh2)

    /**
     * 辅助坐标系  参数1000表示坐标系大小
     */
    var axisHelper = new THREE.AxisHelper(1000);
    scene.add(axisHelper)

    /**
     * 光源设置
     */
        //点光源
    var point = new THREE.PointLight(0xfffffff);
    point.position.set(100, 100, 100); //点光源位置
    scene.add(point); //点光源添加到场景中
    //环境光
    var ambient = new THREE.AmbientLight(0x444444);
    scene.add(ambient);


    /**
     * 相机设置
     */
    var width = window.innerWidth; //窗口宽度
    var height = window.innerHeight; //窗口高度
    var k = width / height; //窗口宽高比
    var s = 100; //三维场景显示范围控制系数，系数越大，显示的范围越大
    //创建相机对象
    // var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
    var camera = new THREE.PerspectiveCamera( 45, width / height, 1, 1000 );
    camera.position.set(200, 0, 0); //设置相机位置
    camera.lookAt(scene.position); //设置相机方向(指向的场景对象)position

    /**
     * 创建渲染器对象
     */
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height);//设置渲染区域尺寸
    renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
    document.body.appendChild(renderer.domElement); //body元素中插入canvas对象

    function render() {
        console.log(camera.position)
        renderer.render(scene,camera);//执行渲染操作
    }
    render();
    var controls = new THREE.OrbitControls(camera,renderer.domElement);//创建控件对象
    controls.addEventListener('change', render);//监听鼠标、键盘事件
</script>
</body>

</html>
Mr_Hzz
关注
  • 12
    点赞
  • 踩
  • 56
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
Three.js 入门指南(中文)
02-25
中文教程, 适用新手入门, 不错的, 通谷易懂
《Three.js零基础入门教程》相关源码
07-20
简介 0. 学前内容 1. three.js快速入门-新手上路 2. 顶点概念、几何体结构 3. 材质对象 4. 点线面模型对象 5. 光源对象 6. 层级模型、树结构 7. 几何体对象、曲线、三维建模 8. 纹理贴图 9. 相机对象(投影方式) 10. 精灵模型、粒子系统 11. 帧动画模块 12. 骨骼动画、变形动画 13. 语音模块 14. 模型文件加载 15. WebGL渲染器 1.场景渲染结果网页局部显示 结束
《Three.JS零基础入门教程》第六篇：物体详解
最新发布
GIS前端嘉欣的博客
05-16 893
如何在虚拟的3D场景中模拟真实世界, 核心是物体在。
【Threejs进阶教程-优化篇】2. 卡顿与内存管理(一)
qq_42760477的博客
03-14 2658
Threejs进阶教程，优化篇，卡顿与内存管理，本文从demo的角度，逐步分析为什么模型要按照标准来处理
Three.js入门学习
今晚吃火锅的博客
09-21 988
Three.js入门 定义 Three.js是基于原生WebGL封装运行的三维引擎，在所有WebGL引擎中，Three.js是国内文资料最多、使用最广泛的三维引擎。 资源结构 引入方式 相对路径引入 <script src="./three.js"></script> 绝对路径远程加载 <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></scr
ThreeJS入门-1
weixin_44531811的博客
07-10 99
【代码】ThreeJS入门-1。
Three.js入门指南-中文基础教程
12-25
适合初学者 three.js webgl three.js入门 three.js教程 webgl开发
Three.js入门教程——教不会算我输
热门推荐
哆啦A瑶的博客
06-09 9万+
在javascript中使用Three.js设计并且实现3D场景是一个很有意思的事情，因为在浏览器中就能够渲染出3D场景，非常简单和轻便。接下来就总结以下我学习Three.js过程中的心得。 1 建立基本场景 在Three.js中有三要素：场景、摄像机和渲染器，只有以上三者结合才能渲染出可见的内容。当然在这之前你需要先下载Three.js文件，直接百度搜索Three.js到官网下载即可，下载完...
『Three.js』入门教程
ReturnTmp的博客
10-28 2万+
目的：方便模块化进行three.js项目的学习和开发Building a web app with Parcel | Parcel 中文网。
three.js新手入门
weixin_48263065的博客
03-18 2138
# three.js 为了真正能够three.js来进行显示，我们需要以下几个对象：场景、相机和渲染器，这样我们就能透过摄像机渲染出场景。 ## 场景 Scene() > 场景能够让你在什么地方、摆放什么东西，这是你放置物体、灯光和摄像机的地方。 相关常用属性: 1. autoUpdate : Boolean 默认值为true，若设置了这个值，则渲染器会检查每一帧是否需要更新场景及其中物体的矩阵。 当设为false时，则需要手动维护场景中的矩阵。 2. background : O...
three.js入门教程--零基础也能学会
baekpcyyy的博客
11-28 2182
three.js入门教程--零基础也能学会
WebGL 可视化3D绘图框架：Three.js 零基础上手实战.rar
06-13
分享一套视频教程，名字叫：WebGL 可视化3D绘图框架：Three.js 零基础上手实战，非常棒的一套课程，喜欢的同学可以下载参考一下，附源码和课件
Three.js框架，菜鸟上路
zhaolisha9232的博客
03-25 4163
1． three.js是JavaScript编写的WebGL第三方库。提供了非常多的3D显示功能 下载最新的three.js库，将其包含在你的html 页面中。 https://www.jikexueyuan.com 简单学习视频 scriptsrc="js/three.min.js">script> 2．  搭建开发环境 网页编辑环境HTML5，JavaScript，css3, 即we
three.js 基础认识与简单应用
前端菜菜DayDayUp的博客
02-09 1万+
three.js 基础认识与简单应用
Three.js零基础入门教程(2023版本)
u014291990的博客
02-07 1万+
在正式学习Three.js之前，先做一些必要的准备工作，具体说就是下载threejs官方文件包，threejs官方文件包提供了很多有用的学习资源。下载three.js文件包解压后，你可以看到如下目录(不同版本会略有差异)。对于开发者而言，大家经常接触的是文档docs和案例examples两个文件夹，平时查看文档，可以打开文档docs里面html文件，案例examples里面提供了海量threejs功能案例。three.js-文件包。
【Three.js】Three.js快速上手教程
余浩的博客
12-19 6251
`three.js`是`JavaScript`编写的`WebGL`第三方库。提供了非常多的3D显示功能，是一个常见的`web 3D`库。
threejs入门第一节如何用threejs创建一个简单的场景
啦啦啦啦的成长之路
05-11 2381
什么是threejs？ threejs是一个用于在浏览器中绘制3D图像的JS库。它是基于webgl实现了，包括了webgl1和webgl2的渲染引擎。同时也包括了最新的webgpu。（部分浏览器基本不支持）。 准备工作 你可以新建一个vue或者react的工程项目，然后在命令行中使用命令 npm i three 如果是使用typescript进行开发的话，需要安装dts定义文件，使用命令 npm i @types/three 如果你是使用单个html文件进行开发的话，就很简单了，直接下载threejs的
three.js零基础入门教程源代码
06-26
### 回答1： 如果你想开始学习three.js，可以从教程源代码入手。教程源码提供了一些示例和实例，可以启发你的创作灵感，也可以让你更快地理解three.js的基础知识。 在查看源码之前，你需要先安装three.js和web开发环境。安装完成后，你就可以开始查看源码了。 教程源码一般会有一些说明和注释，这些注释可以帮助你更好地理解代码的功能和实现方法。你可以先阅读这些注释，然后尝试运行代码，看代码是如何运作的。 当你理解了一些基础的代码后，你可以尝试自己写一些小程序，练习three.js的使用。这些小程序可能简单，但是可以帮助你加深对three.js的理解，并为今后更复杂的项目做好准备。 最重要的是，遇到问题不要担心，可以参考three.js社区和文档，也可以在网上寻找相关的教程和视频。通过不断摸索和学习，你一定能掌握three.js的使用技巧，创作出自己喜欢的作品。 ### 回答2： three.js是一个能够在网页上实现3D图形和动画效果的JavaScript库，可以用于创建各种有趣的3D场景和游戏。针对初学者，有很多的入门教程和示例代码可供学习和练习。 在网上搜索“three.js入门教程源代码”可以找到很多优秀的教程和示例代码，如three.js官方文档、CodePen、Github等。此外，同类的OpenGL和WebGL等技术也有很多优秀的资源可供参考。 对于初学者来说，建议先了解three.js的基本知识，如坐标系、场景、相机、灯光、材质、几何体等等。然后可以通过实践来加深理解，例如创建一个简单的立方体、平面、球体等。同时也可以尝试调整相机、灯光和材质等参数，看看会发生什么变化。 在学习过程中，遇到问题可以查阅文档或者在相关社区寻求帮助。同时也要多注重实践，通过参考示例代码和自己实践来提升技能。 ### 回答3： three.js是一个非常流行的JavaScript 3D图形库，很多人想要学习它，但是对于初学者来说，这可能会让他们感到非常困难。因此，一些网站和博客提供了一些入门教程以帮助初学者了解并开始使用three.js，其中一些包括源代码。 这些源代码提供一些基础教学，帮助用户通过编写一些简单的three.js代码并观察结果来学习three.js的基础知识。 用户可以下载源代码，并使用它们在自己的计算机上运行三维场景。 这些源代码通常提供了许多有关three.js的基础知识，包括： 1. 创建场景，灯光和相机。 2. 从文件中加载3D模型和纹理。 3. 使用材质和纹理来渲染对象。 4. 添加动画和控制器。 5. 处理鼠标和键盘输入。 6. 在网页上嵌入three.js场景。 这些源代码通常以注释的形式提供，说明每个代码块的功能。此外，这些源代码通常遵循良好的编程实践，使读者易于理解和跟踪整个过程。 总的来说，three.js零基础入门教程源代码非常适合那些想要学习three.js的初学者，他们可以通过这些源代码快速入门，并了解更多three.js知识。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值