three.js 添加光源无效?

作者站长头像
站长
· 阅读数 6

js最后一段是添加光源的,但是不生效.代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="canvas" style="margin-top: 200px;margin-left: 100px;"></div>
</body>
<script src="https://cdn.jsdelivr.net/npm/three@0.134.0/build/three.min.js"></script>
<script>
    // 创建3D场景对象Scene
    const scene = new THREE.Scene();

    //创建一个长方体几何对象Geometry
    const geometry = new THREE.BoxGeometry(100, 100, 100);
    //创建一个材质对象Material

    // MeshLambertMaterial  漫反射材质受光照影响
    // MeshBasicMaterial  基础材质不受影响
    const material = new THREE.MeshLambertMaterial({
        color: 0xff0000,//设置材质颜色
        transparent: true,//开启透明
        opacity: 0.8,//设置透明度
    });
    const mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
    mesh.position.set(0, 10, 0); //设置网格模型在三维空间中的位置坐标,默认是坐标原点

    // 将模型mesh添加到scene
    mesh.receiveShadow = true; // 物体接收阴影
    mesh.castShadow = true; // cast投射,方块投射阴影 
    scene.add(mesh);
    const edges = new THREE.EdgesHelper(mesh, '#000');//设置边框,可以旋转
    edges.position.set(0, 10, 0); // 边框也需要设置位置坐标
    // 将边框edges添加到scene
    scene.add(edges);

    const width = 800; //宽度
    const height = 500; //高度
    const camera = new THREE.PerspectiveCamera(30, width / height, 1, 3000); 
    // 实例化一个透视投影相机对象
    camera.position.set(300, 200, 200);
    camera.lookAt(mesh.position);//指向mesh对应的位置

    // 创建渲染器对象
    const renderer = new THREE.WebGLRenderer();
    renderer.setClearColor('#ffffff')
    renderer.setSize(width, height);
    renderer.render(scene, camera); //执行渲染操作
    document.getElementById('canvas').appendChild(renderer.domElement);

    //点光源:两个参数分别表示光源颜色和光照强度
    const pointLight = new THREE.PointLight(0xffffff,1)
    pointLight.position.set(300,100,300);
    scene.add(pointLight);

</script>

</html>
回复
1个回答
avatar
test
2024-06-29

光源的添加要在 renderer 之前

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容