Three.js 3D结构模拟优化及画布自适应调整技术问询

Great job getting your basic 3D structure sim up and running with Three.js! Let’s break down your questions with practical advice and code tweaks to level up your project.

1. Is your window resize handling correct for avoiding distortion? #

Your current resize logic is fundamentally correct—you’re hitting all the key steps needed to maintain proper aspect ratio and prevent stretching:

• Updating camera.aspect to match the new window dimensions
• Calling camera.updateProjectionMatrix() to apply the aspect ratio change to the camera’s projection
• Resizing the renderer to fit the new window size

That said, we can optimize it to avoid unnecessary repeated executions (resize events fire dozens of times as the user drags the window edge). Adding a debounce ensures we only run the resize logic once the user stops adjusting the window:

// Add a simple debounce utility
function debounce(func, delay = 100) {
  let timeoutId;
  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
}

// Replace your resize listener with the debounced version
window.addEventListener('resize', debounce(() => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
  // Add this for sharp rendering on high-DPI screens (a common missing best practice)
  renderer.setPixelRatio(window.devicePixelRatio);
}));

2. Performance considerations for requestAnimationFrame with static structures #

Since your scene is static (no animated objects), running requestAnimationFrame on every frame is unnecessary—it wastes CPU/GPU cycles rendering the exact same frame over and over. Here’s how to fix this:

Switch to event-driven rendering #

Only render when something actually changes in the scene:

• When the user interacts with OrbitControls
• When the window resizes
• If you add animations later

Modify your code like this:

// Replace your animate loop with a single render function
function render() {
  renderer.render(scene, camera);
}

// Trigger render whenever the user adjusts the camera
controls.addEventListener('change', render);

// Trigger render after resize (add this to your debounced resize handler)
window.addEventListener('resize', debounce(() => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setPixelRatio(window.devicePixelRatio);
  render(); // Render once after resize
}));

// Initial render to show the scene on load
render();

Extra performance tips #

• If you don’t need ultra-smooth edges, you can disable antialias in the renderer to save GPU resources: new THREE.WebGLRenderer({ antialias: false })—keep it enabled for now though, since it adds visual polish for minimal cost here.
• Ensure controls.enableDamping stays disabled (it’s off by default in your code) unless you need smooth camera movement, as it forces extra renders to maintain the damping effect.

3. Making materials look more realistic (metal/engineering style) #

Your current MeshStandardMaterial is a solid start, but we can tweak lighting and material properties to get that crisp, industrial metal finish:

1. Refine material properties #

Adjust metalness and roughness to lean into a polished metal look, and use a cooler, steel-like base color:

const material = new THREE.MeshStandardMaterial({
  color: 0x7f8c8d, // Muted steel gray
  metalness: 0.9, // Higher value = more metallic reflection
  roughness: 0.1, // Lower value = smoother, shinier surface
});

2. Add shadows for depth #

Engineering structures feel far more tangible with realistic shadows. Enable shadow mapping and configure your light to cast shadows:

// Enable soft shadow mapping
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap; // Softer, more natural shadows

// Configure directional light to cast shadows
directionalLight.castShadow = true;
directionalLight.shadow.mapSize.width = 2048; // Higher = sharper shadows (minor GPU cost)
directionalLight.shadow.mapSize.height = 2048;
directionalLight.shadow.camera.near = 0.5;
directionalLight.shadow.camera.far = 50;

// Make your pillar interact with shadows
pillar.castShadow = true;
pillar.receiveShadow = true;

// Let the grid receive shadows too
gridHelper.receiveShadow = true;

3. Add supplementary lighting #

A single directional light can leave harsh, flat shadows. Add a hemisphere light to fill in dark areas with subtle ambient color, mimicking reflected environment light:

const hemisphereLight = new THREE.HemisphereLight(0xffffff, 0x444444, 0.3);
scene.add(hemisphereLight);

Modified Full Code #

Here’s your complete code with all the above tweaks applied:

<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <title>3D Structure Simulation</title>
    <style>
        body { margin: 0; overflow: hidden; background-color: #111; }
        canvas { display: block; }
    </style>
</head>
<body>
<script type="importmap">
    {
        "imports": {
            "three": "https://unpkg.com/three@0.160.0/build/three.module.js",
            "three/addons/": "https://unpkg.com/three@0.160.0/examples/jsm/"
        }
    }
</script>
<script type="module">
    import * as THREE from 'three';
    import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

    const scene = new THREE.Scene();
    scene.background = new THREE.Color(0x222222);

    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.set(5, 5, 5);

    const renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.shadowMap.enabled = true;
    renderer.shadowMap.type = THREE.PCFSoftShadowMap;
    document.body.appendChild(renderer.domElement);

    const controls = new OrbitControls(camera, renderer.domElement);

    const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
    scene.add(ambientLight);

    const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
    directionalLight.position.set(5, 10, 5);
    directionalLight.castShadow = true;
    directionalLight.shadow.mapSize.width = 2048;
    directionalLight.shadow.mapSize.height = 2048;
    directionalLight.shadow.camera.near = 0.5;
    directionalLight.shadow.camera.far = 50;
    scene.add(directionalLight);

    const hemisphereLight = new THREE.HemisphereLight(0xffffff, 0x444444, 0.3);
    scene.add(hemisphereLight);

    const geometry = new THREE.BoxGeometry(1, 4, 1);
    const material = new THREE.MeshStandardMaterial({ 
        color: 0x7f8c8d, 
        metalness: 0.9, 
        roughness: 0.1 
    });
    const pillar = new THREE.Mesh(geometry, material);
    pillar.castShadow = true;
    pillar.receiveShadow = true;
    scene.add(pillar);

    const gridHelper = new THREE.GridHelper(10, 10);
    gridHelper.receiveShadow = true;
    scene.add(gridHelper);

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

    controls.addEventListener('change', render);

    function debounce(func, delay = 100) {
        let timeoutId;
        return (...args) => {
            clearTimeout(timeoutId);
            timeoutId = setTimeout(() => func.apply(this, args), delay);
        };
    }

    window.addEventListener('resize', debounce(() => {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.setPixelRatio(window.devicePixelRatio);
        render();
    }));

    // Initial render
    render();
</script>
</body>
</html>

内容的提问来源于stack exchange，提问作者mobile aji