灯光在 expo-three / threejs 中不起作用

Question

有人可以帮助我吗？我最近发现我可以将 ThreeJS 库与 react-native 一起使用，这太棒了！我做了一个小实验并成功了，但我在灯光方面遇到了一些麻烦。不幸的是，我无法更改项目中的灯光，而是该项目有一些默认的环境光。有谁知道我该如何解决这个问题？

按照下面的代码：

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import Expo from 'expo';
import {Scene, Mesh, MeshBasicMaterial, PerspectiveCamera, BoxBufferGeometry} from 'three';
import ExpoTHREE, {THREE, Renderer} from 'expo-three';
import {ExpoWebGLRenderingContext, GLView} from 'expo-gl';

interface CanvasProps{
  width: number;
  height: number;
}

interface Props extends ExpoWebGLRenderingContext{
  canvas: CanvasProps;
}

export default function App(){

  async function onContextCreate(gl: Props){
    //THREE.js code
    const scene = new Scene();
    const camera = new PerspectiveCamera(
      75,
      gl.drawingBufferWidth/gl.drawingBufferHeight,
      0.1,
      1000
    );

    gl.canvas = {width: gl.drawingBufferWidth, height: gl.drawingBufferHeight}
    camera.position.z = 2;

    const renderer = new Renderer({gl});
    renderer.setSize(gl.drawingBufferWidth, gl.drawingBufferHeight);

    const geometry =  new BoxBufferGeometry(1, 1, 1);
    const material = new MeshBasicMaterial({
      color: 'blue'
    });
    const cube = new Mesh(geometry, material);
    scene.add(cube);

    function render(){
      requestAnimationFrame(render);
      if(cube.rotation.x <= 12.555){
        cube.rotation.x += 0.01;
      }else{
        cube.rotation.x = 0;
      }

      if(cube.rotation.y <= 12.555){
        cube.rotation.y += 0.01;
      }else{
        cube.rotation.y = 0;
      }


      renderer.render(scene, camera);
      gl.endFrameEXP();
    }

    render();
  } 
  
  return (
    <View style={styles.container}>
      <GLView 
        onContextCreate={onContextCreate}
        style={styles.GLView}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  GLView: {
    width: 500,
    height: 500
  }
});

Github: https://github.com/jnunes-ds/3d-app/

Answer 1

您在代码片段中使用了 MeshBasicMaterial，它对灯光没有反应。这就是所谓的未点亮 material。换一个试试，比如 MeshStandardMaterial.

灯光在 expo-three / threejs 中不起作用

Lights don't work in expo-three / threejs

javascript

three.js

typescript

react-native