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分享者1 天前
学习threejs,导入FBX格式骨骼绑定模型
threejs·骨骼动画·fbx
小彭努力中1 天前
138. CSS3DRenderer渲染HTML标签
前端·深度学习·3d·webgl·three.js
优雅永不过时·1 天前
three.js实现地球 外部扫描的着色器
前端·javascript·webgl·three.js·着色器
汪洪墩2 天前
【Mars3d】实现这个地图能靠左,不居中的样式效果
前端·javascript·vue.js·3d·webgl·cesium
gis分享者2 天前
学习threejs,对模型多个动画切换展示
threejs·动画切换
allenjiao2 天前
webgl threejs 云渲染(服务器渲染、后端渲染)解决方案
webgl·云渲染·threejs·服务器渲染·后端渲染·云流化·三维云渲染
踏实探索2 天前
OpenLayers教程12_WebGL自定义着色器:实现高级渲染效果
前端·arcgis·vue·webgl·着色器
EasyNTS4 天前
H.265流媒体播放器EasyPlayer.js网页直播/点播播放器WebGL: CONTEXT_LOST_WEBGL错误引发的原因
javascript·webgl·h.265
那年那棵树5 天前
【Cesium】自定义材质,添加带有方向的滚动路线
vue·webgl·材质
gis分享者7 天前
学习threejs,使用TWEEN插件实现动画
threejs·tween·补间动画