【three.js】手把手带你理解制作一个3D场景 超级详细

我们主要目的是制作这样一个三维模型:

我们直接上代码,从代码中一点点解释模型是如何一步一步制作的。

// 引入three.js
import * as THREE from 'three';
/*** 创建3D场景对象Scene*/
const scene = new THREE.Scene();/*** 创建网格模型*/
//创建一个长方体几何对象Geometry
const geometry = new THREE.BoxGeometry(50, 50, 50);
//材质对象Material
const material = new THREE.MeshBasicMaterial({color: 0x00ffff, //设置材质颜色transparent:true,//开启透明opacity:0.5,//设置透明度
});
const mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
//设置网格模型在三维空间中的位置坐标,默认是坐标原点
// mesh.position.set(0,10,0);
scene.add(mesh); //网格模型添加到场景中// AxesHelper:辅助观察的坐标系
const axesHelper = new THREE.AxesHelper(100);
scene.add(axesHelper);// width和height用来设置Three.js输出的Canvas画布尺寸(像素px)
const width = 800; //宽度
const height = 500; //高度
/*** 透视

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

在Windows系统上安装Docker和SteamCMD容器的详细指南有哪些?

在Windows系统上安装Docker和SteamCMD容器的详细指南有哪些? 安装Docker: 首先,需要在Windows操作系统上激活WSL2功能。这是因为Docker作为一个容器工具,依赖于已存在并运行的Linux内核环境。可以通过使用winget来安装Docker。具体…

用HTML5的<canvas>元素实现刮刮乐游戏

用HTML5的&#xff1c;canvas&#xff1e;元素实现刮刮乐游戏 用HTML5的<canvas>元素实现刮刮乐&#xff0c;要求&#xff1a;将上面的“图层”的图像可用鼠标刮去&#xff0c;露出下面的“图层”的图像。 示例从简单到复杂。 简单示例 准备两张图像&#xff0c;我这…

浮点数的比较以及abs和fabs的区别

『踩坑记录』浮点数的比较以及abs和fabs的区别 Chapter1 『踩坑记录』浮点数的比较以及abs和fabs的区别abs函数与fabs函数的区别相同点&#xff1a;不同点&#xff1a; Chapter2 浮点数为什么不能用 进行比较浮点数比较方法判定相等拓展&#xff1a; Chapter1 『踩坑记录』浮点…

FreeRtos Queue(四)

本篇主要分析xQueueReceive&#xff0c;从队列中读取消息&#xff0c;读消息也是在死循环里操作的&#xff0c;大致分为两个逻辑&#xff1a; 1、队列不为空的时候的处理 2、队列为空的时候的处理 一、队列不为空 先分析下从队列中读取消息这个函数 prvCopyDataFromQueue 队…

Java进阶-IO(1)

进入java IO部分的学习&#xff0c;首先学习IO基础&#xff0c;内容如下。需要了解流的概念、分类还有其他一些如集合与文件的转换&#xff0c;字符编码问题等&#xff0c;这次先学到字节流的读写数据&#xff0c;剩余下次学完。 一、IO基础 1、背景 1.1 数据存储问题 变量…

Linux 学习笔记(8)

八、 启动引导 1 、 Linux 的启动流程 1) BIOS 自检 2) 启动 GRUB/LILO 3) 运行 Linux kernel 并检测硬件 4) 挂载根文件系统 5) 运行 Linux 系统的第一个进程 init( 其 PID 永远为 1 &#xff0c;是所有其它进程的父进程 ) 6) init 读取系统引导配置文件…

WSL2外部网络设置

1 关闭所有WSL系统 wsl --shutdown 2 打开Hyper-V管理器 3 将“虚拟交换机管理器”-> ”WSL连接类型“设置为“外部网络” 4 启动WSL系统&#xff0c;手动修改WSL网络 将WSL网络IP修改为192.168.1.9 sudo ip addr del $(ip addr show eth0 | grep inet\b | awk {print $2} |…

LeetCode:2368. 受限条件下可到达节点的数目(dfs Java)

目录 2368. 受限条件下可到达节点的数目 题目描述&#xff1a; 实现代码与解析&#xff1a; DFS 原理思路&#xff1a; 2368. 受限条件下可到达节点的数目 题目描述&#xff1a; 现有一棵由 n 个节点组成的无向树&#xff0c;节点编号从 0 到 n - 1 &#xff0c;共有 n - …

以太网模块问题及优化

在使用以太网发送摄像头数据到PC端时&#xff0c;发现了之前编写以太网发送模块的两个小问题&#xff0c;对实际使用有一定的影响&#xff0c;本文将问题指出来并进行修正。 问题一&#xff1a;为了方便设计&#xff0c;工程直接把以太网发送模块的忙闲指示信号输出作为用户端口…

Mysql与StarRocks语法上的不同

&#x1f413; 序言 StarRocks 是新一代极速全场景 MPP (Massively Parallel Processing) 数据库。StarRocks 的愿景是能够让用户的数据分析变得更加简单和敏捷。用户无需经过复杂的预处理&#xff0c;可以用StarRocks 来支持多种数据分析场景的极速分析。 &#x1f413; 语法…

Rust学习笔记:深度解析内存管理(二)

在这个信息爆炸的时代&#xff0c;学习一门新的编程语言不仅仅是为了找到一份好工作&#xff0c;更是为了打开思维的新窗口。Rust&#xff0c;作为一门注重安全、速度和并发的系统编程语言&#xff0c;正吸引着越来越多的年轻开发者的目光。今天&#xff0c;我们将一起深入探讨…

IDEA开发环境热部署

开发环境热部署 在实际的项目开发调试过程中会频繁地修改后台类文件&#xff0c;导致需要重新编译重新启动&#xff0c;整个过程非常麻烦&#xff0c;影响开发效率。Spring Boot提供了spring-boot-devtools组件&#xff0c;使得无须手动重启SpringBoot应用即可重新编译、启动项…