1、认识three.js与开发环境搭建

最新推荐文章于 2024-04-28 22:56:14 发布

深衫老霖

最新推荐文章于 2024-04-28 22:56:14 发布

阅读量453

点赞数

分类专栏： three.js学习文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_46411555/article/details/128680491

版权

three.js学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1、认识three.js与开发环境搭建

- 使用parcel搭建three.js开发环境
- 使用three.js渲染第一个场景和物体

目前在学习three.js，边学习边总结一下以防不时之需
前期准备：下载有node.js，本文使用版本 v14.21.2

使用parcel搭建three.js开发环境

新建一个项目文件夹，在vscode中打开，在终端中输入 npm init 进行初始化操作，生成package.json文件
在终端中输入 npm install parcel-bundler 安装parcel相关依赖
安装结束后，package.json中会自动添加相关依赖。在项目中新建src文件夹，在src文件夹中新建index.html文件。打开package.json文件，修改scripts一栏如下：

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

在src文件夹中新建assets文件夹，该文件夹用来存放静态资源。在其中新建css和imgs两个文件夹，分别用来存放用到的css样式和imgs样式；在css文件夹中新建一个style.css文件，用来简单定义一下全局的css样式，内容如下：

*{
 margin: 0;
 padding: 0;
}
body{
    background-color: aquamarine;
}

在src中新建main文件夹，该文件夹用来存放用到的js文件，新建main.js。将css及js引入到index.html中，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)

输入 npm run dev 运行开发环境，查看页面是否出现指定的背景色。通过F12打开控制台查看能否打印出THREE的内容

使用three.js渲染第一个场景和物体

main.js中写入以下内容搭建three.js渲染物体的整体框架

import * as THREE from "three";

// 1. 创建一个场景
const scene = new THREE.Scene()

// 2. 创建透视相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000)

// 设置相机位置
camera.position.set(0, 0, 10)
scene.add(camera)

// 添加物体
// 创建几何体
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1)
const cubeMaterial = new THREE.MeshBasicMaterial({color: 0xfff00})
// 根据几何体和材质创建物体
const cube =new THREE.Mesh(cubeGeometry, cubeMaterial)

// 将几何体添加到场景中
scene.add(cube)

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

// 使用渲染器，通过相机将场景渲染出来
renderer.render(scene, camera)