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;

显示效果如下,

相关推荐
七月的冰红茶1 天前
【threejs】第一人称视角之八叉树碰撞检测
前端·threejs
爱看书的小沐1 天前
【小沐杂货铺】基于Three.JS绘制汽车展示Car(WebGL、vue、react、autoshow、提供全部源代码)
汽车·vue3·react·webgl·three.js·opengl·autoshow
zhu_zhu_xia2 天前
cesium添加原生MVT矢量瓦片方案
javascript·arcgis·webgl·cesium
charlee442 天前
WebGL简易教程——结语
教程·webgl·三维可视化·前端开发·计算机图形学
心前阳光3 天前
Unity WebGL文本输入
unity·游戏引擎·webgl
三月的一天3 天前
React Three Fiber 实现 3D 模型点击高亮交互的核心技巧
3d·webgl·threejs·reactthreefiber
康康的幸福生活3 天前
webgl2 方法解析: bufferSubData()
webgl
千鼎数字孪生-可视化3 天前
Web技术栈重塑HMI开发:HTML5+WebGL的轻量化实践路径
前端·html5·webgl
gis分享者4 天前
学习threejs,使用自定义GLSL 着色器,生成漂流的3D能量球
3d·threejs·着色器·glsl·shadermaterial·能量球
Data_Adventure5 天前
推荐几款开源 Canvas 和 WebGL 图形库
前端·webgl·canvas