three.js（二）

news/2024/7/10 2:10:06 标签: javascript, 全栈开发, cpp, Vue, React, three.js

three.js（二）

  • 参考
  • 前言
  • 正文
    • 简单开始(不使用任何框架)
      • 补充
    • 粗略带过(使用Vue框架)
    • 细致讲解(比如我使用react框架)
          • App.jsx 的进阶版
  • 项目打包
  • 补充
    • 打包遇到的问题:
    • 原因:
    • 解决办法:

参考

https://threejs.org/docs/

前言

上一集中,我们用到了three.js的一个cdn的方法可以快速搭建一个前端页面，
现在我们尝试使用react框架来打包一下前端页面,然后在运行到我们已经搭建好的cpp-httplib框架搭建的后端服务器.

正文

简单开始(不使用任何框架)

npm init vite@latest
然后一路回车

cd vite-project
npm install
npm run dev

然后你就搭建成功了!

ctrl + c停掉
然后
(base) root@racknerd-cecdb9:~/myspace/three/noFrame-three-app/vite-project# npm install three

#假如你就想下0.153的版本,你可以直接npm install three@0.153

然后你就可以使用
https://threejs.org/docs/#manual/zh/introduction/Creating-a-scene
的例子了
(稍作部分修改)

在这里插入图片描述

  • index.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>My first three.js app</title>
		<style>
			body { margin: 0; }
		</style>
	</head>
	<body>
		<script type="module" src="src/main.js"></script>
	</body>
</html>
  • main.js
import * as THREE from 'three';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
//创建渲染器
const renderer = new THREE.WebGLRenderer();
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: 0x00ff00 } );
//创建网格=几何体+材质
const cube = new THREE.Mesh( geometry, material );
//将网格添加到场景
scene.add( cube );

//正对着我们的是z轴
camera.position.z = 5;
//默认看向原点
camera.lookAt(0,0,0);

function animate() {
	//播放下一帧,继续调用animate函数
	requestAnimationFrame( animate );
	//旋转
	cube.rotation.x += 0.01;
	cube.rotation.y += 0.01;
	//渲染
	renderer.render( scene, camera );
}
//调用函数
animate();

然后就直接诶直接可以npm run dev

补充

canvas:画布

Vue_93">粗略带过(使用Vue框架)

npm init vite@latest
然后不要一路回车了!!!!

你可以在这里选择相关的前端框架,你可以看到非常的多,在这里我们选择Vue框架
在这里插入图片描述

# 我们选择Vue+JavaScript
✔ Project name: … vite-project
✔ Select a framework: › Vue
✔ Select a variant: › JavaScript

cd vite-project
npm install
npm run dev

然后你就搭建成功了!

ctrl + c停掉
然后
(base) root@racknerd-cecdb9:~/myspace/three/noFrame-three-app/vite-project# npm install three
  • 你只需要修改Vue.app,然后npm run dev就欧克了
<script setup>
import * as THREE from 'three';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
//创建渲染器
const renderer = new THREE.WebGLRenderer();
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: 0x00ff00 });
//创建网格=几何体+材质
const cube = new THREE.Mesh(geometry, material);
//将网格添加到场景
scene.add(cube);

//正对着我们的是z轴
camera.position.z = 5;
//默认看向原点
camera.lookAt(0, 0, 0);

function animate() {
  //播放下一帧,继续调用animate函数
  requestAnimationFrame(animate);
  //旋转
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  //渲染
  renderer.render(scene, camera);
}
//调用函数
animate();
</script>

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

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}

.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}

.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>

细致讲解(比如我使用react框架)

npm init vite@latest
然后不要一路回车了!!!!

你可以在这里选择相关的前端框架,你可以看到非常的多,在这里我们选择React框架
选择结果:

    Vanilla
✔ Select a framework: › React
✔ Select a variant: › JavaScript

cd vite-project
npm install
npm install three
npm run dev
  • 修改App.jsx
import { useState, useEffect, Component } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
import * as THREE from 'three';

// function App() {
//   useEffect(() => {


//     const scene = new THREE.Scene();
//     const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
//     //创建渲染器
//     const renderer = new THREE.WebGLRenderer();
//     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: 0x00ff00 });
//     //创建网格=几何体+材质
//     const cube = new THREE.Mesh(geometry, material);
//     //将网格添加到场景
//     scene.add(cube);

//     //正对着我们的是z轴
//     camera.position.z = 5;
//     //默认看向原点
//     camera.lookAt(0, 0, 0);

//     //创建轨道控制器
//     //const controls = new OrbitControls(camera, renderer.domElement);

//     function animate() {
//       //播放下一帧,继续调用animate函数
//       requestAnimationFrame(animate);
//       //旋转
//       cube.rotation.x += 0.01;
//       cube.rotation.y += 0.01;
//       //渲染
//       renderer.render(scene, camera);
//     }
//     //调用函数
//     animate();
//   }, [])

//   return (
//     <>
//       <div className='App'></div>

//     </>
//   )
// }

class App extends Component {
  render() {
    return <div></div>
  }
  componentDidMount() {
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    //创建渲染器
    const renderer = new THREE.WebGLRenderer();
    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: 0x00ff00 });
    //创建网格=几何体+材质
    const cube = new THREE.Mesh(geometry, material);
    //将网格添加到场景
    scene.add(cube);

    //正对着我们的是z轴
    camera.position.z = 5;
    //默认看向原点
    camera.lookAt(0, 0, 0);

    //创建轨道控制器
    //const controls = new OrbitControls(camera, renderer.domElement);

    function animate() {
      //播放下一帧,继续调用animate函数
      requestAnimationFrame(animate);
      //旋转
      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;
      //渲染
      renderer.render(scene, camera);
    }
    //调用函数
    animate();
  }
}

export default App
  • 修改index.css
* {
  margin: 0;
  padding: 0;
}

canvas {
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
}
App.jsx 的进阶版
import { useState, useEffect, Component } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
import * as THREE from 'three';
// 导入轨道控制器
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
// 导入动画库
import gsap from "gsap";

// function App() {
//   useEffect(() => {


//     const scene = new THREE.Scene();
//     const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
//     //创建渲染器
//     const renderer = new THREE.WebGLRenderer();
//     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: 0x00ff00 });
//     //创建网格=几何体+材质
//     const cube = new THREE.Mesh(geometry, material);
//     //将网格添加到场景
//     scene.add(cube);

//     //正对着我们的是z轴
//     camera.position.z = 5;
//     //默认看向原点
//     camera.lookAt(0, 0, 0);

//     //创建轨道控制器
//     //const controls = new OrbitControls(camera, renderer.domElement);

//     function animate() {
//       //播放下一帧,继续调用animate函数
//       requestAnimationFrame(animate);
//       //旋转
//       cube.rotation.x += 0.01;
//       cube.rotation.y += 0.01;
//       //渲染
//       renderer.render(scene, camera);
//     }
//     //调用函数
//     animate();
//   }, [])

//   return (
//     <>
//       <div className='App'></div>

//     </>
//   )
// }

class App extends Component {
  render() {
    return <div></div>
  }
  componentDidMount() {
    // const scene = new THREE.Scene();
    // const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    // //创建渲染器
    // const renderer = new THREE.WebGLRenderer();
    // 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: 0x00ff00 });
    // //创建网格=几何体+材质
    // const cube = new THREE.Mesh(geometry, material);
    // //将网格添加到场景
    // scene.add(cube);

    // //正对着我们的是z轴
    // camera.position.z = 5;
    // //默认看向原点
    // camera.lookAt(0, 0, 0);

    // //创建轨道控制器
    // //const controls = new OrbitControls(camera, renderer.domElement);

    // function animate() {
    //   //播放下一帧,继续调用animate函数
    //   requestAnimationFrame(animate);
    //   //旋转
    //   cube.rotation.x += 0.01;
    //   cube.rotation.y += 0.01;
    //   //渲染
    //   renderer.render(scene, camera);
    // }
    // //调用函数
    // animate();
    // console.log(THREE);



    // 设置场景、相机
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

    // 设置相机位置
    camera.position.set(0, 0, 10);
    scene.add(camera);

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

    // 监听窗口大小变化事件
    window.addEventListener('resize', function () {
      var width = window.innerWidth;
      var height = window.innerHeight;

      // 更新相机的宽高比
      camera.aspect = width / height;
      // 更新相机的投影矩阵
      camera.updateProjectionMatrix();
      // 更新渲染器大小
      renderer.setSize(width, height);
      //   设置渲染器的像素比
      renderer.setPixelRatio(window.devicePixelRatio);
    });


    // 创建一个立方体
    const geometry = new THREE.BoxGeometry();
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);
    camera.position.z = 5;

    /**************/

    // 创建轨道控制器(此时你可以使用右键让模型动起来)
    const controls = new OrbitControls(camera, renderer.domElement);
    // 设置控制器阻尼，让控制器更有真实效果,必须在动画循环里调用.update()。
    controls.enableDamping = true;

    // 添加坐标轴辅助器
    const axesHelper = new THREE.AxesHelper(5);
    scene.add(axesHelper);
    // 设置时钟
    const clock = new THREE.Clock();

    window.addEventListener("dblclick", () => {
      const fullScreenElement = document.fullscreenElement;
      if (!fullScreenElement) {
        //   双击控制屏幕进入全屏，退出全屏
        // 让画布对象全屏
        renderer.domElement.requestFullscreen();
      } else {
        //   退出全屏，使用document对象
        document.exitFullscreen();
      }
      //   console.log(fullScreenElement);
    });
    /**************/



    // 鼠标交互
    let isDragging = false;
    let previousMousePosition = {
      x: 0,
      y: 0
    };
    function onDocumentMouseDown(event) {
      isDragging = true;
    }
    function onDocumentMouseMove(event) {
      if (isDragging) {
        var deltaMove = {
          x: event.clientX - previousMousePosition.x,
          y: event.clientY - previousMousePosition.y
        };
        const deltaRotationQuaternion = new THREE.Quaternion()
          .setFromEuler(new THREE.Euler(
            toRadians(deltaMove.y * 1),
            toRadians(deltaMove.x * 1),
            0,
            'XYZ'
          ));
        cube.quaternion.multiplyQuaternions(deltaRotationQuaternion, cube.quaternion);
      }
      previousMousePosition = {
        x: event.clientX,
        y: event.clientY
      };
    }
    function onDocumentMouseUp(event) {
      isDragging = false;
    }
    // 将鼠标事件监听器添加到渲染器的DOM元素
    renderer.domElement.addEventListener('mousedown', onDocumentMouseDown, false);
    renderer.domElement.addEventListener('mousemove', onDocumentMouseMove, false);
    renderer.domElement.addEventListener('mouseup', onDocumentMouseUp, false);
    // 动画循环渲染
    function animate() {
      // 如果没有鼠标交互，立方体会自动旋转
      if (!isDragging) {
        cube.rotation.x += 0.01;
        cube.rotation.y += 0.01;
      }
      controls.update();
      renderer.render(scene, camera);
      requestAnimationFrame(animate);
    }
    animate(); // 开始动画循环
    // 辅助函数：将角度转换为弧度
    function toRadians(angle) {
      return angle * (Math.PI / 180);
    }


  }
}

export default App



// // 目标：js控制画面全屏

// // 1、创建场景
// const scene = new THREE.Scene();

// // 2、创建相机
// const camera = new THREE.PerspectiveCamera(
//   75,
//   window.innerWidth / window.innerHeight,
//   0.1,
//   1000
// );

// // 设置相机位置
// camera.position.set(0, 0, 10);
// scene.add(camera);

// // 添加物体
// // 创建几何体
// const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
// const cubeMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff });
// // 根据几何体和材质创建物体
// const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

// // 修改物体的位置
// // cube.position.set(5, 0, 0);
// // cube.position.x = 3;
// // 缩放
// // cube.scale.set(3, 2, 1);
// // cube.scale.x = 5;
// // 旋转
// cube.rotation.set(Math.PI / 4, 0, 0, "XZY");

// // 将几何体添加到场景中
// scene.add(cube);

// console.log(cube);

// // 初始化渲染器
// const renderer = new THREE.WebGLRenderer();
// // 设置渲染的尺寸大小
// renderer.setSize(window.innerWidth, window.innerHeight);
// // console.log(renderer);
// // 将webgl渲染的canvas内容添加到body
// document.body.appendChild(renderer.domElement);

// // // 使用渲染器，通过相机将场景渲染进来
// // renderer.render(scene, camera);

// // 创建轨道控制器
// const controls = new OrbitControls(camera, renderer.domElement);
// // 设置控制器阻尼，让控制器更有真实效果,必须在动画循环里调用.update()。
// controls.enableDamping = true;

// // 添加坐标轴辅助器
// const axesHelper = new THREE.AxesHelper(5);
// scene.add(axesHelper);
// // 设置时钟
// const clock = new THREE.Clock();

// window.addEventListener("dblclick", () => {
//   const fullScreenElement = document.fullscreenElement;
//   if (!fullScreenElement) {
//     //   双击控制屏幕进入全屏，退出全屏
//     // 让画布对象全屏
//     renderer.domElement.requestFullscreen();
//   } else {
//     //   退出全屏，使用document对象
//     document.exitFullscreen();
//   }
//   //   console.log(fullScreenElement);
// });

// function render() {
//   controls.update();
//   renderer.render(scene, camera);
//   //   渲染下一帧的时候就会调用render函数
//   requestAnimationFrame(render);
// }

// render();

// // 监听画面变化，更新渲染画面
// window.addEventListener("resize", () => {
//   //   console.log("画面变化了");
//   // 更新摄像头
//   camera.aspect = window.innerWidth / window.innerHeight;
//   //   更新摄像机的投影矩阵
//   camera.updateProjectionMatrix();

//   //   更新渲染器
//   renderer.setSize(window.innerWidth, window.innerHeight);
//   //   设置渲染器的像素比
//   renderer.setPixelRatio(window.devicePixelRatio);

项目打包

教程:https://juejin.cn/post/6869708334371602445

如果不想看教程,那就直接往下看

你就直接在项目的根目录下执行
npm run build
就行了

然后你就生成了一个dist目录,你把dist目录下的文件放在服务器下面就能直接跑!(假如你生成的文件夹和我的这个不一样,请看下面的补充)
在这里插入图片描述

补充

打包遇到的问题:

你可能会遇到下面三种情况:

  1. 只生成了dist目录
  2. 只生成了build目录
  3. 既生成了dist目录又生成了build目录

原因:

版本不同,操作系统不同,配置文件也有差异

解决办法:

  • 如果只生成了一个dist文件,就只需要把这一个文件下的内容放在服务器下即可.
  • 如果build和dist都生成了,就把他们两个的文件夹里面的内容一起放在在服务器下.
  • 如果只生成了一个build文件,就只需要把这一个文件下的内容放在服务器下即可.

http://www.niftyadmin.cn/n/5262126.html

相关文章

【UE】制作熔岩星球材质

【UE】制作熔岩星球材质

效果 步骤 1. 新建一个工程&#xff0c;创建一个Basic关卡&#xff0c;添加第三人称游戏和初学者内容包资源到内容浏览器 2. 新建一个材质&#xff0c;这里命名为“M_Sun” 打开“M_Sun”&#xff0c;添加两个Texture节点&#xff0c;纹理分别为“T_Rock_Basalt_N”和“T_Fire…
阅读更多...
Python内置类属性`__cmp__`属性的使用教程

Python内置类属性`__cmp__`属性的使用教程

概要 在Python中&#xff0c;__cmp__属性是一个特殊的方法&#xff0c;用于自定义类的实例之间的比较方式。深入了解和熟练运用这一特性&#xff0c;可以使自定义类更加灵活和强大。本教程将详细介绍__cmp__的基本概念、高级用法以及一些注意事项&#xff0c;通过丰富的示例代…
阅读更多...
【算法系列篇】递归、搜索和回溯（三）

【算法系列篇】递归、搜索和回溯（三）

文章目录 前言什么是二叉树剪枝1. 二叉树剪枝1.1 题目要求1.2 做题思路1.3 代码实现 2. 验证二叉搜索树2.1 题目要求2.2 做题思路2.3 代码实现 3. 二叉搜索树中第k小的元素3.1 题目要求3.2 做题思路3.3 代码实现 4. 二叉树的所有路径4.1 题目要求4.2 做题思路4.3 代码实现 前言…
阅读更多...
【24公式宝典】我要冲刺了！你们呢？

【24公式宝典】我要冲刺了！你们呢？

12月来了。解放的1月还会远吗&#xff1f; 这是我做的第一版公式宝典&#xff0c;已经集合我目前所有能想到的重点公式&#xff01;绝对没有任何保留。我认为这是全网最全、最好的公式宝典。 每一个公式下面&#xff0c;我都放了我对这个公式的看法&#xff0c;对考研来说的…
阅读更多...
抖捧自动直播是什么，系统功能讲解

抖捧自动直播是什么，系统功能讲解

目前有在做实体行业级商家服务的老板 你还在为不会直播&#xff0c;不敢直播而苦恼吗&#xff1f; 你还在为想做直播&#xff0c;但没空开直播而焦灼吗&#xff1f; 今天&#xff0c;你的问题都可以统统解决 实体行业直播必备黑科技&#xff1a;抖捧AI自动直播 只需要一部手…
阅读更多...
千梦网创：技术为王，实操至上

千梦网创：技术为王，实操至上

大家好&#xff0c;我是不怎么懂技术但也能赚到钱的千梦哥。 为什么要说技术为王&#xff0c;因为我技术不好。 我越是技术不好越要说技术为王&#xff0c;这样我才能有上升空间。 我自认为我的技术是三脚猫的功夫&#xff0c;但是够用了。 一是很多小猫现在还没有三只脚&a…
阅读更多...
Linux开发工具--vim

Linux开发工具--vim

Linux开发工具--vim 一、vim的基本概念二、常见命令三、简单配置vim配置文件的位置常用配置选项&#xff0c;用来测试使用插件 一、vim的基本概念 vim编辑器&#xff0c;只负责写代码&#xff0c;vim是一款多模式的编辑器 vim的三种模式(其实有好多模式&#xff0c;目前掌握这…
阅读更多...
以柔克刚：软体机器人的柔性革命与无限可能

以柔克刚：软体机器人的柔性革命与无限可能

原创 | 文 BFT机器人 戳“精彩内容”不容错过 你知道什么是软体机器人吗&#xff1f;真的是表面所理解的那样&#xff0c;这个“机器人是软的&#xff1f;”。当然不是啦&#xff01;那下面小编将带你具体解读一下软体机器人的来源与发展。 软体机器人是一类由软体驱动材料构成…
阅读更多...
最新文章

Copyright @ 2022~2023