ThreeJS:项目搭建

news2024/11/24 5:19:25

        介绍如何基于Vite、Vue、React构建ThreeJS项目。

Vite项目

1. 初始化项目，命令：npm init vite@latest，

2. 安装依赖，命令：npm install，

3. 启动项目，命令：npm run dev。

4. 样式初始化，修改style.css全局样式文件，

*,
body,
html {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

canvas {
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
}

5. 修改main.js文件，

import './style.css'

6. 安装ThreeJS依赖，命令：npm install --save three，

7. 创建三维场景，main.js代码如下，

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，

2. 安装依赖，命令：npm install，

3. 启动项目，命令：npm run dev。

4. 安装ThreeJS依赖，命令：npm install --save three，

 5. 初始化三维场景，改造App.vue组件，

        ---直接将Vite项目中main.js文件中的内容拷贝到script标签对之中即可。

<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，

2. 安装依赖，命令：npm install，

3. 安装ThreeJS依赖，命令：npm install --save three，

 4. 启动项目，命令：npm run dev，

5. 创建三维场景，改造App.jsx组件，

        ---直接将Vite项目中main.js文件中的内容拷贝到useEffect中即可。

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;

        显示效果如下，

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1640260.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

神经网络中的优化方法

神经网络中的优化方法

一、引入 在传统的梯度下降优化算法中&#xff0c;如果碰到平缓区域&#xff0c;梯度值较小&#xff0c;参数优化变慢 &#xff0c;遇到鞍点&#xff08;是指在某些方向上梯度为零而在其他方向上梯度非零的点。&#xff09;&#xff0c;梯度为 0&#xff0c;参数无法优化&…
阅读更多...
基于Springboot的滑雪场管理系统（有报告）。Javaee项目，springboot项目。

基于Springboot的滑雪场管理系统（有报告）。Javaee项目，springboot项目。

演示视频&#xff1a; 基于Springboot的滑雪场管理系统&#xff08;有报告&#xff09;。Javaee项目&#xff0c;springboot项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系结构&a…
阅读更多...
【linuxC语言】守护进程

【linuxC语言】守护进程

文章目录 前言一、守护进程的介绍二、开启守护进程总结 前言 在Linux系统中&#xff0c;守护进程是在后台运行的进程&#xff0c;通常以服务的形式提供某种功能&#xff0c;如网络服务、系统监控等。守护进程的特点是在启动时脱离终端并且在后台运行&#xff0c;它们通常不与用…
阅读更多...
如何使用免费软件从Mac恢复音频文件？

如何使用免费软件从Mac恢复音频文件？

要从Mac中删除任何文件&#xff0c;背后是有原因的。大多数Mac用户都希望增加Mac中的空间&#xff0c;这就是为什么他们更喜欢从驱动器中删除文件以便出现一些空间的原因。一些Mac用户错误地删除了该文件&#xff0c;无法识别这是一个重要文件。例如&#xff0c;他们错误地从Ma…
阅读更多...
I/O体系结构和设备驱动程序

I/O体系结构和设备驱动程序

I/O体系结构 为了确保计算机能够正常工作&#xff0c;必须提供数据通路&#xff0c;让信息在连接到个人计算机的CPU、RAM和I/O设备之间流动。这些数据通路总称为总线&#xff0c;担当计算机内部主通信通道的作用。 所有计算机都拥有一条系统总线&#xff0c;它连接大部分内部…
阅读更多...
ps科研常用操作，制作模式图 扣取想要的内容元素photoshop

ps科研常用操作，制作模式图 扣取想要的内容元素photoshop

复制想要copy的图片&#xff0c; 打开ps---file-----new &#xff0c;ctrolv粘贴图片进入ps 选择魔棒工具&#xff0c;点击想要去除的白色区域 然后&#xff0c;cotrol shift i&#xff0c;反选&#xff0c; ctrol shiftj复制&#xff0c;复制成功之后&#xff0c;一定要改…
阅读更多...
【Java EE】Mybatis之XML详解

【Java EE】Mybatis之XML详解

文章目录 &#x1f38d;配置数据库连接和MyBatis&#x1f340;写持久层代码&#x1f338;添加mapper接口&#x1f338;添加UserInfoXMLMapper.xml&#x1f338;单元测试 &#x1f332;CRUD&#x1f338;增(Insert)&#x1f338;删(Delete)&#x1f338;改(Update)&#x1f338;…
阅读更多...
CMake：静态库链接其他动态库或静态库（九）

CMake：静态库链接其他动态库或静态库（九）

1、项目结构 对于下面这样一个项目 把calc模块做成静态或者动态库把sort模块做成静态库然后再sort模块中的*.cpp调用calc模块生成的库即可&#xff08;这样就制作了一个静态库引用动态或者静态库&#xff09;test模块用于测试sort模块中的内容 . ├── calc │ ├── ad…
阅读更多...
ThreeJS:本地部署官网文档与案例

ThreeJS:本地部署官网文档与案例

部署方式 部署之前请确保已经配置好node.js环境。 1. 下载ThreeJS源码 ThreeJS的GitHub地址&#xff1a;GitHub - mrdoob/three.js: JavaScript 3D Library.&#xff0c;可以简单查看ThreeJS当前版本&#xff1a;r164&#xff0c; 我们可以选择对应的版本&#xff08;此处为r1…
阅读更多...
【跟马少平老师学AI】-【神经网络是怎么实现的】（七-2）word2vec模型

【跟马少平老师学AI】-【神经网络是怎么实现的】（七-2）word2vec模型

一句话归纳&#xff1a; 1&#xff09;CBOW模型&#xff1a; 2c个向量是相加&#xff0c;而不是拼接。 2&#xff09;CBOW模型中的哈夫曼树&#xff1a; 从root开始&#xff0c;向左为1&#xff0c;向右为0。叶子结点对应词有中的一个词。每个词对应唯一的编码。词编码不等长。…
阅读更多...
计算机等级考试2级（Python）知识点整理

计算机等级考试2级（Python）知识点整理

计算机等级考试2级&#xff08;Python&#xff09;知识点整理 1.基础知识点&#xff08;记忆、理解&#xff09; 第1讲Python概述 01. 源代码 02. 目标代码 03. 编译和解释 04. 程序的基本编写方法 第2讲 Python语言基础&#xff08;一&#xff09; 01. 用缩进表示代码…
阅读更多...
深入理解网络原理1

深入理解网络原理1

文章目录 前言一、网络初识1.1 IP地址1.2 端口号1.3 协议1.4 五元组1.5 协议分层 二、TCP/IP五层协议三、封装和分用四、客户端vs服务端4.1 交互模式4.2 常见的客户端服务端模型4.3 TCP和UDP差别 前言 随着时代的发展&#xff0c;越来越需要计算机之间互相通信&#xff0c;共享…
阅读更多...
前端基础学习html(1)

前端基础学习html(1)

1.标题标签.h1,h2...h6 2.段落标签p 换行标签br 3.加粗strong(b) /倾斜em(i) /删除 del(s) /下划线ins(u) 4.盒子&#xff1a;div //一行一个 span//一行多个 5.img :src alt title width height border 图片src引用&#xff1a;相对路径 上级/同级/中级 绝对路径&#xff…
阅读更多...
地图产业的困局与破局：高精地图“上车”难 轻量化渐成主流方案 | 最新快讯

地图产业的困局与破局：高精地图“上车”难 轻量化渐成主流方案 | 最新快讯

《科创板日报》5月3日讯&#xff08;编辑 邱思雨&#xff09; 近期&#xff0c;特斯拉与百度的“绯闻”成为智驾、地图行业的焦点。 有媒体消息称&#xff0c;特斯拉将与百度地图独家深度定制车道级高辅地图。《科创板日报》记者也获悉&#xff0c;自5月1日起&#xff0c;百度…
阅读更多...
【C语言实现贪吃蛇】（内含源码）

【C语言实现贪吃蛇】（内含源码）

前言&#xff1a;首先在实现贪吃蛇小游戏之前&#xff0c;我们要先了解Win32 API的有关知识 1.Win32 API Windows这个多作业系统除了协调应用程序的执行、分配内存、管理资源之外&#xff0c;它同时也是一个很大的服务中心&#xff0c;调佣这个中心的各种服务&#xff08;每一…
阅读更多...
前端面试和一些建议

前端面试和一些建议

最近公司在招前端&#xff0c;我有跟着一起参与面试。我们主要负责面试的人&#xff0c;不会问那些什么闭包&#xff0c;原型链&#xff0c;他觉得那些东西在我们日常开发中用不到&#xff0c;问的基本都是一些工作中的问题。这些问题不是每次都问&#xff0c;但也就问这些了。…
阅读更多...
基于Unity+Vue通信交互的WebGL项目实践

基于Unity+Vue通信交互的WebGL项目实践

unity-webgl 是无法直接向vue项目进行通信的&#xff0c;需要一个中间者 jslib 文件 jslib当作中间者&#xff0c;unity与它通信&#xff0c;前端也与它通信&#xff0c;在此基础上三者之间进行了通信对接 看过很多例子&#xff1a;介绍的都不是很详细&#xff0c;不如自己写&…
阅读更多...
（39）4.29数据结构（栈，队列和数组）栈

（39）4.29数据结构（栈，队列和数组）栈

#include<stdlib.h> #include<stdio.h> #define MaxSize 10 #define Elemtype int 1.栈的基本概念 2.栈的基本操作 typedef struct { Elemtype data[MaxSize]; int top; }Sqstack;//初始化栈 void InitStack(Sqstack& S) { S.top -1; //初始化…
阅读更多...
4G小车的公网直播推流

4G小车的公网直播推流

一直想做一个小车, 可以通过4G推流, 没想到现在很多云服务提供商, SRS云服务器已经可以一键搭建了. 硬件方面, 就是一个1126驮着一个3516, 1126负责4G连接, 转流到Intenet, 3516负责vi_venc_rtsp 思路如下, 我的1126的摄像头一直没能横过来, 所以就不用1126的摄像头了, 先用35…
阅读更多...
Redis-概述-安装-基本知识

Redis-概述-安装-基本知识

Redis概述 Redis是什么 Redis&#xff08;Remote Dictionary Server 远程字段服务&#xff09;是一个开源的使用ANSI C语言编写、支持网 络、内存亦可持久化的key-value数据库&#xff0c;并提供多种语言的API。Redis是一个key-value存储系统&#xff0c;它支持存储的value类型…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023