threejs 受光照影响的材质 MeshStandardMaterial_threejs 支持光照材质-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_36152801/article/details/145694964

如果是MeshMaterial 是不受光照影响，无论是否有光源，都是一样，也就是没有关照后阴影的感觉。

展示：可以看出明暗的变化的:

代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Three.js OrbitControls Example with Grid and MeshStandardMaterial</title>
  <style>
    body { margin: 0; overflow: hidden; }
    canvas { display: block; }
  </style>
</head>
<body>
  <script type="module">
    import * as THREE from "three";
    import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

    // 创建场景
    const scene = new THREE.Scene();
    
    // 创建相机
    const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
    camera.position.z = 5; // 设置相机位置

    // 创建渲染器
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    // 创建一个立方体，使用 MeshStandardMaterial 替换 MeshBasicMaterial
    const geometry = new THREE.BoxGeometry();
    const material = new THREE.MeshStandardMaterial({
      color: 0x00ff00,  // 绿色
      roughness: 0.5,   // 半粗糙
      metalness: 0.5    // 半金属
    });
    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);

    // 添加网格
    const gridHelper = new THREE.GridHelper(10, 10); // 网格大小和细分数量
    scene.add(gridHelper);

    // 添加一个强度更高的环境光
    const ambientLight = new THREE.AmbientLight(0xfffff9,0.5); // 环境光，增加强度
    scene.add(ambientLight);

    // 添加一个更亮的点光源
    const pointLight = new THREE.PointLight(0xffffff, 2, 100); // 强度加大
    pointLight.position.set(5, 5, 5); // 设置点光源位置
    scene.add(pointLight);

    // 使用 OrbitControls 来控制相机
    const controls = new OrbitControls(camera, renderer.domElement);
    controls.enableDamping = true; // 启用阻尼效果
    controls.dampingFactor = 0.25; // 阻尼系数
    controls.screenSpacePanning = false; // 不允许屏幕空间平移

    // 动画循环
    function animate() {
      requestAnimationFrame(animate);

      // 更新控制器
      controls.update(); 

      // 旋转立方体
      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;

      // 渲染场景
      renderer.render(scene, camera);
    }

    animate(); // 启动动画

    // 监听窗口大小变化
    window.addEventListener('resize', () => {
      renderer.setSize(window.innerWidth, window.innerHeight);
      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();
    });
  </script>
</body>
</html>