qml 使用 three.js 绘制 3D 之添加材质灯光和阴影（二）

本文链接：https://blog.csdn.net/qq_32927705/article/details/108003720

本文详细介绍了如何在QML中利用Three.js添加材质、灯光及阴影，通过具体代码示例展示了开启阴影渲染的必要条件，包括渲染器、灯光和物体的相关设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

qml 使用 three.js 绘制 3D 之添加材质灯光和阴影（二）

简介

基于上一个例子代码做了一些小改动,添加了材质灯光以及阴影----------------> 借鉴的文章

开启阴影的条件

只要满足以下几个基本条件。

渲染器开启阴影渲染：renderer.shadowMapEnabled = true; // renderer.shadowMap.enabled = true;
灯光需要开启“引起阴影”：spotLight.castShadow = true;
物体需要开启“引起阴影”和“接收阴影”： plane.receiveShadow = true;;

代码部分

main.qml
注意: import 导出的 js 文件名已经改变了

import QtQuick 2.9
import QtQuick.Window 2.2
import QtCanvas3D 1.1
import "qrc:/Src_JS/Src_javascript/Add_material_lights_and_shadows.js" as Render             
Window
{
 visible: true
 width: 640
 height: 480
 title: qsTr("Hello World")


 Canvas3D {

     id: canvas;
     anchors.fill: parent;

     onInitializeGL:
     {
         Render.initializeGL(canvas);
     }

     onPaintGL:
     {
         Render.paintGL(canvas);
     }

     onResizeGL:
     {
         Render.resizeGL(canvas);
     }
 }


}

three.js 调用部分
Add_material_lights_and_shadows.js

Qt.include("three.js")

var camera, scene, renderer,light;
var cube,line;
var leftLight;
var rightLight;
var material;
var flagt =false;
var count = 0;
var sphere;

function initializeGL(canvas)
{


    // 设置场景
    scene = new THREE.Scene();


    // 设置相机相关参数
    camera = new THREE.PerspectiveCamera(45, canvas.width / canvas.height, 0.1, 1000);


    // 创建一个渲染器
    renderer = new THREE.Canvas3DRenderer(
                { canvas: canvas, antialias: true, devicePixelRatio: canvas.devicePixelRatio ,alpha:true});
    renderer.setSize(canvas.width, canvas.height);
    renderer.setClearColor(0xEEEEEE,1.0);
    renderer.shadowMap.enabled = true;
    
    
     // 设置画布背景色是透明的  需要在 初始化 renderer 的时候附带上  alpha:true
    // renderer.setClearAlpha(0.0);


    //创建一个水平面
    var planeGeometry = new THREE.PlaneGeometry(60, 20);
    var planeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff});
    var plane = new THREE.Mesh(planeGeometry, planeMaterial);
    plane.receiveShadow = true;

    //水平面旋转并且设置位置
    plane.rotation.x = -0.5 * Math.PI;
    plane.position.x = 15;
    plane.position.y = 0;
    plane.position.z = 0;

    //将水平面添加到场景中
    scene.add(plane);

    //创建一个方块
    var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
    var cubeMaterial = new THREE.MeshLambertMaterial({color: 0xff0000});
    cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
    cube.castShadow = true;

    //设置方块位置
    cube.position.x = -4;
    cube.position.y = 3;
    cube.position.z = 0;

    //将方块添加到场景中
    scene.add(cube);

    //创建一个球体
    var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
    var sphereMaterial = new THREE.MeshLambertMaterial({color: 0x7777ff});
    var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);

    //设置球体位置
    sphere.position.x = 20;
    sphere.position.y = 4;
    sphere.position.z = 2;
    sphere.castShadow = true;

    //将球体添加到场景中
    scene.add(sphere);

    //将相机位置和视点放在场景中间
    camera.position.x = -30;
    camera.position.y = 40;
    camera.position.z = 30;
    camera.lookAt(scene.position);

    //添加光源实现阴影效果
    var spotLight = new THREE.SpotLight(0xffffff);
    spotLight.position.set(-40, 60, -10);
    spotLight.castShadow = true;
    scene.add(spotLight);

}




function resizeGL(canvas)
{

    camera.aspect = canvas.width / canvas.height;
    camera.updateProjectionMatrix();

    renderer.setPixelRatio(canvas.devicePixelRatio);
    renderer.setSize(canvas.width, canvas.height);

}


function paintGL(canvas)
{
    renderer.render(scene, camera);
}