从Unity到Three.js(安装启动)

发现在3D数字孪生或模拟仿真方向,越来越多的公司倾向使用Web端程序,目前一直都是使用的Unity进行的Web程序开发,但是存在不少问题,比如内存释放、shader差异化、UI控件不支持复制或输入中文等。虽然大多数问题都可以找到解决方案,但是最后也只能停在解决问题的程度,算不上是一个完美方案,因此想接触下three.js,开个系列记录下,一个0基础js的unity开发人员学习three.js的过程。
Three.js官方文档:(https://threejs.org/docs/index.html#manual/zh/introduction/Creating-a-scene)
一、环境配置,win10 64位操作系统。参考链接 https://zhuanlan.zhihu.com/p/653881053
1.安装Node.js: (https://www.nodejs.com.cn/)
win+R 输入cmd 输入node -v 确认node.js安装完成在这里插入图片描述
2.vscode安装

二、工程创建
1.新建一个存放工程的文件夹,如learning
2.将新建的工程目录文件夹拖拽到新打开的vscode中。
3.点击终端–新建终端 会发现终端直接进入了当前文件夹。在这里插入图片描述
4.创建vite项目,输入命令 npm create vite@latest
在出现的提示中,
设置项目名称,
框架默认Vanilla,
上下箭头选择javaScript在这里插入图片描述
5.安装threeJS
在左侧资源管理器项目名称文件夹上右键 选择在集成终端中打开。
输入命令 npm i vite three
这个过程等待可能会稍长一些时间。在这里插入图片描述
6.启动运行vite首页,输入 npm run dev在这里插入图片描述按住ctrl+鼠标左键,会直接在浏览器中打开,可以看到vite的主页。

三、编写第一个three.js代码,测试环境配置是否成功。
1.在左侧资源管理器中找到index.html
填入如下代码。

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><title>My first three.js app</title><style>body {margin: 0;}</style>
</head><body><script type="module" src="main.js"></script>
</body></html>

2.找到main.js文件
填入如下代码。

import * as THREE from 'three';const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
cube.position.x += 4;
scene.add(cube);const cube2 = new THREE.Mesh(geometry, material);
scene.add(cube2);camera.position.z = 5;function animate() {requestAnimationFrame(animate);cube.rotation.x += 0.01;cube.rotation.y += 0.01;renderer.render(scene, camera);
}animate();

刷新主页,可以看到两个cube,一个静态的,一个实时旋转的。

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

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

相关文章

ubuntu22.04@laptop OpenCV Get Started: 004_cropping_image

ubuntu22.04laptop OpenCV Get Started: 004_cropping_image 1. 源由2. Cropping应用Demo3 image_crop3.1 C应用Demo3.2 Python应用Demo3.3 重点过程分析3.3.1 裁剪图像3.3.2 描绘矩形 4. 总结5. 参考资料 1. 源由 使用OpenCV进行裁剪相当于对NumPy数组做类似切片的动作。 每…

通过nginx学习linux进程名的修改

目录 1. 缘起2. 背景知识3. 源码分析3.1 准备工作3.2 设置进程名字 1. 缘起 在运行nginx的时候&#xff0c;用ps查看nginx的进程信息&#xff0c;可能的输出如下&#xff1a; root 42169 3105 0 16:51 ? 00:00:00 nginx: master process ./objs/nginx root …

PyTorch中模块、类和函数的命名和调用

1. Python的命名规则和调用 在 Python 中&#xff0c;模块、类和函数的命名遵循一定的规则&#xff0c;并且有特定的调用方法。下面分别介绍&#xff1a; 命名规则&#xff1a; 模块&#xff08;Module&#xff09;&#xff1a; 模块命名应遵循 Python 的标识符命名规范&…

STM32/C51开发环境搭建(KeilV5安装)

Keil C51是美国Keil Software公司出品的51系列兼容单片机C语言软件开发系统&#xff0c;与汇编相比&#xff0c;C语言在功能上、结构性、可读性、可维护性上有明显的优势&#xff0c;因而易学易用。Keil提供了包括C编译器、宏汇编、链接器、库管理和一个功能强大的仿真调试器等…

【SpringBoot】策略和模板模式的思考与实践

一、应用场景 之所以会将策略和模板模式放在一起&#xff0c;是因为这两种模式用的最多最广泛&#xff0c;而且基本都是联合使用的。在开始之前&#xff0c;先复习一下模式的定义&#xff1a; 模板模式&#xff08;Template Pattern&#xff09; 模板模式是在一个抽象类中定…

python+flask人口普查数据的应用研究及实现django

作为一款人口普查数据的应用研究及实现&#xff0c;面向的是大多数学者&#xff0c;软件的界面设计简洁清晰&#xff0c;用户可轻松掌握使用技巧。在调查之后&#xff0c;获得用户以下需求&#xff1a; &#xff08;1&#xff09;用户注册登录后&#xff0c;可进入系统解锁更多…

C#,栅栏油漆算法(Painting Fence Algorithm)的源代码

1 刷油漆问题 给定一个有n根柱子和k种颜色的围栏&#xff0c;找出油漆围栏的方法&#xff0c;使最多两个相邻的柱子具有相同的颜色。因为答案可以是大的&#xff0c;所以返回10^97的模。 计算结果&#xff1a; 2 栅栏油漆算法的源程序 using System; namespace Legalsoft.Tr…

Jetpack Compose之进度条介绍(ProgressIndicator)

JetPack Compose系列&#xff08;12&#xff09;—进度条介绍 Compose自带进度条控件有两个&#xff0c;分别是&#xff1a;CircularProgressIndicator&#xff08;圆形进度条&#xff09;和LinearProgressIndicator&#xff08;线性进度条&#xff09;。 CircularProgressIn…

Codeforces Round 923 (Div. 3)D. Find the Different Ones! 双指针

Problem - D - Codeforces 双指针O(2n)&#xff0c;其实本场B题我写的是O(26n)&#xff0c;结果这道题不敢想哈哈。 题意就是给你一串数字&#xff0c;然后问区间(l , r)内是否有不同的数字&#xff0c;输出任意一组下标即可&#xff0c;没有就输出 -1 -1 所以我们看l 在 l1~…

<网络安全>《20 工业防火墙》

1 概念 工业防火墙是一个有软件和硬件设备组合而成、在内部网和外部网之间、专用网与公共网之间的边界上构造的保护屏障。工业防火墙是面向工业控制网络的逻辑隔离类安全防护产品&#xff0c;运用“白名单智能学习”技术建立工控网络安全通信模型&#xff0c;阻断一切非法访问…

初识C++(3)

目录 一、初始化列表&#xff1a; 1、概念&#xff1a; 2、特性&#xff1a; 二、static成员&#xff1a; 1、概念&#xff1a; 2、特性&#xff1a; 三、友元 1、概念&#xff1a; 友元函数&#xff1a; 友元类&#xff1a; 四、内部类&#xff1a; 1、概念&#…

【51单片机】实现一个动静态数码管显示项目(超全详解&代码&图示)(5)

前言 大家好吖&#xff0c;欢迎来到 YY 滴单片机 系列 &#xff0c;热烈欢迎&#xff01; 本章主要内容面向接触过单片机的老铁 主要内容含&#xff1a; 欢迎订阅 YY滴C专栏&#xff01;更多干货持续更新&#xff01;以下是传送门&#xff01; YY的《C》专栏YY的《C11》专栏YY…

贪心算法之田忌赛马,多种语言实现

目录 题目描述: 输入: 样例输入: 样例输出: c代码实现: c++代码实现: python代码实现: Java代码实现: 题目描述: 这是中国历史上一个著名的故事。 “那是大约2300年前的事了。田骥将军是齐国的高级官员。他喜欢和国王和其他人一起赛马。 “田和王都有三匹不同等级…

Redis篇之集群

一、主从复制 1.实现主从作用 单节点Redis的并发能力是有上限的&#xff0c;要进一步提高Redis的并发能力&#xff0c;就需要搭建主从集群&#xff0c;实现读写分离。主节点用来写的操作&#xff0c;从节点用来读操作&#xff0c;并且主节点发生写操作后&#xff0c;会把数据同…

vue3——登录校验

页面 首先需要在表单配置model、ref、rules&#xff0c;el-form-item中放prop <el-form :model"form" label-width"0" ref"formRef" :rules"rules"><el-form-item label"" prop"username"><el-in…

HTML元素的操作

获取HTML的值 获取文本内容 1.先获取元素的内容 2.使用innerText方法 let btn document.getElementById("btn");//获取文本内容console.log(btn.innerText);设置文本内容 btn.innerText "测试数据"; let box document.getElementById("box"…

Web后端开发:登录认证案例

登录功能 需求分析 在登录界面中&#xff0c;输入用户的用户名以及密码&#xff0c;然后点击 “登录” &#xff0c;服务端判断用户输入的用户名和密码是否都正确。如果正确&#xff0c;则返回成功结果&#xff0c;前端跳转至系统首页面&#xff1b;否则报错&#xff0c;停留在…

从零开始手写mmo游戏从框架到爆炸(十)— 集成springboot-jpa与用户表

导航&#xff1a;从零开始手写mmo游戏从框架到爆炸&#xff08;零&#xff09;—— 导航-CSDN博客 集成springboot-jpa&#xff0c;不用mybatis框架一个是方便对接不同的数据源。第二个目前规划的游戏内容可能对数据库的依赖不是很大&#xff0c;jpa应该肯定能满足要求了…

c++学习:iostream输入输出+错误流+标准日志流

C 中的输入和输出&#xff08;I/O&#xff09;主要是通过标准库中的输入输出流来实现的。最常用的是 iostream 库&#xff0c;它 提供了用于输入和输出的基本流类&#xff0c;包括 cin 、 cout 、 cerr 和 clog 头文件 #include <iostream> 标准输出流 ( cout ) cout…

Unity类银河恶魔城学习记录4-1,4-2 Attack Logic,Collider‘s collision excepetion源代码 P54 p55

Alex教程每一P的教程原代码加上我自己的理解初步理解写的注释&#xff0c;可供学习Alex教程的人参考 此代码仅为较上一P有所改变的代码【Unity教程】从0编程制作类银河恶魔城游戏_哔哩哔哩_bilibili Entity.cs using System.Collections; using System.Collections.Generic; u…