react 中three.js 模型渲染

2024-09-03 19:20

本文主要是介绍react 中three.js 模型渲染,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

    npm install three

import * as THREE from "three";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
const mountRef = useRef(null);
useEffect(() => {// 创建渲染器  const renderer = new THREE.WebGLRenderer(); const width = mountRef.current.clientWidth;  const height = mountRef.current.clientHeight; // 创建场景  const scene = new THREE.Scene();  
// 创建相机  const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);  camera.position.z = 125;  camera.rotation.x=-70camera.position.y=150// 更新相机的矩阵camera.updateMatrix();// 修改fovcamera.scale.set(1.3,1.5,1.2);camera.fov = 100; // 设置新的fov为90度camera.updateProjectionMatrix(); // 更新投影矩阵renderer.setSize(width, height);  mountRef.current.appendChild(renderer.domElement);  renderer.setClearColor(0x000000, 0); //画布背景为透明,// 创建加载器  const loader = new GLTFLoader();const ambientLight = new THREE.AmbientLight(0xffffff, 2);scene.add(ambientLight);loader.load(  './factory.glb', // 模型的URL  function (gltf) {  model = gltf.scene;scene.add(model); // 将加载的模型添加到场景中  });  // 渲染循环  const animate = (event) => {  renderer.render(scene, camera); TWEEN.update(); // 更新动画状态requestAnimationFrame(animate);};  animate(); 
})return(<div ref={mountRef} style={{width:'100%',height:'100%',backgroundColor: "transparent"}}></div>
)

这里有个问题是模型放的文件夹,在我这引用的时候,我是放到了public文件下,引用的时候就是./  放在其他文件下 会有问题。

模型必须给光源,要不然模型是黑的

 // 添加光源

    // AmbientLight 环境光 环境光环境光是最简单的一种光源,它均匀地照亮场景中的所有物体,没有方向性。使用环境光可以为场景提供基础亮度,但它不能产生阴影,也不提供方向性的光照效果。

    //DirectionalLight 方向光 方向光模仿太阳光,从一个方向均匀地照亮场景,可以产生硬阴影。为了照亮整个模型,你可以将方向光的方向设置为指向模型,通常是从上方或侧面照射

    //HemisphereLight 半球光 半球光提供来自两个方向的光照,通常用于模拟天空和地面的光照。它可以为场景提供更为自然的基础照明。

    //PointLight(点光源) 或 SpotLight(聚光灯) 这两种光源可以照亮模型的大部分区域,但是它们的效果通常受限于光源的位置和范围。为了照亮整个模型,你可能需要多个光源,或者调整光源的位置和范围。

    // const light = new THREE.SpotLight(0xffffff, 2);

    // light.position.set(10, 10, 10).normalize();

    // scene.add(light);

这篇关于react 中three.js 模型渲染的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1133823

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件,方便以后开发的时候查找!!! 函数工具: Lodash 页面固定: stickUp、jQuery.Pin 轮播: unslider、swiper 开关: switch 复选框: icheck 气泡: grumble 隐藏元素: Headroom

大模型研发全揭秘:客服工单数据标注的完整攻略

在人工智能(AI)领域,数据标注是模型训练过程中至关重要的一步。无论你是新手还是有经验的从业者,掌握数据标注的技术细节和常见问题的解决方案都能为你的AI项目增添不少价值。在电信运营商的客服系统中,工单数据是客户问题和解决方案的重要记录。通过对这些工单数据进行有效标注,不仅能够帮助提升客服自动化系统的智能化水平,还能优化客户服务流程,提高客户满意度。本文将详细介绍如何在电信运营商客服工单的背景下进行

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

Andrej Karpathy最新采访:认知核心模型10亿参数就够了,AI会打破教育不公的僵局

夕小瑶科技说 原创  作者 | 海野 AI圈子的红人,AI大神Andrej Karpathy,曾是OpenAI联合创始人之一,特斯拉AI总监。上一次的动态是官宣创办一家名为 Eureka Labs 的人工智能+教育公司 ,宣布将长期致力于AI原生教育。 近日,Andrej Karpathy接受了No Priors(投资博客)的采访,与硅谷知名投资人 Sara Guo 和 Elad G

在JS中的设计模式的单例模式、策略模式、代理模式、原型模式浅讲

1. 单例模式(Singleton Pattern) 确保一个类只有一个实例,并提供一个全局访问点。 示例代码: class Singleton {constructor() {if (Singleton.instance) {return Singleton.instance;}Singleton.instance = this;this.data = [];}addData(value)

Retrieval-based-Voice-Conversion-WebUI模型构建指南

一、模型介绍 Retrieval-based-Voice-Conversion-WebUI(简称 RVC)模型是一个基于 VITS(Variational Inference with adversarial learning for end-to-end Text-to-Speech)的简单易用的语音转换框架。 具有以下特点 简单易用:RVC 模型通过简单易用的网页界面,使得用户无需深入了

透彻!驯服大型语言模型(LLMs)的五种方法,及具体方法选择思路

引言 随着时间的发展,大型语言模型不再停留在演示阶段而是逐步面向生产系统的应用,随着人们期望的不断增加,目标也发生了巨大的变化。在短短的几个月的时间里,人们对大模型的认识已经从对其zero-shot能力感到惊讶,转变为考虑改进模型质量、提高模型可用性。 「大语言模型(LLMs)其实就是利用高容量的模型架构(例如Transformer)对海量的、多种多样的数据分布进行建模得到,它包含了大量的先验