在Lightning Web Component中使用Three.js遇渲染异常求助

问题描述 #

尝试将Three.js与Lightning Web Component（LWC）结合，用于展示.fbx或.glb格式的3D渲染内容，但组件在Lightning App Builder中无任何渲染输出。已将Three.js库添加为静态资源，怀疑是Salesforce限制或安全策略导致问题。

现有代码 #

.html文件

<template>
  <h1>Three JS test</h1>
  <div class="container">
      <div class="canvas-container"></div>
  </div>
</template>

.js文件

import { LightningElement } from 'lwc';
import { loadScript } from 'lightning/platformResourceLoader';
import THREE_JS from '@salesforce/resourceUrl/threeJS'; 

export default class ThreeJSComp extends LightningElement {
    renderedCallback() {
        // Load Three.js library dynamically
        loadScript(this, THREE_JS)
            .then(() => {
                // Once the library is loaded, you can start your Three.js setup
                console.log("init three");
                this.initializeThreeJS();
            })
            .catch(error => {
                console.log('Error loading Three.js:',error);
            });
    }

    initializeThreeJS() {
        const container = this.template.querySelector('.canvas-container');

        // Create a scene, camera, and renderer
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(75, container.clientWidth / container.clientHeight, 0.1, 1000);
        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(container.clientWidth, container.clientHeight);
        container.appendChild(renderer.domElement);

        // Create a cube 
        const geometry = new THREE.BoxGeometry();
        const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
        const cube = new THREE.Mesh(geometry, material);
        scene.add(cube);

        camera.position.z = 5;

        // Animation loop
        const animate = () => {
            requestAnimationFrame(animate);
            cube.rotation.x += 0.01;
            cube.rotation.y += 0.01;
            renderer.render(scene, camera);
        };
        animate();
        console.log(typeof scene);
    }
}

修复方案 #

1. 防止重复初始化Three.js #

renderedCallback会多次触发，导致脚本重复加载和场景重复初始化，添加标记控制执行逻辑：

import { LightningElement } from 'lwc';
import { loadScript } from 'lightning/platformResourceLoader';
import THREE_JS from '@salesforce/resourceUrl/threeJS'; 

export default class ThreeJSComp extends LightningElement {
    isThreeLoaded = false;

    renderedCallback() {
        if (this.isThreeLoaded) return;
        loadScript(this, THREE_JS)
            .then(() => {
                console.log("init three");
                this.initializeThreeJS();
                this.isThreeLoaded = true;
            })
            .catch(error => {
                console.error('Error loading Three.js:', error);
            });
    }

    // 保留原initializeThreeJS方法，后续修改见其他步骤
}

2. 给容器设置明确尺寸 #

LWC默认容器无固定宽高，导致clientWidth/clientHeight为0，无法渲染Canvas。新增.css文件：

.container {
    width: 100%;
    height: 400px;
    padding: 1rem;
    box-sizing: border-box;
}
.canvas-container {
    width: 100%;
    height: 100%;
}

3. 修复材质与光照问题 #

MeshBasicMaterial不受光照影响，无光源时模型可能不可见，替换为带光照的材质并添加光源：

initializeThreeJS() {
    const container = this.template.querySelector('.canvas-container');

    const scene = new THREE.Scene();
    scene.background = new THREE.Color(0xf0f0f0); // 添加背景便于观察

    const camera = new THREE.PerspectiveCamera(75, container.clientWidth / container.clientHeight, 0.1, 1000);
    
    const renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(container.clientWidth, container.clientHeight);
    renderer.setPixelRatio(window.devicePixelRatio); // 适配高DPI屏幕
    container.appendChild(renderer.domElement);

    // 添加光源
    const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
    scene.add(ambientLight);
    const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
    directionalLight.position.set(5, 5, 5);
    scene.add(directionalLight);

    // 使用MeshStandardMaterial替代MeshBasicMaterial
    const geometry = new THREE.BoxGeometry();
    const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);

    camera.position.z = 5;

    // 监听窗口 resize 事件
    const handleResize = () => {
        camera.aspect = container.clientWidth / container.clientHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(container.clientWidth, container.clientHeight);
    };
    window.addEventListener('resize', handleResize);

    // 动画循环
    const animate = () => {
        requestAnimationFrame(animate);
        cube.rotation.x += 0.01;
        cube.rotation.y += 0.01;
        renderer.render(scene, camera);
    };
    animate();

    // 保存实例便于销毁
    this.renderer = renderer;
    this.scene = scene;
    this.handleResize = handleResize;
}

4. 清理资源防止内存泄漏 #

在组件销毁时移除事件监听并销毁Three.js实例：

disconnectedCallback() {
    window.removeEventListener('resize', this.handleResize);
    if (this.renderer) {
        this.renderer.dispose();
    }
    if (this.scene) {
        this.scene.traverse(obj => {
            if (obj.geometry) obj.geometry.dispose();
            if (obj.material) obj.material.dispose();
        });
    }
}

5. 检查Salesforce安全策略 #

• 确保静态资源中的Three.js为完整版，避免使用精简版缺失功能
• 查看浏览器控制台的CSP报错，若有跨域问题，在Salesforce设置中添加对应信任站点（加载外部模型时需要）

内容的提问来源于stack exchange，提问作者THE Ramy