Babylonjs学习笔记(一)——搭建基础场景

news2024/11/13 3:38:29

React + typescript + umi + Babylonjs 搭建基础场景

yarn add --save babylonjs babylonjs-loaders

1、封装基础场景
import { Engine, Scene } from "babylonjs";
import { useEffect,useRef,FC } from "react";
import "./index.less"

type PropsType = {
  antalias:any;
  engineOptions?:any;
  adaptToDeviceRatio?:any;
  sceneOptions?:any;
  onRender:(scene:Scene)=>void;
  onSceneReady:any;
  [key:string]:any;
}

const BaseScene:FC<PropsType>=(props)=>{
  const {antalias,engineOptions,adaptToDeviceRatio,sceneOptions,onRender,onSceneReady,...rests} = props

  // 获取canvas画布
  const canvasRef = useRef<HTMLCanvasElement>(null);

  useEffect(()=>{

    const {current:canvas} = canvasRef
    if(!canvas)return

    
    // 创建babylonjs 引擎
    const engine = new Engine(canvas,antalias,engineOptions  ,adaptToDeviceRatio);
    // 创建场景
    const scene = new Scene(engine,sceneOptions)
    
    // 搭建场景
    if(scene.isReady()){
      onSceneReady(scene)
    }else{
      scene.onReadyObservable.addOnce((scene)=>onSceneReady(scene))
    }

    // 帧渲染
    engine.runRenderLoop(()=>{
      if(typeof onRender === 'function') onRender?.(scene);
      scene?.render();
    })
    
    const resize=()=>{
      scene.getEngine().resize()
    }
    // 监听画布大小
    if(window){
      window.addEventListener('resize',resize)
    }
    // 销毁
    return ()=>{
      scene.getEngine().dispose()
      if(window){
        window.removeEventListener('resize',resize)
      }
    }
  },[antalias,engineOptions,adaptToDeviceRatio,sceneOptions,onRender,onSceneReady])
  
  return <canvas ref={canvasRef} className="renderCanvas" {...rests}/>
}
export default BaseScene

2、封装应用场景
import {  ArcRotateCamera, HemisphericLight, MeshBuilder, Scene,  Vector3 } from "babylonjs";
import 'babylonjs-loaders'
import BaseScene from "./BaseScene";


let box:any;
const onSceneReady=async (scene:Scene)=>{
  
  // 创建相机
  const camera = new ArcRotateCamera('camera',0,0.8,100,Vector3.Zero(),scene)

  // 设置相机目标
  camera.setTarget(Vector3.Zero());

  // 获取画布
  const canvas = scene.getEngine().getRenderingCanvas();

  // 添加控制器
  camera.attachControl(canvas,true);

  // 框架行为
  camera.useFramingBehavior =true;

  // 添加灯光
  const light = new HemisphericLight('light',new Vector3(0,1,0),scene)

  // 设置强度
  light.intensity = 0.7;

  // 创建box
  box = MeshBuilder.CreateBox('box',{size:2},scene)
  box.position.y= 1;

  // 相机目标
  camera.setTarget(box)

  MeshBuilder.CreateGround('ground',{width:6,height:6},scene)
}




const onRender=(scene:Scene)=>{
  if(box !== undefined){
    const deltTime = scene.getEngine().getDeltaTime();

    const rpm = 10;
    box.rotation.y += (rpm / 60) * Math.PI * 2 * (deltTime / 1000);
  }
}

export default ()=>
    <BaseScene  antalias onSceneReady={onSceneReady} onRender={onRender} id="canvas" />
3、应用场景
import BaseScene from '@/components/Robot';
import { PageContainer } from '@ant-design/pro-components';
import styles from './index.less';

const HomePage: React.FC = () => {
  return (
    <PageContainer ghost>
      <div className={styles.container}>
       <BaseScene />
      </div>
    </PageContainer>
  );
};

export default HomePage;
4、演示

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

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

相关文章

自用bat脚本,命令

redis配置环境变量后 关机脚本 redis-server --service-stop启动脚本 :: 注释 rem echo off cd /d d:\\Redis :: redis-cli :: shutdown :: exit :: netstat -ano |findstr "6639" :: taskkill /pid {pid} /F redis-server redis.windows.conf pausecmd中替代gr…

BFS专题8 中国象棋-马-无障碍

题目&#xff1a; 样例&#xff1a; 输入 3 3 2 1 输出 3 2 1 0 -1 4 3 2 1 思路&#xff1a; 单纯的BFS走一遍即可&#xff0c;只是方向坐标的移动变化&#xff0c;需要变化一下。 代码详解如下&#xff1a; #include <iostream> #include <vector> #include…

上次的那段代码后续

之前写了一篇文章&#xff0c;说是一个要修改一个代码&#xff0c;很多人评论说代码说得不清不楚&#xff0c;不过在评论说又解释了一波之后&#xff0c;大家至少对这个代码有理解了&#xff0c;至少知道这个代码是做什么事情了。 如果是你&#xff0c;会不会修改这段代码&…

数据结构初阶——时间复杂度

朋友们我们又见面了&#xff0c;今天我们来学习数据结构的时间复杂度&#xff0c;在讲数据结构之前&#xff0c;大家可能只知道我们学习的是数据结构&#xff0c;但是还是不知道数据结构的具体定义&#xff0c;其实就是在内存上的数据。然后我们就像通讯录一样对它进行增删查改…

Qt 目录操作(QDir 类)及展示系统文件实战 QFilelnfo 类介绍和获取文件属性项目实战

一、目录操作(QDir 类) QDir 类提供访问系统目录结构 QDir 类提供对目录结构及其内容的访问。QDir 用于操作路径名、访问有关路径和文件的信息以及操作底层文件系统。它还可以用于访问 Qt 的资源系统 Qt 使用“/”作为通用目录分隔符&#xff0c;与“/”在 URL 中用作路径分…

istio介绍(一)

1. 概念 1.1 虚拟服务 虚拟服务提供流量路由功能&#xff0c;它基于 Istio 和平台提供的基本的连通性和服务发现能力&#xff0c;让您配置如何在服务网格内将请求路由到服务 示例&#xff1a; apiVersion: networking.istio.io/v1alpha3 kind: VirtualService metadata:nam…

高项.项目管理经验、理念、教训

一、项目管理的一些经验 管项目重在管理&#xff0c;而不是死抠无关紧要的技术细节等等。 真正的团队一定是11>2&#xff0c;要把重心放在凝聚团队协力&#xff0c;共同完成目标上。 项目的推进永远都是不确定性的&#xff0c;真正考验项目经理的是不断出现的需求变更和状…

vue重修之路由【上】

文章目录 单页应用程序: SPA - Single Page Application路由简介Vue Reouter简介VueRouter的使用&#xff08;52&#xff09;组件的存放目录问题组件分类存放目录 路由的封装抽离 单页应用程序: SPA - Single Page Application 单页面应用(SPA): 所有功能在 一个html页面 上 单…

常用的跨域解决方案有哪些?

在 Web 开发中,跨域是指在浏览器环境下,通过 JavaScript 代码从一个域名的网页去访问另一个域名的资源。由于同源策略的限制,跨域请求通常会被浏览器阻止,为了实现跨域访问,HTML5 提供了一些机制来解决这个问题。 以下是一些常用的跨域解决方案: 1:JSONP(JSON with P…

展馆导览系统之AR互动式导航与展品语音讲解应用

一、项目背景 随着科技的进步和人们对于文化、艺术、历史等方面需求的提升&#xff0c;展馆在人们的生活中扮演着越来越重要的角色。然而&#xff0c;传统的展馆导览方式&#xff0c;如纸质导览、人工讲解等&#xff0c;已无法满足参观者的多元化需求。为了提升参观者的体验&a…

​CUDA学习笔记(六)Warp解析

本篇博文转载于https://www.cnblogs.com/1024incn/tag/CUDA/&#xff0c;仅用于学习。 Warp 逻辑上&#xff0c;所有thread是并行的&#xff0c;但是&#xff0c;从硬件的角度来说&#xff0c;实际上并不是所有的thread能够在同一时刻执行&#xff0c;接下来我们将解释有关wa…

​CUDA学习笔记(五)GPU架构

本篇博文转载于https://www.cnblogs.com/1024incn/tag/CUDA/&#xff0c;仅用于学习。 GPU架构 SM&#xff08;Streaming Multiprocessors&#xff09;是GPU架构中非常重要的部分&#xff0c;GPU硬件的并行性就是由SM决定的。 以Fermi架构为例&#xff0c;其包含以下主要组成…

什么是SpringMVC?简单好理解!

1、SpringMVC是什么&#xff1f; SpringMVC是一个基于Java的实现了MVC设计模式的请求驱动类型的轻量级web框架&#xff0c;通过把Model&#xff0c;View&#xff0c;Controller分离&#xff0c;将web层进行职责解耦&#xff0c;把复杂的web应用分成逻辑清晰的几部分。简化开发&…

并发编程-线程池ThreadPoolExecutor底层原理分析(一)

问题&#xff1a; 线程池的核心线程数、最大线程数该如何设置&#xff1f; 线程池执行任务的具体流程是怎样的&#xff1f; 线程池的五种状态是如何流转的&#xff1f; 线程池中的线程是如何关闭的&#xff1f; 线程池为什么一定得是阻塞队列&#xff1f; 线程发生异常&…

蓝桥杯 (饮料换购,C++)

思路&#xff1a; 1、先加上初始的饮料数n。 2、再加上n可以兑换的饮料数n/3&#xff0c;求多余的瓶盖n%3。循环直至瓶盖数无法兑换新的一瓶饮料。 #include<iostream> using namespace std; int main() {int n,a0,sum0;cin >> n;sum n;while (n){n n a;//加上上…

【软考】11.5 测试原则/阶段/测试用例设计/调试

《测试原则和方法》 测试原则 测试&#xff1a;为了发现错误而执行程序的过程成功的测试&#xff1a;发现了至今尚未发现的错误的测试 测试方法 静态测试&#xff08;有效发现30%-70%的错误&#xff09; a. &#xff08;文档&#xff09;检查单 b. &#xff08;代码&#xff…

学习SpringMVC,建立连接,请求,响应 SpringBoot初学,如何前后端交互(后端版)?最简单的能通过网址访问的后端服务器代码举例

要想通过SpringBoot写一个简单的处理请求的服务器&#xff08;方法&#xff09;&#xff0c;需要有以下步骤 建立连接请求响应 来复习的话直接在文章末尾看源码就行 1、创建SpringBoot项目 https://blog.csdn.net/dream_ready/article/details/133948253 2、编写Controller建…

WebSocket的入门秘籍?

一、是什么 WebSocket&#xff0c;是一种网络传输协议&#xff0c;位于OSI模型的应用层。可在单个TCP连接上进行全双工通信&#xff0c;能更好的节省服务器资源和带宽并达到实时通迅 客户端和服务器只需要完成一次握手&#xff0c;两者之间就可以创建持久性的连接&#xff0c…

postman打开后,以前的接口记录不在,问题解决

要不这些文件保存在C:\Users\{用户名}\AppData\Roaming\Postman 比如&#xff0c;你目前使用的window登录用户是abc&#xff0c;那么地址便是C:\Users\abc\AppData\Roaming\Postman 打开后&#xff0c;这个目录下会有一些命名为backup-yyyy-MM-ddThh-mm-ss.SSSZ.json类似的文…

[python 刷题] 287 Find the Duplicate Number

[python 刷题] 287 Find the Duplicate Number 题目&#xff1a; Given an array of integers nums containing n 1 integers where each integer is in the range [1, n] inclusive. There is only one repeated number in nums, return this repeated number. You must sol…