我在react-three-fiber中阅读了Canvas的官方文档。 official document of Canvas in react-three-fiber 画布的属性很少。我看到了一个人的项目。他在代码中使用了更多的属性，比如： <Canvas
concurrent
noEvents={false}
pixelRatio={window.devicePixelRatio}
camera={{ position: [0, 0, 2.5], fov: 69 }}
gl={{ antialias: true }}
浏览 25提问于2020-09-02得票数 0
回答已采纳
1回答
在React中添加3D模型
、、、、
我想添加一个3D化身在我的投资组合与反应。我遵循了本教程：
在我的标题部分，我想用three.js (跟随 )用3D化身替换我的图像。
这是Model.jsx文件
import React, { useRef } from "react";
import { Canvas, extend, useThree, useFrame } from "react-three-fiber";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
extend(
浏览 10提问于2022-06-03得票数 0
回答已采纳
1回答
我已经安装了react-three-fiber和三个包。我正在跟踪，但我怀疑该把这句话放在哪里：
const rootElement = document.getElementById("root");
另外，我也开始收到这个错误：
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
我的index.js
import React, { Children
浏览 2提问于2020-02-20得票数 4
回答已采纳
我试图创建一个自定义几何使用反应三纤维。由于几何已经从three.js中删除，所以我不需要使用bufferGeometry，但是我根本无法获得任何显示。
下面的场景组件只显示axesHelper，bufferGeometry不显示任何东西，有人知道我缺少什么来显示我的自定义几何吗？
下面的沙箱：
//Scene.jsx
import { Canvas, useFrame } from "react-three-fiber";
import { OrbitControls, PerspectiveCamera } from "@react-three/drei"
浏览 13提问于2022-06-29得票数 2
我在试着使用React Redux。有一种情况是，一个连接组件(Coordinates.jsx)嵌套在另一个连接组件(Canvas.jsx)中。
源代码 (纱线安装，然后纱线开始)
在父组件Canvas.jsx中，我在中分派了一个动作，该动作可以永久地改变状态。
Canvas.jsx
componentDidMount() { this.props.addCanvasSize(windowWidth, windowHeight)
}
问题是，在更改状态后，子组件Coordinates.jsx没有更新，console.log显示未定义的。
Coordinates.jsx
compone
浏览 1提问于2017-05-24得票数 1
回答已采纳
前奏曲
我们都很熟悉ReactDOM附带的默认渲染器--ReactDOM。
我们还提供了自定义的React呈现器，可用于与 (不是)-- DOM环境--进行接口，例如移动设备(著名的React )、VR设备、终端(如)等等。
但是，在浏览器主机中有一些在(或代替) ReactDOM中操作的自定义呈现程序。
核心问题
在浏览器主机中操作的自定义呈现程序的用途是什么？
示例
在浏览器主机中操作的自定义呈现器的一些显著示例如下：
在React中声明了来自react-three-fiber三and元素的以下代码片段，然后它将“映射”到特定的画布操作：
<Canvas&
浏览 18提问于2020-09-12得票数 7
回答已采纳
1回答
我正在使用offscreencanvas ()在一个单独的线程上渲染反应--三个纤维元素.关于这一点，在互联网上没有太多的资源(但是我发现了这个问题：)。我试着复制它，但我得到了一个错误。
主线程创建画布：
// main.jsx (main thread)
import React from "react";
export const Main = () => {
const canvasRef = React.useRef();
React.useEffect(() => {
const offscr
浏览 6提问于2022-03-23得票数 2
回答已采纳
我已经构建了一个广泛使用three.js的angular应用程序。自从我开发了这个应用程序，React-three-fiber就被开发出来了，我很喜欢它。我不想在react中重新构建应用程序。是否可以在angular应用程序中嵌入react，从而实现react-three-fiber？
浏览 1提问于2021-04-29得票数 0
我一直在使用react-three-fiber在React中开发一个应用程序，以可视化地显示数据。我试图通过将表示其属性的数据作为道具传递给组件来创建不同的模型。我的问题出现在这里，因为在每个组件中，我能够添加一个简单的形状(例如，立方体)并使其正确显示，当我在每个组件中声明要使用的模型时，它似乎只为最后一个创建的组件拾取；
顶级组件画布简化版
return (
<div>
<Canvas>
<Suspense fallback={null}>
<Items items
浏览 1提问于2021-03-15得票数 1
我希望能够在画布上使用React-three-fiber和正交相机在平面上拖动一个对象(想想棋盘上的一个棋子)。 下面是一个使用固定相机位置的示例(不是我的)：https://codepen.io/kaolay/pen/bqKjVz 但我也希望能够移动相机-所以我添加了Orbitcontrols，当对象被拖动时它是禁用的。 我在这里有一个代码沙箱，我的尝试基于许多其他人的例子：https://codesandbox.io/s/inspiring-franklin-2r3ri?file=/src/Obj.jsx 主代码位于两个文件中，分别是带有画布、相机和轨道控件的App.jsx。使用手势以及
浏览 47提问于2021-10-02得票数 0
回答已采纳
2回答
如何使用react-three-fiber将相机指向我场景中的某个方向？画布元素有一个相机道具，但它没有提供一种方法来设置角度。
<Canvas camera={{ fov: 75, position: [-10, 45, 20]}}>
浏览 2提问于2021-08-13得票数 4
回答已采纳
我在我的app.js中导入了react
import React, { Suspense, useRef, useState } from 'react'
import { Canvas, useFrame } from 'react-three-fiber'
import { useGLTF } from '@react-three/drei/'
有人知道这个问题，我该怎么解决？
浏览 2提问于2021-04-06得票数 2
1回答
ThreeJS将相机更改为正交
、、、、
react-three-fiber中的默认相机是透视的，因此我的旋转模型在旋转时会扭曲。我需要一台正射相机来避免这种情况。react-three-fiber文档建议我可以通过在canvas模块中包含以下语句来更改摄像头：
"orthographic = false // Creates an orthographic camera if true
但是这个语句不起作用=编译器不喜欢等号。
编译器接受以下语句，但失真没有明显差异：<Canvas style={{ background："#171717"，}>：true }
npm文档没有明确
浏览 5提问于2020-07-14得票数 1
好的，我有.gltf动画模型。我成功地加载了模型，但无法播放嵌入的动画。我想知道有没有办法解决这个问题。顺便说一句，我正在react中工作。提前谢谢你。 在这里您可以找到模型https://drive.google.com/file/d/1ZVyklaQuqKbSliu33hFxdyNpg4EQtcBH/view?usp=sharing 下面是我尝试过的代码。 import * as THREE from 'three'
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls&#
浏览 42提问于2020-09-17得票数 3
亲爱的Stack Overflow朋友们： 我将drei用于react native / three.js光纤。我遵循了https://github.com/pmndrs/drei中关于如何加载fbx的说明，但由于“错误:无效的钩子调用。钩子只能在函数组件的主体内调用。这可能是由于以下原因之一：”而无法使其工作。“ 谁能给我指个正确的方向怎么做？ import { StyleSheet, Text, View } from 'react-native';
import ReactDOM from 'react-dom'
import React, { useD
浏览 38提问于2020-11-11得票数 0
回答已采纳
1回答
我使用react-three-fiber在Next.js中，并呈现包含画布的组件，并使用Next的dynamic导入和禁用的服务器端呈现通过useGLTFoader加载glTF文件。在访问/重新加载页面时，将按预期的方式加载和显示glTF。
我的问题是，当切换页面时，会出现以下错误：
THREE.WebGLRenderer:上下文丢失。
当再次导航回页面时，模型是不可见的，尽管画布是可用的，并且我的组件在指定的操作上截图也是正确的(但也没有显示模型)。
保存画布并呈现glTF的组件非常基本，如下所示：
export const Rendering = ({
resourcePath
浏览 1提问于2020-09-01得票数 1
回答已采纳
我正在做一些react-three-fiber的实验，我从react-three-fiber中提取了样本代码，并添加了一些代码来创建一个圆边的平面。当我向具有圆端边的平面添加事件并尝试触发事件时，浏览器会抛出一个错误：error，我是不是做错了什么却看不到？ import ReactDOM from 'react-dom'
import React, { useRef, useState } from 'react'
import { Canvas, useFrame } from '@react-three/fiber'
import * a
浏览 29提问于2021-08-21得票数 0
回答已采纳
2回答
ReactJS:转移道具
、、、
我正在ReactJS中开发一个实时仪表板应用程序来监视传感器。我使用AutobahnJS +来流数据。
这是组件视图中我的仪表板的抽象。
Main.jsx:
class Main extends React.Component {
constructor(props) {
super(props)
}
componentDidMount() {
$(document).foundation();
var that = this;
var conn = new ab.Session('ws://xx.xxx.xxx.xx', function
浏览 1提问于2016-08-05得票数 2
我正在使用react-three-fiber、three和nextjs来显示一些鸟类，这是threejs中常见的例子！下面是一个nextjs应用程序的索引文件：
import React, { useRef, useState, useEffect } from 'react';
import * as THREE from 'three';
import { Canvas, useFrame, useLoader } from 'react-three-fiber';
import { GLTFLoader } from 'three/
浏览 8提问于2020-01-25得票数 1
我一直在尝试使用react-three-fiber将GLTF模型加载到我的gatsby站点，但似乎无法加载。这看起来应该很简单，但我是Gatsby和threejs的新手，我想知道我是否可以得到一些指导。
我的模型存储为static/models/crerar.glb，我使用gltfjsx生成了一个model组件。我试过只引用‘model/crerar.glb’，但也没有成功。
在index.js中，我有：
import Layout from "../components/layout"
import SEO from "../components/seo"
i
浏览 3提问于2020-07-20得票数 2
我想在react-three-fiber canvas中插入一个jsx组件。有办法做到这一点吗？ 我已经创建了一个官方的例子，它的特点是无限滚动。每个元素都是来自@react-three/drei的图像。假设我有一个组件数组。我如何定位它们才能达到同样的效果？ 代码是： import { Suspense, useRef } from 'react'
import { Canvas, useThree } from '@react-three/fiber'
import { ScrollControls, Scroll, Preload, Image as
浏览 38提问于2021-10-31得票数 2
回答已采纳
我对React.js和React-three-fiber是个新手。我想加100颗星。createStars()函数为循环运行100次，并创建100个x，y，z坐标。创建小球体。如何在循环中运行100次？ import './App.css';
import React, { useRef } from "react";
import ReactDOM from 'react-dom';
import { Canvas, useFrame } from "react-three-fiber";
function App() {
浏览 30提问于2021-02-10得票数 0
回答已采纳
有没有办法在react-three-fiber中访问场景的controls实例
我知道可以使用下面这样的引用来访问它：
import { useFrame } from 'react-three-fiber'
const controls = useRef()
useFrame(state => controls.current.update())
return <orbitControls ref={controls} />
但我正在寻找一种全球访问方式，比如：
const {
gl, // WebGL rende
浏览 1提问于2021-01-11得票数 0
我有这样的代码；
AnimationSet s1 = new AnimationSet(true);
TranslateAnimation tr1 = new TranslateAnimation(0, 0, -100, -200);
tr1.setDuration(6500);
s1.addAnimation(tr1);
Paint paint = new Paint();
Bitmap b = Bitmap.createBitmap(90, 90, Bitmap.Config.ARGB_8888);
Canvas c
浏览 0提问于2011-02-02得票数 4
回答已采纳
2回答
我试着用反光镜--三纤维和打字稿--使用着色器。着色文件：
import { ShaderMaterial } from "three"
import { extend } from "react-three-fiber"
class CustomMaterial extends ShaderMaterial {
constructor() {
super({
vertexShader: `...`,
fragmentShader: `...`,
uniforms: [...]
})
}
}
ext
浏览 2提问于2020-12-26得票数 2
回答已采纳
我有以下两个组成部分：
Camera.tsx
import { useGLTF } from "@react-three/drei"
export default function Camera() {
const gltf = useGLTF('/scene.gltf', true)
return (
<primitive object={gltf.scene} dispose={null}/>
)
}
并在Landing.tsx中使用
import { Suspense, useRef } from 'react&
浏览 14提问于2021-01-04得票数 5
回答已采纳
我目前正在为一个元素编写一个带有ref的StencilJS组件，我需要将它作为@Prop传递给另一个元素。如下所示： <canvas ref={el => this.canvas = el}></canvas>
<color-picker canvas={this.canvas}></color-picker> 创建颜色选择器时，this.canvas仍未定义，从而导致color-picker中出现错误。 我如何在JSX中做到这一点？
浏览 24提问于2020-01-14得票数 2
回答已采纳
我遵循来自Globe.gl的这个来实现以下。我想使用react-three-fiber旋转这个球体，也就是使用这个中的方法。
这是我的Globe.js
import React from "react";
import * as d3 from "d3-dsv";
import indexBy from "index-array-by";
import Globe from "react-globe.gl";
import earth from "../../public/images/earth-dark.png
浏览 81提问于2021-02-20得票数 1
1回答
画布正在清理卷轴
、、、、
function Component2 ():JSX.Element {
return (<canvas width="300" height="300></canvas>);
}
export default function Component1(): JSX.Element {
const scrollToEndRef = useRef(null);
const [hideScrollEnd, setHideScrollEnd] = useState(false);
useEff
浏览 2提问于2022-10-03得票数 -1
回答已采纳
我正在用typescript制作react项目。因为需要导入.obj文件，所以我导入了threejs库和react-three-fiber库，如下所示；
import React, { useState, useMemo } from 'react'
import logo from './logo.svg';
import { Canvas } from 'react-three-fiber';
import { Group } from 'three';
import './App.css';
import {
浏览 36提问于2021-03-26得票数 0
1回答
我试着用盖茨比展示一个三人模型。
由于盖茨比是建立在反应的基础上的，我想这是可能的。
这一次，模型是一个简单的盒子：
import React, { useRef, useState } from "react";
import { Canvas, useFrame } from "react-three-fiber";
import { BoxBufferGeometry, MeshStandardMaterial } from "three";
const Box = (props) => {
// This referenc
浏览 6提问于2022-03-08得票数 1
1回答
我创建了一个带有boxGeometry的Orbital Controls来呈现一个长方体。但是，当我缩放到离长方体的所需距离时，长方体的角不会像这样渲染： ? 我目前使用的是react-three-fiber和react-three-drei const SceneItems = () => {
return (
<>
<OrbitControls
minDistance={0.001}
/>
<ambientLight
浏览 41提问于2021-11-11得票数 0
回答已采纳
我想使用我的<button>组件调用一个特定的函数，以便使用HTML5画布在我的画布上进行绘制。 下面是这些文件的结构以及我是如何传递props ->的 我将主函数放在App.js中，通过props将其传递给MainPage.jsx的中间文件，然后通过props将drawRectangle()方法传递给canvas.jsx的最下面的文件 在Canvas.jsx最下面的文件中- useEffect(() => {
const canvas = canvasRef.current;
canvas.width = "500";
canvas.height =
浏览 23提问于2020-11-01得票数 0
我从api中获取GameChart的数据，并更改redux状态。在GameChart.jsx文件中，当componentDidUpdate调用时，我绘制图表。但是，redux状态更改有时不调用componentDidUpdate。
控制台GameChart.jsx生命周期日志
GameChart.jsx控制台日志，当componentDidUpdate没有调用时(它神奇地发生在50/50的概率.)：
Chart mapStateToProps
Chart componentDidMount
Chart mapStateToProps
当redux状态更改时，GameChart.j
浏览 3提问于2019-12-16得票数 3
警告这不是的副本。here三渲染器被废弃了，我在这里使用功能组件。
我需要加载一个.obj文件，但是出现了两个问题。首先，它抛出TypeError: instance is undefined的反应-三纤维.其次，它以HTML：Error: THREE.OBJLoader: Unexpected line: "<!DOCTYPE html>"的形式加载Error: THREE.OBJLoader: Unexpected line: "<!DOCTYPE html>"。
这些问题是与包裹有关，还是与三纤维反应有关？
下面是不起作用的代码：
浏览 1提问于2019-06-12得票数 2
我一直在尝试使用从导入的useRender import { Canvas, useRender } from 'react-three-fiber';
const App = () => {
const meshRef = useRef();
const [hovered, setHovered] = useState(false);
const [active, setActive] = useState(false);
const props = useSpring({
scale: active ? [4, 4, 4] : [2, 2,
浏览 43提问于2020-07-11得票数 1
我第一次问问题，然后我就停滞不前了……
我正试着用React-Three-Fiber做一个滑块，但我似乎不能让滑块可拖动。
下面是我的代码：
let canvas = document.querySelector(".canvas")
let pressed = false;
let startx;
let x;
canvas.addEventListener('mousedown', (e) => {
pressed = true;
startx = e.offsetX;
canvas.style.curso
浏览 2提问于2021-08-10得票数 0
我正在尝试扩展这个react-three-fiber Game Demo。我想在播放器与计算机交互时显示弹出模式。我想在使用TailwindCSS样式的模式中呈现不同的React组件。 你知道这是不是你可以用react-three-fiber做的事情？任何帮助都将不胜感激！
浏览 41提问于2021-05-11得票数 1
考虑toLinePath函数： const toLinePath = (arrayOfPoints, color = 0x000000) => {
const path = new THREE.Path();
const firstPoint = arrayOfPoints[0];
path.moveTo(firstPoint.x, firstPoint.y, firstPoint.z);
arrayOfPoints.forEach(point => path.lineTo(point.x, point.y, point.z));
path.closePat
浏览 58提问于2019-09-19得票数 3
回答已采纳
12回答
在我的单元测试中，我使用呈现一个组件。ColorPicker组件创建一个画布对象和2d上下文，但返回'undefined'，这将引发错误"Cannot set property 'fillStyle' of undefined"。
if (typeof document == 'undefined') return null; // Dont Render On Server
var canvas = document.createElement('canvas');
canvas.width = canvas.
浏览 8提问于2015-10-21得票数 43
回答已采纳
一旦我将"react-hot-loader/babel"添加到我的.babelrc中，它就会破坏我的React组件。
具体来说，我有一些代码如下所示：
export default class Editor extends React.Component {
componentDidMount() {
console.log('this.canvas',this.canvas);
// ...
}
setRef = node => {
console.log('setRef
浏览 1提问于2018-02-18得票数 2
回答已采纳
我目前正在使用react-three-fiber创建一个游戏，我想实现一个具有弹出问题或文本的触摸点，这些问题或文本将由玩家回答。已经完成了接触点，但我坚持创建一个弹出式窗口，对应于接触点。
浏览 47提问于2020-07-29得票数 0
我想在页面加载时显示弹出窗口，但我不了解react javascript。我使用的是lightbox弹出窗口。它工作得很好，但它的onclick功能工作正常。我需要在页面加载时打开弹出窗口。我的代码是：
<html>
<head>
<script src='//cdnjs.cloudflare.com/ajax/libs/react/0.12.0/JSXTransformer.js'></script>
<script src='//cdnjs.cloudflare.com/ajax/libs
浏览 15提问于2017-02-22得票数 0
我正在使用组件实现一些画布渲染。我有以下组件，它尝试将画布布局到页面，并让Stage组件中的子组件绘制到其上下文中。
我需要一个对Renderer组件呈现的画布元素的引用。因此，我在JSX中请求ref，并在获得它时将其设置在我的组件上。我还使用了React上下文，这样所有子组件都可以访问这个画布引用。我遇到的问题是，似乎在分配画布引用之前调用了getChildContext，所以所有子组件都访问一个未定义的画布，并且没有完成任何绘制。
export default class Renderer extends React.Component {
static childContext
浏览 4提问于2017-08-21得票数 6
回答已采纳
因此，我使用的反应TS粒子和反应three.JS为我的个人投资组合网站，我有一个问题。
所以我使用React粒子来创建一个非常好的恒星背景，但是当我添加我的Home组件时，它会显示在星体背景中。我也有一个旋转的三维月球，它不进入恒星背景，工作非常好，你可以在这张图片中看到
我的./src/App.js文件的代码是
import React from 'react';
import Home from './components/Home';
import Moon from './components/Moon';
import { S
浏览 13提问于2022-02-19得票数 1
你好，我是的新手，在这个例子中，我想从父类中的子组件调用testChild函数，我不知道如何保持对每个子组件的引用，我不能更改子组件代码，如何为每个子组件调用testChild？
class parent extends React.Component {
public render(): JSX.Element {
return (
<child/>
<child/>
)
public parentCall(): void{
//call testChild for eac
浏览 2提问于2019-07-25得票数 0
回答已采纳
2回答
无法添加本地图像。
我试过：
const MyApp = () => {
return(
<Text>
Some Text
</Text>
<Image source={require('./story1.jpg')} />
)
}
也曾尝试过：
const MyApp = () => {
return(
<Text>
Some Text
</Text&g
浏览 3提问于2019-12-11得票数 0
回答已采纳
1回答
我的express的app.js加载在我的主模板文件中，如下所示：
app.get('/', routes.index);
其中routes.index是：
exports.index = function(req, res){
res.render('Index', { title: 'Express' });
};
我的Index.jsx是我的主要模板，如下所示：
import React from 'react';
import Layout from './layout';
import Network
浏览 3提问于2017-09-10得票数 0
回答已采纳
3回答
不更新HTML画布
、、、
我在DrawingCanvas.jsx中有以下代码：
var _ = require('bower.js').lodash;
var React = require('bower.js').React;
var channel = require('com.js').channel;
var DrawingCanvas = React.createClass({
setCanvasImage: function(){
if(this.props.image != null)
{
//var canvas = Re
浏览 3提问于2015-10-05得票数 3
回答已采纳
1回答
当从Node (express)服务器端呈现时，我在向React组件传递初始属性时遇到了问题
以下是我的组件的简短版本：
/* mycomponent.jsx */
import React, {PropTypes, Component} from 'react/addons'
import GoogleMap from 'google-map-react'
import Place from './place.jsx'
export default class EventsMapPage extends Component {
stat
浏览 0提问于2015-08-13得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
