微信小程序版本更新提示

前言

挺久没更新了，因为这个端午我回老家了，陪我爸妈过了一个端午，当然端午我也稍微学了一点，没有完全荒废，我看的课由于他把基础更新了一下，所以我又从即将进入项目的进度，去看了下基础，的确，那些是之前没有讲过的内容，值得学习一下，今天就给大家带来简单的项目搭建过程，本次项目搭建均基于vite脚手架。

使用vue搭建项目

项目搭建

兼容性注意

Vite 需要 Node.js 版本 14.18+，16+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。

随便找个文件夹打开命令行

npm create vite@latest my-vue-app --template vue

选择vue版本

选择js版本

这样，我们一个项目框架就好了，接下来使用vscode打开项目，安装three和其他依赖

安装依赖

安装其他依赖

npm i

安装three

npm install three

修改代码启动项目

这里我们只修改App.vue文件

替换原先template部分

<template>
  <div></div>
</template>

替换原先css部分

<style>
* {
  margin: 0;
  padding: 0;
}

canvas {
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
}
</style>

替换原先js部分

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

// 创建场景
const scene = new THREE.Scene();

// 创建相机
const camera = new THREE.PerspectiveCamera(
  45, // 视角
  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(1, 1, 1);
// 创建材质
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
// 创建网格
const cube = new THREE.Mesh(geometry, material);

// 将网格添加到场景中
scene.add(cube);

// 设置相机位置
camera.position.z = 5;
camera.lookAt(0, 0, 0);

// 渲染函数
function animate() {
  requestAnimationFrame(animate);
  // 旋转
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  // 渲染
  renderer.render(scene, camera);
}
animate();
</script>

启动项目

npm run dev

使用react搭建项目

同样道理，我们使用react搭建项目

项目搭建

选择react和js版本即可

安装依赖和vue是一样的，接下来，我们修改react的代码来启动我们的three项目

修改代码启动项目

修改index.css内容

*{
  margin: 0;
  padding: 0;
}

canvas{
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
}

修改App.jsx内容

函数式组件

import { useState,useEffect} from 'react'
// 导入threejs
import * as THREE from "three";
import './App.css'
function App() {
  useEffect(() => {
    // 创建场景
    const scene = new THREE.Scene();

    // 创建相机
    const camera = new THREE.PerspectiveCamera(
        45, // 视角
        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(1, 1, 1);
    // 创建材质
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    // 创建网格
    const cube = new THREE.Mesh(geometry, material);

    // 将网格添加到场景中
    scene.add(cube);

    // 设置相机位置
    camera.position.z = 5;
    camera.lookAt(0, 0, 0);

    // 渲染函数
    function animate() {
        requestAnimationFrame(animate);
        // 旋转
        cube.rotation.x += 0.01;
        cube.rotation.y += 0.01;
        // 渲染
        renderer.render(scene, camera);
    }
    animate();
  }, [])

  return (
    <>
      <div className="App"></div>
    </>
  )
}

export default App

类组件

import { Component} from 'react'
class App extends Component {
  render() {
    return <div></div>
  }
  componentDidMount() {
    // 创建场景
    const scene = new THREE.Scene()

    // 创建相机
    const camera = new THREE.PerspectiveCamera(
      45, // 视角
      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(1, 1, 1)
    // 创建材质
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 })
    // 创建网格
    const cube = new THREE.Mesh(geometry, material)

    // 将网格添加到场景中
    scene.add(cube)

    // 设置相机位置
    camera.position.z = 5
    camera.lookAt(0, 0, 0)

    // 渲染函数
    function animate() {
      requestAnimationFrame(animate)
      // 旋转
      cube.rotation.x += 0.01
      cube.rotation.y += 0.01
      // 渲染
      renderer.render(scene, camera)
    }
    animate()
  }
}

export default App

ok，这篇环境搭建的文章就介绍到这里了，敬请期待下一篇文章