threejs 学习一

南风number

已于 2023-02-06 16:57:51 修改

阅读量335

点赞数 1

分类专栏： threejs js 文章标签： javascript 前端 threejs

于 2023-01-11 01:24:36 首次发布

本文链接：https://blog.csdn.net/weixin_45730243/article/details/128638395

版权

js 同时被 2 个专栏收录

55 篇文章 0 订阅

订阅专栏

threejs

7 篇文章 0 订阅

订阅专栏

文章介绍了如何创建一个基于Three.js的基本项目，包括从threejs官网或GitHub下载，使用npm安装依赖，通过parcel进行打包和启动，以及安装和引用Three.js库。最后，通过npm运行项目并生成打包后的产物。

摘要由CSDN通过智能技术生成

前提

threejs官网：https://threejs.org/
由于官网访问慢，可以github下载压缩包解压后本地启动
在这里插入图片描述
github地址：https://github.com/mrdoob/three.js/

下载好后解压安装依赖 npm install
启动：npm start
目录介绍：

一、搭建一个引入three的基础项目

1、新建一个项目文件夹01-threejs_basic

2、npm init 初始化 package.json

3、安装打包工具parcel

官网： https://www.parceljs.cn

npm install  parcel-bundler --save-dev

4、修改package.json文件启动命令

  "scripts": {
    "dev": "parcel src/index.html",
    "build": "parcel build src/index.html"
  },

4、搭建目录结构

在这里插入图片描述

style.css内容

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: skyblue;
}

index.html内容

<!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>

main.js内容

import * as THREE from 'three'

console.log(THREE, 'three')

5、安装three.js

npm install three

6、启动项目

npm run dev

在这里插入图片描述

注意 dist文件夹为打包后的产物
学习参考：https://www.three3d.cn/threejs

南风number

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
threejs 学习一

threejs基础
复制链接

扫一扫

专栏目录