Как инициализировать объекты вне useFrame () в react-three-fiber - PullRequest
Новая
       80

Как инициализировать объекты вне useFrame () в react-three-fiber

0 голосов
/ 19 июня 2020

В настоящее время я использую react-three-fiber для создания сцены, но я не знаю, как разместить 3D-объекты в разных случайных положениях. Я использовал для l oop внутри useFrame, чтобы иметь разные случайные позиции, но поскольку это будет отображаться каждый раз, частицы снова будут перемещаться в случайное положение. Но я хочу, чтобы эти позиции были случайными только при инициализации, а затем просто перемещали меня целиком sh. Но если я использую для l oop непосредственно перед фреймом использования, он выдает ошибку: «Невозможно прочитать свойство setMatrixAt из undefined». PS- Я просто пытаюсь воссоздать - https://threejs.org/examples/?q=postprocessing#webgl_postprocessing

import * as THREE from 'three'
import ReactDOM from 'react-dom'
import React, { useRef, useMemo, useState, useEffect } from 'react'
import { Canvas, useFrame } from 'react-three-fiber'
import Effects from './Effects'
import './styles.css'
const tempObject = new THREE.Object3D()

function Boxes({count}) {
  
  const ref = useRef()
  const previous = useRef()

  const particles = useMemo(() => {
    const temp = []
   

  useFrame(state => {
    const time = state.clock.getElapsedTime()
    ref.current.rotation.x += 0.00000
    ref.current.rotation.y += 0.00000
    let i = 0
    for (let x = 0; x < count; x++){
      const id = i++
      tempObject.position.set(Math.random() - 0.5, Math.random() - 0.5, Math.random() - 0.5 ).normalize()
      tempObject.position.multiplyScalar( Math.random() * 40 )
      tempObject.rotation.set( Math.random() * 2, Math.random() * 2, Math.random() * 2 )
      tempObject.updateMatrix()
      ref.current.setMatrixAt(id, tempObject.matrix)
    }
    ref.current.instanceMatrix.needsUpdate = true
  })

  return (
    <instancedMesh ref={ref} args={[null, null, count]}  >
      <sphereBufferGeometry attach="geometry" args={[1, 4, 4]}/>  
      <meshPhongMaterial attach="material" color="#ffffff" flatShading ="true"/>
    </instancedMesh>
  )
}

ReactDOM.render(
  <Canvas
    gl={{ antialias: false, alpha: false }}
    camera={{ position: [0, 0, 400], near: 5, far: 1000 }}
    onCreated={({ gl }) => gl.setClearColor('pink')}>
    <ambientLight intensity={1.1} color="#222222" />
    <directionalLight color="#ffffff" position={[1, 1, 1]} />
    <Boxes count={1000}/>
    <Effects />
  </Canvas>,
  document.getElementById('root')
)

1 Ответ

0 голосов
/ 02 августа 2020

У меня была такая же проблема, ваш код кажется исправным, проблема в том, что вы пытаетесь привязать instancedMe sh с ref , я не знаю, почему не работает привязка со старой версией реакции, но я исправил ее, обновив пакет response и response-dom с версии ^ 16.9.0 до версии 16.10.2.

...