【Threejs】从零开始（一）--创建threejs应用

一、基本创建

1.创建vite项目

npm init vite@latest

选择第一个不使用框架

2.安装依赖

npm i

3.安装threejs

npm i three

4.基本配置

（1）创建场景

创建场景之前先在style.css文件中设置画布样式，即canvas。最终效果会渲染到上面。

*{
  margin: 0;
  padding: 0
}
canvas{
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}

main.js

import * as THREE from 'three'  // 导入threejs

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)  // 将渲染器添加到页面中

（2）创建立方体

const geometry = new THREE.BoxGeometry()  // 创建几何体
const material = new THREE.MeshBasicMaterial({color: 0x00ff00})  // 创建材质
const cube = new THREE.Mesh(geometry, material)  // 创建网格
scene.add(cube)  // 将网格添加到场景中

camera.position.z = 5  // 设置相机位置

（3）设置动画

function animate() {
  requestAnimationFrame(animate)  // 请求下一帧

  cube.rotation.x += 0.01  // 旋转网格
  cube.rotation.y += 0.01  // 旋转网格

  renderer.render(scene, camera)  // 渲染场景和相机
}
animate()  // 开始动画

最终我们得到一个不断旋转的立方体

二、基于vue创建

1.创建vite项目

npm init vite@latest

选择第二个vue框架

 2.安装依赖

npm i

3.安装threejs

npm i three

2.创建场景

app.vue

<script setup>
import * as THREE from 'three'  // 导入threejs

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()  // 创建几何体
const material = new THREE.MeshBasicMaterial({color: 0x00ff00})  // 创建材质
const cube = new THREE.Mesh(geometry, material)  // 创建网格
scene.add(cube)  // 将网格添加到场景中

camera.position.z = 5  // 设置相机位置
camera.lookAt(cube.position)  // 设置相机看向网格

function animate() {
  requestAnimationFrame(animate)  // 请求下一帧

  cube.rotation.x += 0.01  // 旋转网格
  cube.rotation.y += 0.01  // 旋转网格

  renderer.render(scene, camera)  // 渲染场景和相机
}
animate()  // 开始动画
</script>

<template>
</template>

<style scoped>
*{
  margin: 0;
  padding: 0
}
canvas{
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%
}
</style>

完成