three.js学习系列-00

最新推荐文章于 2022-06-27 17:46:29 发布
最新推荐文章于 2022-06-27 17:46:29 发布
阅读量176 收藏
点赞数
分类专栏： webgl
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tomihaohao/article/details/105114294
版权

three js 学习系列-00

three js 是一个 webgl的 库 ，webgl 基于opengl 所以学习 three.js的时候顺带还要看下 OpenGL的东西

  • 推荐OPENGL学习地址
  • 还需要学习一些基本的 图形学 数学知识 推荐 这本书 《3D数学基础：图形与游戏开发》
  • 基本的 计算机图形学认知 推荐这本书《计算机图形学 第4版》
  • 当然学习上面的这些东西你还需要 熟悉下C++的语法知识 我用的是大学的教材 这个是随意

下面我们来开始第一步学习

首先我们要去 github上面下载 three.js的项目 你也可以 将项目转到自己的 分支上面
下载完成后 通过 npm install 和 npm run dev 你就可以运行起 three.js 的项目 包括文档 例子 等等
截图1
要使用three.js 很简单只需要引入 three.js 的脚本就可以了

截图2
接着我们来实现 第一个 hello world 程序 渲染一个球体 和 立方体

three.js 必备这几个元素

  • 渲染的场景 平面 我们称为 Plane
  • 要渲染的方块 Cube
  • 要渲染的球体 Sphere
  • 我们需要一个相机 决定看到的输出结果
  • Axes 轴 x,y,z 有助于调试工具

知道了 需要上面几个元素 我们就结合文档 去寻找相关的 知识

<!DOCTYPE html>

<html>

<head>
    <title>Example 01.02 - First Scene</title>
    <script type="text/javascript" src="../libs/three.js"></script>
    <style>
        body {
            /* set margin to 0 and overflow to hidden, to go fullscreen */
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>

<!-- Div which will hold the Output -->
<div id="WebGL-output">
</div>

<!-- Javascript code that runs our Three.js examples -->
<script type="text/javascript">

    // once everything is loaded, we run our Three.js stuff.
    function init() {

        // create a scene, that will hold all our elements such as objects, cameras and lights.
        var scene = new THREE.Scene();

        // create a camera, which defines where we're looking at.
        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

        // create a render and set the size
        var renderer = new THREE.WebGLRenderer();
        renderer.setClearColorHex();
        renderer.setClearColor(new THREE.Color(0xEEEEEE));
        renderer.setSize(window.innerWidth, window.innerHeight);

        // show axes in the screen
        var axes = new THREE.AxisHelper(20);
        scene.add(axes);

        // create the ground plane
        var planeGeometry = new THREE.PlaneGeometry(60, 20);
        var planeMaterial = new THREE.MeshBasicMaterial({color: 0xcccccc});
        var plane = new THREE.Mesh(planeGeometry, planeMaterial);

        // rotate and position the plane
        plane.rotation.x = -0.5 * Math.PI;
        plane.position.x = 15;
        plane.position.y = 0;
        plane.position.z = 0;

        // add the plane to the scene
        scene.add(plane);

        // create a cube
        var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
        var cubeMaterial = new THREE.MeshBasicMaterial({color: 0xff0000, wireframe: true});
        var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

        // position the cube
        cube.position.x = -4;
        cube.position.y = 3;
        cube.position.z = 0;

        // add the cube to the scene
        scene.add(cube);

        // create a sphere
        var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
        var sphereMaterial = new THREE.MeshBasicMaterial({color: 0x7777ff, wireframe: true});
        var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);

        // position the sphere
        sphere.position.x = 20;
        sphere.position.y = 4;
        sphere.position.z = 2;

        // add the sphere to the scene
        scene.add(sphere);

        // position and point the camera to the center of the scene
        camera.position.x = -30;
        camera.position.y = 40;
        camera.position.z = 30;
        camera.lookAt(scene.position);

        // add the output of the renderer to the html element
        document.getElementById("WebGL-output").appendChild(renderer.domElement);

        // render the scene
        renderer.render(scene, camera);
    }
    window.onload = init;

</script>
</body>
</html>

上面这段代码注释的 很清楚了 我们创建的必备的几个元素 在浏览器上我们马上可以看到效果，
如果上面有不明白的 代码就去结合文档，里面 告诉了你 是啥意思
例如

var sphereMaterial = new THREE.MeshBasicMaterial({color: 0x7777ff, wireframe: true});

上面的代码结合 文档我们知道了 这是在创建一个材质对象，构造函数中 color 代表颜色
wireframe 代表使用线框，如果改成 false 立方体变成红颜色
在这里插入图片描述
打开线框 wireframe true
截图4

Tomihaohao
关注
专栏目录
threeJs-dev
03-17
Three.js旅程 设置 下载 运行以下命令： # Install dependencies (only the first time) npm install # Run the local server at localhost:8080 npm run dev # Build for production in the dist/ directory npm run build
Three.js从入门到放弃
郊眠寺
10-26 3124
/ 渲染下一帧的时候就调用animaterequestAnimationFrame(animate);}animate();运行 npm run dev最近找到一个VUE的文档，它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。
threejs 设置背景透明
txl910514的专栏
09-27 2008
var renderer = new THREE.WebGLRenderer( { alpha: true } ); 不能设置场景颜色 scene.background
如何使用ES6开发Three.js项目（一）
X01动力装甲的专栏
08-29 6371
如何使用ES6开发Three.js项目（一） 如何使用ES6开发Three.js项目（二） 配置开发环境：node.js+webpack+webpack-dev-server+babel+ES6+three.js node.js webpack webpack-dev-server babel ES6 three.js   1、使用npm安装three.js。注意安装命令是thr...
threejs显示线框模式
牟云飞的博客
03-30 6629
1、线框和mesh同时存在 var wireframeMaterial = new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, transparent: true } ); //pn是一个mesh var wireframe = new THREE.Mesh( pn.geometry, wireframeMateri...
three.js-r133.zip
06-16
《深入探索Three.js-r133：JavaScript 3D库的奇妙世界》 Three.js，作为WebGL库的杰出代表，为JavaScript开发者提供了一个简单易用的接口，用于在浏览器中创建令人惊叹的3D图形。这个名为"three.js-r133.zip"的...
three.js-browser-game
03-31
总的来说，"three.js-browser-game"项目涵盖了从基础的3D图形渲染到复杂的用户交互和性能优化等多个方面，是学习`three.js`和JavaScript游戏开发的一个理想实践。通过深入理解这些知识点，你可以创建出令人印象深刻...
Three.js-experiments-pool-master.zip
10-12
本篇文章将深入探讨名为"Three.js-experiments-pool-master.zip"的压缩包内容，它包含了一系列Three.js的实验性项目，旨在帮助我们更好地理解和应用Three.js库进行3D特效制作。 Three.js是基于WebGL的，WebGL是一种...
three.js-crash-course
03-30
在"three.js-crash-course-master"这个项目中，你将找到一系列示例代码和教程，涵盖以上各个主题，帮助你逐步学习和实践Three.js。通过这些实践，你将能够创建复杂的3D场景，包括交互式的虚拟环境和游戏。随着对...
three.js-线上运动的光效
10-19
three.js 是一个流行的JavaScript库，用于在Web浏览器中创建3D图形，它利用 WebGL 技术提供丰富的三维渲染功能。在这个项目中，开发者可能探索了如何在场景中添加运动的光源，从而影响物体表面的明暗变化，创造出...
Three.js入门（涉及本地搭建threejs官方网站、使用parcel搭建three.js开发环境等）
m0_46339022的博客
06-27 4156
我跟的课程：https://www.bilibili.com/video/BV1Gg411X7FY?p=3&spm_id_from=pageDriver&vd_source=d45e199a358edbf199494ee895775ab3本文是我自己整理的课程笔记，因为最近的项目要使用three.js，我就开始学习啦，需要的话大家也可以跟着这位老师的课程看我的笔记。在github.com/mrdoob/three.js/中，点击SSH，Download ZIP，得到压缩包后，拖入Vscode，在集中终端中打
ThreeJS-前端3D可视化开发入门-vue
热门推荐
loki的博客
11-26 1万+
1、npm安装threejs 创建vue项目(略) 执行如下命令：安装threejs相关模块 npm install three npm install three-css2drender npm install three-obj-mtl-loader npm install three-orbit-controls package.json 如下 { "name": "vue-lk-test", "version": "0.1.0", "private": true, "
three.js+vue随手练习——1
weixin_50600778的博客
01-20 431
three官网有很多示范可以下载下来研究参考 官网源码地址：https://github.com/mrdoob/three.js/ 示例都在examples文件夹里面 点击code，下载zip文件到本地然后解压 在地址栏输入cmd，打开控制台 输入cnpmi回车，静静等待 依赖安装完毕之后，输入npm run dev,回车，成功之后会返回项目运行的本地地址，这里也可以自行修改，具体修改就不做赘述了，百度一下 在浏览器输入...
本地搭建three.js官网
fu_miao_qi_lai的博客
06-22 1019
本地搭建three.js官网
深入剖析Oracle与MySQL在事务处理上的差异
10-06
在数据库管理系统中，事务处理是确保数据一致性和完整性的关键机制。Oracle和MySQL作为两大主流的数据库系统，在事务处理方面有着各自的特点和差异。本文将从事务的基本概念、隔离级别、锁机制以及事务控制语句等方面，详细探讨Oracle与MySQL在事务处理上的差异，并提供代码示例。 Oracle和MySQL在事务处理上有着各自的特点。Oracle提供了强大的并发控制和隔离级别管理，适合处理复杂的企业级事务。MySQL则以其简单性和灵活性，在Web应用和中小型项目中广泛使用。了解这些差异对于开发者选择合适的数据库系统以及优化事务处理至关重要。通过本文的分析和代码示例，读者应该能够更深入地理解Oracle与MySQL在事务处理上的差异，并在实际应用中做出更合适的选择。
电力系统稳态分析-考研必备
10-06
电力系统分析经典教材资料
人工智能在高中信息技术教学中的应用与实践.pdf
最新发布
10-06
毕业设计选题/开题答辩/项目源码/论文等资源 硕博论文、期刊资源、有需要可详细咨询 毕业设计选题/开题答辩/项目源码/论文等资源 硕博论文、期刊资源、有需要可详细咨询毕业设计选题/开题答辩/项目源码/论文等资源 硕博论文、期刊资源、有需要可详细咨询毕业设计选题/开题答辩/项目源码/论文等资源 硕博论文、期刊资源、有需要可详细咨询毕业设计选题/开题答辩/项目源码/论文等资源 硕博论文、期刊资源、有需要可详细咨询毕业设计选题/开题答辩/项目源码/论文等资源 硕博论文、期刊资源、有需要可详细咨询毕业设计选题/开题答辩/项目源码/论文等资源 硕博论文、期刊资源、有需要可详细咨询毕业设计选题/开题答辩/项目源码/论文等资源 硕博论文、期刊资源、有需要可详细咨询毕业设计选题/开题答辩/项目源码/论文等资源 硕博论文、期刊资源、有需要可详细咨询毕业设计选题/开题答辩/项目源码/论文等资源 硕博论文、期刊资源、有需要可详细咨询毕业设计选题/开题答辩/项目源码/论文等资源 硕博论文、期刊资源、有需要可详细咨询毕业设计选题/开题答辩/项目源码/论文等资源 硕博论文、期刊资源、有需要可详细咨询
基于Springboot和Vue的获奖的知名作家信息管理系统源码 获奖的知名作家信息管理系统代码
10-06
获奖的知名作家信息管理系统-获奖的知名作家信息管理系统-获奖的知名作家信息管理系统-获奖的知名作家信息管理系统-获奖的知名作家信息管理系统-获奖的知名作家信息管理系统-获奖的知名作家信息管理系统-获奖的知名作家信息管理系统-获奖的知名作家信息管理系统-获奖的知名作家信息管理系统-获奖的知名作家信息管理系统-获奖的知名作家信息管理系统 1、资源说明：获奖的知名作家信息管理系统源码，本资源内项目代码都经过测试运行成功，功能ok的情况下才上传的。 2、适用人群：计算机相关专业(如计算计、信息安全、大数据、人工智能、通信、物联网、自动化、电子信息等)在校学生、专业老师或者企业员工等学习者，作为参考资料，进行参考学习使用。 3、资源用途：本资源具有较高的学习借鉴价值，可以作为“参考资料”，注意不是“定制需求”，代码只能作为学习参考，不能完全复制照搬。需要有一定的基础，能够看懂代码，能够自行调试代码，能够自行添加功能修改代码。 4. 最新计算机软件毕业设计选题大全(文章底部有博主联系方式): https://blog.csdn.net/2301_79206800/article/detail
医学图像分割数据集：超声乳腺良性图像分割数据集（包含训练集和测试集、标签）
10-06
医学图像分割数据集：超声乳腺良性图像分割数据集（包含训练集和测试集、标签） 【2类别的分割，背景、良性乳腺，具体的查看classes文件】 数据集介绍：分为训练集、测试集 训练集：images图片目录+masks模板目录，300张左右图片和对应的mask图片 测试集：images图片目录+masks模板目录，130张左右图片和对应的mask图片 除此之外，包含一个图像分割的可视化脚本，随机提取一张图片，将其原始图片、GT图像、GT在原图蒙板的图像展示，并保存在当前目录下 医学图像分割网络介绍：https://blog.csdn.net/qq_44886601/category_12102735.html
精通Three.js：WebGL的JavaScript 3D库实战指南
2. **Three.js入门**：Three.js库简化了WebGL编程的复杂性，提供了一系列预定义的对象、材料、光照等，使得创建3D场景变得简单。学习Three.js需要了解如何初始化场景、相机、光源以及如何添加几何体。 3. **几何体...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值