【Three.js】前端从零开始学习 threejs:创建第一个 threejs3D 页面

课程和学习大纲

对应的课程在这里:Threejs教程、2023最新最全最详细Threejs教程、零基础Threejs最详细教程(已完结)

学习知识要点思维导图:
在这里插入图片描述

官网和文档的使用

three.js 官网
在这里插入图片描述
如果无法访问,可以下载国内大佬的镜像跑起来就行 threejs-code-public
在这里插入图片描述
npm i 下载依赖后启动 npm run start 启动就可以啦!

在这里插入图片描述

官方编辑器直接点击,后续拿来做测试使用。
在这里插入图片描述

创建第一个 threejs3D 页面

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>My first three.js app</title>
    <style>
      body {
        margin: 0;
      }
    </style>
  </head>
  <body>
    <script type="module">
      import * as THREE from 'https://unpkg.com/three/build/three.module.js';

      // Our Javascript will go here.
      // 创建场景:场景是所有物体的容器
      const scene = new THREE.Scene();
      // 创建相机:相机是用户眼睛
      const camera = new THREE.PerspectiveCamera(); // 透视相机
      // 调整相机位置
      camera.position.z = 10; // 将相机向后移动10个单位
      camera.position.y = 5; // 将相机向上移动5个单位

      // 创建一个立方体:BoxGeometry 是一个立方体的几何体
      const geometry = new THREE.BoxGeometry();
      // 创建一个材质:MeshBasicMaterial是一种简单的材质,不受光照影响
      const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

      // 创建一个立方体网格:Mesh是一个物体,它由几何体和材质组成
      const cube = new THREE.Mesh(geometry, material);
      cube.position.set(0, 3, 0);
      // 将立方体网格添加到场景中
      scene.add(cube);

      // 创建渲染器:渲染器将场景和相机渲染到画布上
      const renderer = new THREE.WebGLRenderer();
      // 在页面中添加渲染器
      document.body.appendChild(renderer.domElement);
      // 设置渲染器的大小
      renderer.setSize(window.innerWidth, window.innerHeight);

      // 添加网格地面
      const gridHelper = new THREE.GridHelper(10, 10);
      scene.add(gridHelper);

      // 调用渲染
      renderer.render(scene, camera);

      // 创建一个动画
      function animate() {
        requestAnimationFrame(animate); // requestAnimationFrame: 浏览器会在下一次重绘之前调用指定的回调函数
        // 使立方体网格旋转
        // cube.rotation.x += 0.01;
        cube.rotation.y += 0.01;
        // 调用渲染
        renderer.render(scene, camera);
      }
      animate();
    </script>
  </body>
</html>

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/403012.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

在UE5中制作UI环形进度条

在日常开发中&#xff0c;经常会有环形进度条UI的效果&#xff0c;例如技能CD时间、加载动画等&#xff0c;本文将通过材质球节点实现该效果&#xff0c;相较于准备美术素材&#xff0c;这样的做法更为方便&#xff0c;效果如下&#xff1a; 1.制作环状效果材质函数 在内容面…

使用RingAttention处理百万长度视频和语言的世界模型

摘要 2402.08268v1.pdf (arxiv.org) 当前的语言模型在理解不容易用语言描述的世界方面存在不足&#xff0c;并且在处理复杂、长篇的任务时也存在困难。视频序列提供了语言中不存在的有价值的时间信息&#xff0c;使其与语言联合建模变得具有吸引力。这样的模型可以发展出对人…

IO进程线程day6

思维导图&#xff1a; 1.将互斥机制的代码实现重新敲一遍。 #include<myhead.h> int num520;//临界资源//创建一个互斥锁变量 pthread_mutex_t mutex;//定义任务&#xff11;函数 void *task1(void *arg) {printf("我是任务&#xff11;&#xff1a;\n");//3.…

在Shopee 平台上销售露营用品的策略指南

在当今数字化时代&#xff0c;电商平台成为了许多商家推广产品的首选渠道。对于想要在 Shopee 平台上销售露营用品的卖家来说&#xff0c;制定有效的选品策略至关重要。通过市场调研、热销品类分析、竞品分析、产品差异化等一系列策略&#xff0c;卖家可以提高产品的竞争力和销…

程序员可以做哪些副业?

如果你经常玩知乎、看公众号&#xff08;软件、工具、互联网这几类的&#xff09;你就会发现&#xff0c;好多资源连接都变成了夸克网盘、迅雷网盘的资源链接。 例如&#xff1a;天涯神贴&#xff0c;基本上全是夸克、UC、迅雷网盘的资源链接。 有资源的前提下&#xff0c;迅雷…

【大数据】Flink 之部署篇

Flink 之部署篇 1.概述和参考架构2.可重复的资源清理3.部署模式3.1 Application 模式3.2 Per-Job 模式&#xff08;已废弃&#xff09;3.3 Session 模式 Flink 是一个多用途框架&#xff0c;支持多种不同的混合部署方案。下面&#xff0c;我们将简要介绍 Flink 集群的构建模块、…

电阻知识详解

基本介绍 电阻阻碍电流流动&#xff1a;只要有电流流过电阻&#xff0c;就会产生功率损耗 基本单位&#xff1a;欧姆&#xff0c;Ω 换算单位&#xff1a;微欧&#xff08;uΩ&#xff09;、毫欧&#xff08;mΩ&#xff09;、千欧&#xff08;kΩ&#xff09;、兆欧&#x…

简单实现节流函数踩的小坑

平时debounce&#xff08;防抖&#xff09;用得多&#xff0c;throttle用得少&#xff0c;记下写 throttle 时遇到的低级错误。 节流&#xff0c;一定时间内多次操作&#xff0c;在最早操作的若干延迟后执行。 场景参考&#xff1a;周期上报&#xff0c;有的数据不急着报&#…

week04day03(爬虫 beautifulsoup4、)

一. 使用bs4解析网页 下载bs4 - pip install beautifulsoup4 使用的时候 import bs4专门用于解析网页的第三方库 在使用bs4的时候往往会依赖另一个库lxml pip install lxml 网页代码 <!DOCTYPE html> <html><head><meta charset"utf-8"><…

什么是测试?测试测什么?

笔者是软件测试方向的硕士研究生。作为应届生拿下了20余个软件测试、测试开发的offer。 《校招生如何准备测试》系列会将我的测试理论体系与大家分享、探讨和学习。本期主要串联一下什么是测试、软件测试测什么&#xff08;测试类型&#xff09;。 Q&#xff1a;什么是软件测…

(十三)【Jmeter】线程(Threads(Users))之tearDown 线程组

简述 操作路径如下: 作用:在正式测试结束后执行清理操作,如关闭连接、释放资源等。配置:设置清理操作的采样器、执行顺序等参数。使用场景:确保在测试结束后应用程序恢复到正常状态,避免资源泄漏或对其他测试的影响。优点:提供清理操作,确保测试环境的整洁和可重复性…

铭瑄科技——为星闪技术发展与应用带来新推力

随着智能化生活逐渐普及&#xff0c;无线通信不仅是不仅是信息时代的重要基础设施&#xff0c;而且是推动社会向智能化发展的核心力量之一&#xff0c;其中短距无线通信更是推动未来智能化发展的关键。 为积极推动未来硬件智能化、产业智能化发展&#xff0c;铭瑄正式宣布成为星…

Codeforces Round 928 (Div. 4)

目录 A. Vlad and the Best of Five B. Vlad and Shapes C. Vlad and a Sum of Sum of Digits D. Vlad and Division E. Vlad and an Odd Ordering F. Vlad and Avoiding X G. Vlad and Trouble at MIT A. Vlad and the Best of Five 我们可以使用string中的count函数来…

《VitePress 简易速速上手小册》第8章 安全性与部署(2024 最新版)

文章目录 8.1 安全最佳实践8.1.1 基础知识点解析8.1.2 重点案例&#xff1a;个人博客8.1.3 拓展案例 1&#xff1a;在线商店8.1.4 拓展案例 2&#xff1a;企业网站 8.2 部署到 GitHub Pages 和其他平台8.2.1 基础知识点解析8.2.2 重点案例&#xff1a;个人博客部署到 GitHub Pa…

时序预测demo 代码快速实现 MLP效果比LSTM 好,简单模拟数据

【PyTorch修炼】用pytorch写一个经常用来测试时序模型的简单常规套路&#xff08;LSTM多步迭代预测&#xff09; 层数的理解&#xff1a; LSTM&#xff08;长短期记忆&#xff09;的层数指的是在神经网络中堆叠的LSTM单元的数量。层数决定了网络能够学习的复杂性和深度。每一层…

SQL- left join 与group by联合使用实例

表&#xff1a;Visits ---------------------- | Column Name | Type | ---------------------- | visit_id | int | | customer_id | int | ---------------------- visit_id 是该表中具有唯一值的列。 该表包含有关光临过购物中心的顾客的信息。表&#xff1a…

Docker容器与虚拟化技术:kylin 部署 docker容器应用

目录 一、实验 1.环境 2. kylin 部署 docker及版本升级 3.kylin 部署docker镜像加速 4.kylin 部署 nginx容器应用 5.kylin使用docker容器部署mysql实现数据持久化 6.kylin使用docker容器部署nginx实现配置文件持久化到本地 7.kylin 使⽤ docker 部署容器可视化平台porta…

【青龙】快速搭建青龙面板,部署属于你自己的应用!

青龙面板是一个支持 Python3、JavaScript、Shell、Typescript 的定时任务管理平台。 废话不多说&#xff0c;直接开始。 这里使用一台 雨云 的云服务器作为演示。雨云注册地址&#xff1a;https://www.rainyun.com/ 优惠码&#xff1a;lz932 使用优惠码注册后绑定微信可获得8折…

Spring框架@Autowired注解进行字段时,使用父类类型接收子类变量,可以注入成功吗?(@Autowired源码跟踪)

一、 前言 平常我们在使用spring框架开发项目过程中&#xff0c;会使用Autowired注解进行属性依赖注入&#xff0c;一般我们都是声明接口类型来接收接口实现变量&#xff0c;那么使用父类类型接收子类变量&#xff0c;可以注入成功吗&#xff1f;答案是肯定可以的&#xff01;…

从零学习Linux操作系统第二十七部分 shell脚本中的变量

一、什么是变量 变量的定义 定义本身 变量就是内存一片区域的地址 变量存在的意义 命令无法操作一直变化的目标 用一串固定的字符来表示不固定的目标可以解决此问题 二、变量的类型及命名规范 环境级别 export A1 在环境关闭后变量失效 退出后 关闭 用户级别&#xff…