- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
考虑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.closePath();
const points = path.getPoints();
const geometry = new THREE.BufferGeometry().setFromPoints(points);
const material = new THREE.LineBasicMaterial({ color });
const line = new THREE.Line(geometry, material);
return line;
};
我想使用 react-three-fiber
重新创建它并一直在尝试这样的事情:
import React from 'react'
import * as THREE from 'three'
import ReactDOM from 'react-dom'
import { Canvas } from 'react-three-fiber'
function LinePath(props) {
const vertices = React.useMemo(() => {
const path = new THREE.Path()
const firstPoint = props.vertices[0]
path.moveTo(firstPoint.x, firstPoint.y, firstPoint.z)
props.vertices.forEach(point => path.lineTo(point.x, point.y, point.z))
path.closePath()
return path.getPoints()
}, [props.vertices])
return (
<line>
<bufferGeometry attach="geometry" setFromPoints={vertices} />
<lineBasicMaterial attach="material" color="black" />
</line>
)
}
ReactDOM.render(
<Canvas>
<LinePath vertices={[new THREE.Vector3(0, 0, 0), new THREE.Vector3(2, 2, 0), new THREE.Vector3(-2, 2, 0)]} />
</Canvas>,
document.getElementById('root')
)
但是根本没有输出/错误。我想我完全误解了 react-three-fiber
的 API。我在这里做错了什么?谢谢,这里是 sandbox
最佳答案
所以我真的想通了。我要找的是useUpdate
钩子(Hook)允许我们调用任何给定 ref
的方法。所以这就是需要做的:
import { Canvas, useUpdate } from 'react-three-fiber'
function LinePath(props) {
const vertices = ...
const ref = useUpdate(geometry => {
geometry.setFromPoints(vertices)
}, [])
return (
<line>
<bufferGeometry attach="geometry" ref={ref} />
...
</line>
)
}
关于javascript - bufferGeometry setFromPoints 与 react-three-fiber,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58009236/
如何在 ThreeJS 中将两个缓冲区几何合并到一个 THREE.BufferGeometry 中? var modelGeometry = null; geometry = new THREE.Cy
据我了解,Geometry 存储顶点和面的 javascript 对象结构,而 BufferGeometry 只是通过 Float32Arrays 等存储原始 gl 数据。 有什么方法可以将标准 Ge
作为场景对象的基础,我有一个根 Object3D。我的数据从这个根加载为 Object3D 的树结构。使用 BufferGeometry/MeshPhongMaterial 将网格添加到叶 Objec
我试图制作一个显示大量球形对象的三个 js 文档,最快的方法是使用 buffergeometry。来自这篇文章here我了解到我可以使用以下方法将普通几何体转换为缓冲几何体: var sphe
我正在尝试将我在 openFrameworks 中编写的一些代码移植到 THREE.JS 中。该代码使用 perlin 噪声生成景观。我这样做是为了首先创建一个静态索引数组,然后将顶点的位置放置在一个
我只是想知道“偏移量”和“索引/索引”究竟是什么。偏移量是例如在 https://github.com/mrdoob/three.js/blob/dev/src/core/BufferGeometry
我正在使用 BufferGeometry 来绘制构成地形的数千个立方体,但是如果我需要更改其中一个立方体的位置,我很难找到如何更新几何体。例如,我有这段代码来初始化我的几何图形:(我正在对 this
我是 two.js 的新手。我使用以下代码创建了一个测试多边形: var geometry = new THREE.BufferGeometry(); var vertices = new Float
当使用 BufferGeometry 时,如何为面指定 Material ? 是否有类似数组的东西包含与 Face#materialIndex 相同的信息? 最佳答案 BufferGeometry 不
我有一个这样的输出日期: geom[0] = { texturesindexT: new Int16Array([0,1,2,3]), texturesindexS: new Int16Array([
我有一条随机线“绕着我的场景走动”(某种 3D 蛇),接下来我想要实现的是在它的头部周围设置一个盒子。bufferGeometry 行由 设置 var positions1 = new
我以编程方式创建了一个简单的网格: var CreateSimpleMesh = new function () { var xy = [], maxX = 7,
如何使用 BufferGeometry 绘制简单的正方形?例如,BufferGeometry 绘制了 120000 个三 Angular 形,我想将其分解为两个,形成一个简单的正方形。 t
我一直在尝试使用 THREE.BufferGeometry() 绘制一个非常基本的矩形。这是代码- var geometry = new THREE.BufferGeometry(); var mat
交集对象(由 raycaster.intersectObject() 返回)具有 face 和 faceIndex 属性。但是,如果相交对象是 BufferGeometry,则这些属性为 null。另
我使用 STLLoader 将 STL 加载到返回 BufferGeometry 的 threeJS 场景中。 然后我用了 myMesh.position.set( x,y,z ) myMesh.ro
假设我从名为 oldGeom 的 THREE.Geometry 生成了一个 THREE.BufferGeometry,如下所示: // using WebGLRenderer var geometry
我创建了一个 bufferGeometry ,它由 5 个平面 (100x25) 组成,每个平面有两个三 Angular 形。 function createGeometry() { var ge
geometry.faces 仅可用于新的 THREE.BoxGeometry。然后我尝试使用 THREE.BoxBufferGeometry 我不能改变面孔的颜色。 不工作: var geome
在 BufferGeometry 中,有没有一种方法可以访问面索引和法线而不转换为 Geometry? 手头的几何体是由 Threejs 编辑器创建的 SphereBufferGeometry。 我只
我是一名优秀的程序员,十分优秀!