如何解决GLView不会显示在React Native中吗?但是没有错误吗?
我正在尝试获取一个基本的Three.js场景以显示在我的RN应用中。 Ive逐字逐字地https://github.com/expo/expo-three示例,但是提供的小吃已经过时,Im在这里丢失了。我已经正确导入了所有内容,并且在控制台中没有错误-但没有任何显示。
使用功能组件,我有:
React.useEffect(() => {
// Clear the animation loop when the component unmounts
return () => clearTimeout(timeout);
},[]);
<GLView
style={{ flex: 1,zIndex: 6,width: wp('100%'),height: hp('50%') }}
onContextCreate={async (gl: ExpoWebGLRenderingContext) => {
const { drawingBufferWidth: width,drawingBufferHeight: height } = gl;
const sceneColor = 0x6ad6f0;
console.log('hello world');
// Create a WebGLRenderer without a DOM element
const renderer = new Renderer({ gl });
renderer.setSize(width,height);
renderer.setClearColor(sceneColor);
const camera = new PerspectiveCamera(70,width / height,0.01,1000);
camera.position.set(2,5,5);
const scene = new Scene();
scene.fog = new Fog(sceneColor,1,10000);
scene.add(new GridHelper(10,10));
const ambientLight = new AmbientLight(0x101010);
scene.add(ambientLight);
const pointLight = new PointLight(0xffffff,2,1000,1);
pointLight.position.set(0,200,200);
scene.add(pointLight);
const spotLight = new SpotLight(0xffffff,0.5);
spotLight.position.set(0,500,100);
spotLight.lookAt(scene.position);
scene.add(spotLight);
const cube = new BoxBufferGeometry(1.0,1.0,1.0)
scene.add(cube);
camera.lookAt(cube.position);
function update() {
cube.rotation.y += 0.05;
cube.rotation.x += 0.025;
}
// Setup an animation loop
const render = () => {
timeout = requestAnimationFrame(render);
update();
renderer.render(scene,camera);
gl.endFrameEXP();
};
render();
}}
/>
我知道onContextCreate()
不会被调用,因为没有“ hello world”被打印到控制台。 three.js不能再在React本机中工作了吗?这里有什么问题,在哪里可以找到有效的示例?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。