ThreeJS:项目搭建

介绍如何基于Vite、Vue、React构建ThreeJS项目。

Vite项目

  1. 初始化项目,命令:++npm init vite@latest++,
  1. 安装依赖,命令:++npm install++,
  1. 启动项目,命令:++npm run dev++。
  1. 样式初始化,修改style.css全局样式文件,
css 复制代码
*,
body,
html {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

canvas {
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
}
  1. 修改main.js文件,
javascript 复制代码
import './style.css'
  1. 安装ThreeJS依赖,命令:++npm install --save three++,
  1. 创建三维场景,main.js代码如下,
javascript 复制代码
import * as THREE from "three";

//TODO:打印版本
console.warn("threejs版本:", THREE.REVISION);

//TODO:创建场景
const scene = new THREE.Scene();
//TODO:创建透视相机
const camera = new THREE.PerspectiveCamera(
  45, //视角
  window.innerWidth / window.innerHeight,
  0.1, //近平面
  1000.0 //远平面
);

//TODO:创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

//TODO:创建几何体
const geometry = new THREE.BoxGeometry(1, 1, 1);
//TODO:创建材质
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
//TODO:创建网格
const mesh = new THREE.Mesh(geometry, material);

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

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

//TODO:渲染函数
function animate() {
  requestAnimationFrame(animate);
  //TODO:旋转立方体
  mesh.rotation.x += 0.01;
  mesh.rotation.y += 0.01;
  //TODO:渲染
  renderer.render(scene, camera);
}
window.onresize = function () {
  renderer.setSize(window.innerWidth, window.innerHeight);
};

animate();

渲染结果如下,

Vue项目

  1. 创建Vue项目,命令:++npm init vite@latest++,
  1. 安装依赖,命令:++npm install++,
  1. 启动项目,命令:++npm run dev++。
  1. 安装ThreeJS依赖,命令:++npm install --save three++,

  2. 初始化三维场景,改造App.vue组件,

---直接将Vite项目中main.js文件中的内容拷贝到script标签对之中即可。

javascript 复制代码
<script setup>
import HelloWorld from './components/HelloWorld.vue'

import * as THREE from "three";

//TODO:打印版本
console.warn("threejs版本:", THREE.REVISION);

//TODO:创建场景
const scene = new THREE.Scene();
//TODO:创建透视相机
const camera = new THREE.PerspectiveCamera(
  45, //视角
  window.innerWidth / window.innerHeight,
  0.1, //近平面
  1000.0 //远平面
);

//TODO:创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

//TODO:创建几何体
const geometry = new THREE.BoxGeometry(1, 1, 1);
//TODO:创建材质
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
//TODO:创建网格
const mesh = new THREE.Mesh(geometry, material);

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

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

//TODO:渲染函数
function animate() {
  requestAnimationFrame(animate);
  //TODO:旋转立方体
  mesh.rotation.x += 0.01;
  mesh.rotation.y += 0.01;
  //TODO:渲染
  renderer.render(scene, camera);
}
window.onresize = function () {
  renderer.setSize(window.innerWidth, window.innerHeight);
};

animate();

</script>

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

<style>
*,
body,
html {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

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

渲染结果如下,

React项目

  1. 创建React项目,命令:++npm init vite@latest++,
  1. 安装依赖,命令:++npm install++,

  2. 安装ThreeJS依赖,命令:++npm install --save three++,

  1. 启动项目,命令:++npm run dev++,
  1. 创建三维场景,改造App.jsx组件,

---直接将Vite项目中main.js文件中的内容拷贝到useEffect中即可。

javascript 复制代码
import { useEffect } from "react";
import * as THREE from "three";
import "./App.css";

function App() {
  useEffect(() => {
    //TODO:打印版本
    console.warn("threejs版本:", THREE.REVISION);

    //TODO:创建场景
    const scene = new THREE.Scene();
    //TODO:创建透视相机
    const camera = new THREE.PerspectiveCamera(
      45, //视角
      window.innerWidth / window.innerHeight,
      0.1, //近平面
      1000.0 //远平面
    );

    //TODO:创建渲染器
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    //TODO:创建几何体
    const geometry = new THREE.BoxGeometry(1, 1, 1);
    //TODO:创建材质
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    //TODO:创建网格
    const mesh = new THREE.Mesh(geometry, material);

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

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

    //TODO:渲染函数
    function animate() {
      requestAnimationFrame(animate);
      //TODO:旋转立方体
      mesh.rotation.x += 0.01;
      mesh.rotation.y += 0.01;
      //TODO:渲染
      renderer.render(scene, camera);
    }
    window.onresize = function () {
      renderer.setSize(window.innerWidth, window.innerHeight);
    };
    animate();
  }, []);

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

export default App;

显示效果如下,

相关推荐
gis分享者11 小时前
学习threejs,使用第一视角控制器FirstPersonControls控制相机
threejs·第一人称视角
gis分享者1 天前
学习threejs,使用导入的模型生成粒子
threejs·模型粒子化
皮皮陶2 天前
Unity WebGL交互通信
unity·交互·webgl
鸢_5 天前
【Threejs】相机控制器动画
javascript·实时互动·动画·webgl
_oP_i7 天前
Unity Addressables 系统处理 WebGL 打包本地资源的一种高效方式
unity·游戏引擎·webgl
新中地GIS开发老师7 天前
WebGIS和WebGL的基本概念介绍和差异对比
学习·arcgis·webgl
gis分享者8 天前
学习threejs,将多个网格合并成一个网格
threejs·网格合并
_oP_i8 天前
Unity 中使用 WebGL 构建并运行时使用的图片必须使用web服务器上的
前端·unity·webgl
优雅永不过时·9 天前
three.js 实现 css2d css3d效果 将 二维Dom 和 三维场景结合
前端·javascript·css3·threejs·three
优雅永不过时·10 天前
使用three.js 实现 自定义绘制平面的效果
前端·javascript·平面·github·threejs·着色器