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;

显示效果如下,

相关推荐
康康的幸福生活17 小时前
webgl2 方法解析: shaderSource()
webgl
魂断蓝桥6661 天前
如何基于three.js(webgl)引擎架构,实现3D医院、3D园区导航,3D科室路径导航
webgl·数字孪生·threejs·3d定位、三维室内定位、3d建筑·three.js路径规划、三维a*算法、javascript三维导航,·3d医院·3d导航·园区导航
康康的幸福生活11 天前
webgl2 方法解析: SCISSOR_TEST
javascript·webgl
魂断蓝桥66612 天前
如何基于three.js(webgl)引擎架构,实现3D机房园区,数据中心消防系统
webgl·数字孪生·three.js·物联网3d·3d机房·、3d工厂、3d工业园区、智慧制造、智慧工业、智慧工厂·bim管理系·3d消防·消防演习模拟
康康的幸福生活14 天前
webgl2 方法解析: colorMask()
webgl
Mapmost14 天前
全新升级!3DTiles加载速度Mapmost完胜Cesium
性能优化·webgl·cesium
陶甜也14 天前
threejs 实现720°全景图,;两种方式:环境贴图、CSS3DRenderer渲染
前端·vue.js·css3·threejs
康康的幸福生活15 天前
webgl2 方法解析: texImage2D()
webgl
点量云实时渲染-小芹16 天前
UE/Unity/Webgl云渲染推流网址,如何与外部网页嵌套和交互?
unity·webgl·webgl云渲染网页交互·点量云流