2、threejs官网本地化部署启动和Parcel热加载:Web应用打包工具介绍及使用

news2024/11/25 4:43:08

一、Three.js 官网

背景:

threejs 是国外的网站,访问有时候比较卡,所以建议本地化部署启动一下,方便随时访问学习。

部署方案:

1、访问Threejs官网

2、点击github 选择 dev版本下载

3、下载完之后,解压。用Visual studio Code打开。

 4、Visual Studio Code 运行终端 terminal ,先安装Npm ,然后 查看package.json 查看启动命令。

//安装npm 
npm install
//启动
npm run dev

5、启动成功,访问localhost:8080 

 docs 是文档解释(中英文)

examples 案例,可以根据路径查找html代码查看实现方案。

editor  编辑器,可以创建物体并进行查看和编辑

二、 Parcel介绍:

Parcel - Web 应用打包工具 | Parcel 中文网

实战:

1、新建项目:在终端中打开:npm init 生成 package.json  文件

PS E:\study\WebGLThree\代码\01-THREE_BASIC> npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (01-three_basic)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to E:\study\WebGLThree\代码\01-THREE_BASIC\package.json:

{
  "name": "01-three_basic",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this OK? (yes)
PS E:\study\WebGLThree\代码\01-THREE_BASIC> 

package name: (01-three_basic)      项目名称
version: (1.0.0)    版本
description:         描述
entry point: (index.js)             
test command:      
git repository:
keywords:
author:   作者

2、安装Parcel依赖

npm install parcel-bundler

 3、配置package.json配置文件

//通过修改你的package.json来添加这些任务脚本

{
  "scripts": {
    "dev": "parcel <your entry file>",
    "build": "parcel build <your entry file>"
  }
}

三、项目框架搭建

话不多说,上代码

安装Three依赖

npm install three --save

1、首页展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./assets/css/style.css"> 
</head>
<body>
    <script src="./main/main.js" type="module"></script>
</body>
</html>

2、主要js创建生成物体过程

import * as THREE from "three";

//console.log(THREE);
//1、创建场景
const scene = new THREE.Scene();

//2、创建相机
const camere = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000);//透视相机(角度,屏幕宽高比、近端、远端)
//3、设置相机位置(x,y,z)
camere.position.set(0,0,10);
//4、将相机添加到场景当中
scene.add(camere);

//5、添加物体
//创建几何体
const cubeGeometry = new THREE.BoxGeometry();
const cubeMaterial = new THREE.MeshBasicMaterial({color: 0xfff00});

//6、根据几何体和材质 创建物体
const cube = new THREE.Mesh(cubeGeometry,cubeMaterial);
//将几何体添加到场景当中
scene.add(cube);


//7、初始化渲染器
const renderer = new THREE.WebGLRenderer();
//8、设置渲染的尺寸大小
renderer.setSize(window.innerWidth,window.innerHeight);
//console.log(renderer);
//9、将webgl渲染的Canvas内容添加到body
document.body.appendChild(renderer.domElement);

//10、使用渲染器,通过相机将场景渲染进来
renderer.render(scene,camere);




3、样式控制

#取消全局边距
* {
    margin: 0;
    padding: 0;
}
#设置body的颜色天空蓝
body {
    background-color: skyblue;
}

4、package.json 设置

{
  "name": "01-three_basic",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "parcel src/index.html",
    "build": "parcel build src/index.html"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "parcel-bundler": "^1.12.5"
  },
  "dependencies": {
    "three": "^0.148.0"
  }
}

5、效果展示

6、框架目录

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

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

相关文章

Java中的this关键字

介绍 this关键字用于引用当前实例&#xff0c;在Java语言中&#xff0c;当创建一个对象后&#xff0c;Java虚拟机就会为其分配一个指向对象本身的指针&#xff0c;这个指针就是“this”。 Java关键字this只能用于方法方法体内&#xff0c;在类中的非静态方法中使用&#xff0…

14 Java集合(集合框架+泛型+ArrayList类+LinkedList类+Vector类+HashSet类等)

本篇主要是集合框架基础和List集合&#xff0c;Map集合等等后续更 集合14.1 集合框架14.1.1 概念14.1.2 集合架构14.2 Collection接口14.2.1 常用方法14.3 迭代器14.3.1 迭代器原理14.3.2 迭代器使用常见问题14.4 泛型基本使用14.5 ArrayList类14.5.1 常用方法14.5.2 实现原理1…

【手写 Vue2.x 源码】第三十三篇 - diff算法-收尾+阶段性总结

一&#xff0c;前言 上篇&#xff0c;diff算法-乱序比对&#xff0c;主要涉及以下几个点&#xff1a; 介绍了乱序比对的方案介绍了乱序比对的过程分析实现了乱序比对的代码逻辑 本篇&#xff0c;diff 算法的阶段性梳理 二&#xff0c;初渲染与视图更新流程 Vue 初渲染时&…

注册商标需要哪些材料和条件?

申请注册商标条件是什么1、申请人必须是申请认定商标的所有人&#xff0c;是在当省区域内的自然人、法人和其他组织;2、该商标自核准注册之起连续使用满三年并继续有效&#xff0c;且无权属争议;3、该商标为相关公众所熟知&#xff0c;在相关市场内具有较高的知名度;4、该商标核…

亚信科技AntDB数据库荣获2022年度技术卓越奖

近日&#xff0c;业界知名IT垂直媒体IT168发布了“2022技术卓越奖”主题奖项&#xff0c;亚信科技AntDB数据库荣获技术卓越奖。 2022 “技术卓越奖”由行业CIO/CTO大咖、技术专家及IT媒体三方联合评选&#xff0c;评判标准代表了用户和媒体声音。经过多方评审&#xff0c;亚信科…

jvm参数简介

Xmx3550m&#xff1a;设置JVM最大堆内存为3550M。 -Xms3550m&#xff1a;设置JVM初始堆内存为3550M。此值可以设置与-Xmx相同&#xff0c;以避免每次垃圾回收完成后JVM重新分配内存。 -Xss128k&#xff1a;设置每个线程的栈大小。JDK5.0以后每个线程栈大小为1M&#xff0c;之…

【SCL】1200应用案例:交通灯模拟自动装料控制

使用博图SCL语言来编写 交通灯模拟控制 和 自动装料应用案例 文章目录 目录 前言 一、应用&#xff1a;交通灯模拟控制 1.控制要求 2.I\o分配和接线 3.程序编写和效果 4.小结 二、自动装料模拟控制 1.控制要求 2.I/O分配 3.程序编写 4.小结 总结 前言 本篇文章我们继续学习西…

宏任务和微任务

宏任务和微任务1. 什么是宏任务和微任务2. 宏任务和微任务的执行顺序3. 去银行办业务的场景4. 分析以下代码输出的顺序5. 经典面试题1. 什么是宏任务和微任务 JavaScript 把异步任务又做了进一步的划分&#xff0c;异步任务又分为两类&#xff0c;分别是&#xff1a; ① 宏任…

寄存器、RAM、ROM、Flash

单片机寄存器简述 寄存器详细请点这里 1、单片机寄存器就是单片机片内存储器&#xff08;片内RAM)一部分&#xff0c;每一个都有地址。只不过这几个寄存器有特殊的作用&#xff0c;比如指令&#xff1a;MUL AB,这条指令用到两个寄存器A,B进行乘法&#xff0c;结果存到BA里面&a…

kaggle竞赛 | Quora Insincere Question | 文本情感分析

目录赛题背景赛题评价指标数据集分析pytorch建模之前发布了一遍实战类的情感分析的文章&#xff0c;包括微博爬虫&#xff0c;数据分析&#xff0c;相关模型。 可以参考&#xff1a; https://blog.csdn.net/lijiamingccc/article/details/126963413 比赛链接&#xff1a; http…

Spring Boot学习篇(十二)

Spring Boot学习篇(十二) shiro安全框架使用篇(四) 2 在主页显示用户登录状态、用户信息和完成默认注销(不改shiro原来的配置)操作 2.1 变更SysUserController类 2.1.1 在SysUserController类中注入sysUserMapper Autowired SysUserMapper sysUserMapper;2.1.2 在SysUserC…

1598_AURIX_TC275_GPIO功能以及部分寄存器梳理1

全部学习汇总&#xff1a; GreyZhang/g_TC275: happy hacking for TC275! (github.com) 接下来&#xff0c;看一下GPIO的寄存器以及部分相关的功能。这部分将会是接下来这个章节剩余的全部&#xff0c;可能内容偏雷同&#xff0c;因此都是跳跃式看。但是中间需要临时关注一下的…

【2022年MathorCup大数据竞赛】B题:北京移动用户体验影响因素研究(二)(问题一的分析和结果)

目录&#xff1a;题目解析一、问题的解答框架二、问题一的分析2.1 附件1的处理流程2.2 附件2的处理流程2.2.1 拉格朗日插补法2.3 数据编码2.4 相关分析2.5 基于互信息GBDT的特征提取2.6 量化分析一、问题的解答框架 二、问题一的分析 针对问题一&#xff0c;首先需要对附件1和…

《MySQL高级篇》十二、MySQL事务日志

文章目录1. redo日志1.1 为什么需要REDO日志1.2 REDO日志的好处、特点1. 好处2. 特点1.3 redo的组成1.4 redo的整体流程1.5 redo log的刷盘策略1.6 不同刷盘策略演示1. 刷盘策略分析2. 举例1.7 写入redo log buffer 过程1. 补充概念:Mini-Transaction2. redo 日志写入log buffe…

「链表」数据结构简析

前言 前言&#xff1a;研究一个数据结构的时候&#xff0c;首先讲的是增删改查。 文章目录前言一、链表简介1. 含义2. 节点组成3. 存储方式1&#xff09;数据在内存中的存储方式2&#xff09;单链表在内存中的存储方式2&#xff09;双链表在内存中的存储方式2&#xff09;循环链…

程序地址空间

目录 1. 验证程序地址空间布局图 2. 虚拟地址空间 什么是虚拟地址空间 3. 进程地址空间 4. 为什么要有虚拟地址空间 1. 有效保护物理内存 2. 使内存管理模块和进程管理模块实现解耦合 3. 将内存分布有序化 1. 验证程序地址空间布局图 下面我们写段代码验证一下上图中…

qt调用matlab生成的dll库

最近由于在项目中要用到matlab的算法&#xff0c;而用C转换matlab算法非常麻烦&#xff0c;所以采用qtmatlab混合编程的方法&#xff0c;在使用中遇到了些许问题&#xff0c;特记录如下。 一、生成matlab库 1、首先需要下载matlab完整版&#xff0c;之前在网上下载的简版&…

基于C#制作一个休息提醒闹钟

> 此文主要通过WinForm来制作一个休息提醒闹钟&#xff0c;通过设置时间间隔进行提醒&#xff0c;避免沉浸式的投入到工作或者学习当中&#xff0c;战斗的同时也要照顾好自己。 实现流程1.1、创建项目1.2、时间间隔配置页1.3、闹钟提醒页1.4、开机自启动配置1.5、日志记录1.…

一个数据库文档生成神器

Gitee项目地址&#xff0c;可以直接去开源项目查看&#xff08;推荐&#xff09; 简介 在企业级开发中、我们经常会有编写数据库表结构文档的时间付出&#xff0c;从业以来&#xff0c;待过几家企业&#xff0c;关于数据库表结构文档状态&#xff1a;要么没有、要么有、但都是…

MySql 5.7.40备份到腾讯云cos+从cos恢复

1 备份 1.1 安装coscli # wget https://github.com/tencentyun/coscli/releases/download/v0.12.0-beta/coscli-linux # mv coscli-linux /usr/bin/coscli # chmod 755 /usr/bin/coscli # coscli --version如果github慢可以使用国内镜像&#xff1a; wget https://cosbrowse…