WEB 3D技术 简述React Hook/Class 组件中使用three.js方式

之前 已经讲过了 用vue结合three.js进行开发

那么 自然是少不了react

我们 还是先创建一个文件夹

终端执行

javascript 复制代码
npm init vite@latest

输入一下项目名称 然后技术选择 react

也不太清楚大家的基础 那就选择最简单的js

然后 我们就创建完成了

然后 我们用编辑器打开创建好的项目目录

然后 在终端执行

javascript 复制代码
npm install three

引入threeJS 因为我们肯定要用的

然后 我们执行

javascript 复制代码
npm install

重新整体引入一下项目依赖

如果node版本不合适 是会出现一点问题

可以用cnpm

然后安装好之后执行

javascript 复制代码
npm run dev

然后浏览器访问

没有任何问题

然后 我们找到src下的 App.css

加上如下代码

csharp 复制代码
*{
  margin: 0;
  padding: 0;
}
canvas {
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 108vw;
  height: 108vh;
}

然后 将App.jsx代码更改如下

typescript 复制代码
import { useEffect } from 'react'
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  //远平面  相机能看到最远的距离
    );

    //c创建一个canvas容器  并追加到 body上
    const renderer = new THREE.WebGLRenderer(0);
    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:0x08ffe });
    //创建网格
    const cube = new THREE.Mesh(geometry, material);
    //将网格添加到场景中
    scene.add(cube);
    //设置相机位置   这里 我们设置Z轴  大家可以试试  S Y 和 Z  都是可以的
    camera.position.z = 5;
    //设置相机默认看向哪里   三个 0  代表 默认看向原点
    camera.lookAt(0, 0, 0);
    //将内容渲染到元素上
    renderer.render(scene, camera);
    function animate() {
        requestAnimationFrame(animate);
        cube.rotation.x += 0.01;
        cube.rotation.y += 0.01;
        renderer.render(scene, camera);
    }
    animate();
  },[])

  return (
    <div id = "app"></div>
  )
}

export default App

这是 Hook的一种写法 先 引入three

然后直接在useEffect这个声明周期中使用显然逻辑就OK了

如果是类组件直接这样

typescript 复制代码
import { Component } from 'react'
import * as THREE from "three";
import './App.css'

class App extends Component{

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

    //创建相机
    const camera = new THREE.PerspectiveCamera(
        45, //视角 视角越大  能看到的范围就越大
        window.innerWidth / window.innerHeight,//相机的宽高比  一般和画布一样大最好
        0.1,  //近平面  相机能看到最近的距离
        1000  //远平面  相机能看到最远的距离
    );

    //c创建一个canvas容器  并追加到 body上
    const renderer = new THREE.WebGLRenderer(0);
    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:0x08ffe });
    //创建网格
    const cube = new THREE.Mesh(geometry, material);
    //将网格添加到场景中
    scene.add(cube);
    //设置相机位置   这里 我们设置Z轴  大家可以试试  S Y 和 Z  都是可以的
    camera.position.z = 5;
    //设置相机默认看向哪里   三个 0  代表 默认看向原点
    camera.lookAt(0, 0, 0);
    //将内容渲染到元素上
    renderer.render(scene, camera);
    function animate() {
        requestAnimationFrame(animate);
        cube.rotation.x += 0.01;
        cube.rotation.y += 0.01;
        renderer.render(scene, camera);
    }
    animate();
  }

  render() {
    return <div id = "app"></div>
  }
}

export default App

因为 componentDidMount 可以拿到dom节点 我们用它挂载 其实都一样

相关推荐
夏梦春蝉34 分钟前
ES6从入门到精通:模块化
前端·ecmascript·es6
拓端研究室2 小时前
视频讲解:门槛效应模型Threshold Effect分析数字金融指数与消费结构数据
前端·算法
工一木子3 小时前
URL时间戳参数深度解析:缓存破坏与前端优化的前世今生
前端·缓存
半点寒12W4 小时前
微信小程序实现路由拦截的方法
前端
某公司摸鱼前端5 小时前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
要加油哦~5 小时前
vue | 插件 | 移动文件的插件 —— move-file-cli 插件 的安装与使用
前端·javascript·vue.js
小林学习编程5 小时前
Springboot + vue + uni-app小程序web端全套家具商场
前端·vue.js·spring boot
柳鲲鹏5 小时前
WINDOWS最快布署WEB服务器:apache2
服务器·前端·windows
weixin-a153003083166 小时前
【playwright篇】教程(十七)[html元素知识]
java·前端·html
ai小鬼头7 小时前
AIStarter最新版怎么卸载AI项目?一键删除操作指南(附路径设置技巧)
前端·后端·github