Three.js——learn01

news/2024/10/23 5:31:06/

Three.js——learn01

  • Three.js——learn01
    • 本地搭建文档
    • 通过parcel搭建Threejs环境
      • 1.初始化
      • 2.安装parcel设置打包位置
      • 3.设置目录结构
    • QuickStart
      • 安装threejs
      • index.html
      • index.css
      • index.js
      • 启动

Three.js——learn01

本地搭建文档

登录GitHub搜索three.js

git clone https://github.com/mrdoob/three.js.git

在这里插入图片描述
官方doc地址:https://threejs.org/docs/index.html#manual/zh/introduction/Installation

使用VSCode打开
在这里插入图片描述
安装依赖

npm install

启动项目

npm run start

访问8080端口
f

然后我们任意选择我们需要看的即可
在这里插入图片描述

通过parcel搭建Threejs环境

1.初始化

npm init

2.安装parcel设置打包位置

npm install parcel-bundler --save-dev

在package.json中

  "scripts": {"dev":"parcel src/index.html","build":"parcel build src/index.html","test": "echo \"Error: no test specified\" && exit 1"},

3.设置目录结构

在这里插入图片描述

QuickStart

安装threejs

npm install three --save

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/styles/index.css" /></head><body><script src="./core/index.js" type="module"></script></body>
</html>

index.css

* {margin: 0;padding: 0;background-color: beige;
}

index.js

import * as THREE from 'three'//创建场景
const scene = new THREE.Scene()/*** 创建相机并设置相机参数* 参数:* 1. fov视野角度* 2.长宽比* 3.近端距离参数(近截面)最近能看到哪里* 4.远端距离参数(远截面)最远能看到哪里*/
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
//设置相机位置
camera.position.set(0, 0, 5)
//将相机放置到场景中
scene.add(camera)
//创建渲染器
const renderer = new THREE.WebGLRenderer()
//设置渲染器渲染大小
renderer.setSize(window.innerWidth, window.innerHeight)
//添加渲染器到页面中
document.body.appendChild(renderer.domElement)
//创建几何体对象
const geometry = new THREE.BoxGeometry(1, 1, 1)
//设置基础材质(颜色:0x00ff00)
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 })
//创建物体对象(几何体+材质)
const cube = new THREE.Mesh(geometry, material)
//添加物体到材质中
scene.add(cube)
//给物体添加动画
const an = () => {//requestAnimationFrame有很多的优点。最重要的一点或许就是当用户切换到其它的标签页时,它会暂停,因此不会浪费用户宝贵的处理器资源,也不会损耗电池的使用寿命requestAnimationFrame(an)cube.rotation.x += 0.01cube.rotation.y += 0.01//开始渲染renderer.render(scene, camera)
}
an()

启动

npm run dev

在这里插入图片描述


http://www.ppmy.cn/news/33716.html

相关文章

KubeSphere All in one安装配置手册

KubeSphere All in one安装配置手册 1. 初始化 1.1 配置apt源 # vi /etc/apt/sources.list deb https://mirrors.aliyun.com/ubuntu/ focal main restricted universe multiverse deb-src https://mirrors.aliyun.com/ubuntu/ focal main restricted universe multiversedeb…

【多线程】多线程案例

✨个人主页&#xff1a;bit me&#x1f447; ✨当前专栏&#xff1a;Java EE初阶&#x1f447; ✨每日一语&#xff1a;we can not judge the value of a moment until it becomes a memory. 目 录&#x1f35d;一. 单例模式&#x1f364;1. 饿汉模式实现&#x1f9aa;2. 懒汉模…

redhat httpd服务安装、访问浏览器及自定义访问页面

目录 1.查看本地仓库&#xff0c;如果没有配置&#xff0c;就在这目录创建一个 2.挂载 3.下载httpd服务 4.修改httpd配置文件 5.重启httpd服务 6.查看当前可用IP地址 7.随便用一个IP 看是否有东西 8.无法访问&#xff0c;原因是我们防火墙没有放行httpd服务 1.查看本地仓库&a…

Cookie和Session详解

目录 前言&#xff1a; Session详解 Cookie和Session区别和关联 服务器组织会话的方式 使用Tomcat实现登录成功跳转到欢迎页面 登录前端页面 登录成功后端服务器 重定向到欢迎页面 抓包分析交互过程 小结&#xff1a; 前言&#xff1a; Cookie之前博客有介绍过&#x…

HJ1 字符串最后一个单词的长度(JAVA)

目录 题目&#xff1a; 描述 输入描述&#xff1a; 输出描述&#xff1a; 示例1 解题思路&#xff1a; 总代码&#xff1a; 题目&#xff1a; 描述 计算字符串最后一个单词的长度&#xff0c;单词以空格隔开&#xff0c;字符串长度小于5000。&#xff08;注&#xff1a…

error: C1083: 无法打开包括文件: “QtGui/QApplication”: No such file or directory

Qt系列文章目录 文章目录Qt系列文章目录前言一、原因二、解决办法1.修改pro工程文件2.在main.cpp中三、总结前言 当我们从网上或者从打开别人的工程师&#xff0c;报错&#xff0c;C1083: 无法打开包括文件: “QtGui/QApplication”。 原因&#xff1a;Qt5里不再用QtGui模块&a…

动态规划算法

一、前言动态规划是一种常用的算法&#xff0c;在算法领域十分重要&#xff0c;但对于新手来说&#xff0c;理解起来有一定的挑战性&#xff0c;这篇博客将明确步骤来一步一步讲解动态规划到底该如何理解与运用。二、解析动态规划算法1.特点①把原来的问题分解成了【要点相同】…

vue使用split()将字符串分割数组join()将数组转字符串reverse()将数组反转

1.split() 将字符串切割成数组 const str Hello Vue2 Vue3 console.log(str.split()) console.log(str.split()) console.log(str.split( )) console.log(str.split( , 2)) console.log(str.split( , 6))输出如下 1.split()不传参数默认整个字符串作为数组的一个元素&#xf…