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

【问题标题】：Lights don't work in expo-three / threejs灯在 expo-three / threejs 中不起作用
【发布时间】：2021-10-02 19:29:51
【问题描述】：

有人可以帮助我吗？我最近发现我可以将 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/

【问题讨论】：

标签： javascript typescript react-native three.js

【解决方案1】：

您在代码 sn-p 中使用了MeshBasicMaterial，它不会对灯光做出反应。这是一种所谓的未点燃材料。尝试使用不同的方法，例如 MeshStandardMaterial。

【讨论】：