React应用中基于数据库数据动态生成3D模型的技术问询

Got it, let's walk through building this dynamic 3D scene with all your requirements. I'll use Three.js for the example since it's the go-to for web 3D, but the core logic translates to other frameworks like Babylon.js too.

First, we need the basic 3D infrastructure, plus our main transparent container:

• Initialize the scene, perspective camera, and WebGLRenderer.
• Create the main box with a transparent, see-through material — use MeshStandardMaterial with transparent: true, opacity: 0.3, and depthWrite: false to avoid weird rendering artifacts with overlapping shapes.
• Add orbit controls so users can rotate the scene (we'll link child shapes to this rotation later).

import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

// Scene setup
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// Main transparent box
const mainBoxSize = new THREE.Vector3(10, 10, 10);
const mainBoxGeometry = new THREE.BoxGeometry(...mainBoxSize);
const mainBoxMaterial = new THREE.MeshStandardMaterial({
  color: 0x42a5f5,
  transparent: true,
  opacity: 0.3,
  depthWrite: false,
  wireframe: false // Set to true if you want a wireframe look
});
const mainBox = new THREE.Mesh(mainBoxGeometry, mainBoxMaterial);
scene.add(mainBox);

// Lighting (critical for seeing transparent materials)
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);

// Orbit controls for rotation
const controls = new OrbitControls(camera, renderer.domElement);
controls.target.copy(mainBox.position);
camera.position.z = 20;

Next, we'll fetch shape data from your database and render them inside the main box, ensuring they fit against the edges:

• Assume your database returns an array of shape objects, each with type (cylinder/box), size (dimensions), and positionRelative (normalized values 0-1 for x/y/z, where 0 is the left/bottom/back edge and 1 is the right/top/front edge of the main box).
• Convert the relative position to absolute coordinates using the main box's size. For example, if the main box is 10 units wide, a relative x position of 0 would be -5 (half the width), 1 would be 5.
• Attach each child shape as a child of the main box — this makes rotation synchronization automatic later.

// Simulate database data fetch
async function fetchShapeData() {
  // Replace with your actual API call
  return [
    { type: 'box', size: [2, 4, 2], positionRelative: [0, 0.5, 0.5] },
    { type: 'cylinder', size: [1, 5, 1], positionRelative: [1, 0.5, 0.5] },
    { type: 'box', size: [3, 3, 3], positionRelative: [0.5, 0, 0.5] }
  ];
}

// Render shapes from database data
async function renderShapes() {
  const shapesData = await fetchShapeData();
  
  shapesData.forEach(shapeData => {
    let geometry;
    // Create geometry based on shape type
    switch(shapeData.type) {
      case 'box':
        geometry = new THREE.BoxGeometry(...shapeData.size);
        break;
      case 'cylinder':
        geometry = new THREE.CylinderGeometry(...shapeData.size);
        break;
      // Add more shape types as needed
    }
    
    const material = new THREE.MeshStandardMaterial({ color: getRandomColor() });
    const shape = new THREE.Mesh(geometry, material);
    
    // Convert relative position to absolute (fit to main box edges)
    const halfSize = mainBoxSize.multiplyScalar(0.5);
    shape.position.x = (shapeData.positionRelative[0] * mainBoxSize.x) - halfSize.x;
    shape.position.y = (shapeData.positionRelative[1] * mainBoxSize.y) - halfSize.y;
    shape.position.z = (shapeData.positionRelative[2] * mainBoxSize.z) - halfSize.z;
    
    // Attach to main box for synchronized rotation
    mainBox.add(shape);
  });
}

// Helper function for random colors
function getRandomColor() {
  return `#${Math.floor(Math.random()*16777215).toString(16)}`;
}

renderShapes();

To avoid overlapping shapes, we need to check for collisions before adding each new shape:

• Use THREE.Box3 to get the bounding box of each existing shape and the new shape.
• If the new shape's bounding box intersects with any existing one, you can either:
  1. Adjust the position (e.g., shift it along an axis until it doesn't overlap).
  2. Throw a warning (if the database data should already be collision-free).
  3. Skip rendering the shape (not ideal, but an option).

// Modified renderShapes function with collision check
async function renderShapes() {
  const shapesData = await fetchShapeData();
  const existingBoundingBoxes = [];
  
  shapesData.forEach(shapeData => {
    let geometry;
    switch(shapeData.type) {
      case 'box':
        geometry = new THREE.BoxGeometry(...shapeData.size);
        break;
      case 'cylinder':
        geometry = new THREE.CylinderGeometry(...shapeData.size);
        break;
    }
    
    const material = new THREE.MeshStandardMaterial({ color: getRandomColor() });
    const shape = new THREE.Mesh(geometry, material);
    
    // Calculate absolute position
    const halfSize = mainBoxSize.multiplyScalar(0.5);
    shape.position.x = (shapeData.positionRelative[0] * mainBoxSize.x) - halfSize.x;
    shape.position.y = (shapeData.positionRelative[1] * mainBoxSize.y) - halfSize.y;
    shape.position.z = (shapeData.positionRelative[2] * mainBoxSize.z) - halfSize.z;
    
    // Check for collisions
    const newBox = new THREE.Box3().setFromObject(shape);
    let hasCollision = false;
    existingBoundingBoxes.forEach(box => {
      if (newBox.intersectsBox(box)) {
        hasCollision = true;
        console.warn(`Collision detected for shape at ${shape.position} — adjusting position`);
        // Example adjustment: shift along X axis by 1 unit
        shape.position.x += shapeData.size[0] * 0.5 + box.max.x - newBox.min.x + 0.1;
        // Re-calculate bounding box after adjustment
        newBox.setFromObject(shape);
        // Re-check collision (you might need a loop here for multiple overlaps)
        hasCollision = box.intersectsBox(newBox);
      }
    });
    
    if (!hasCollision) {
      mainBox.add(shape);
      existingBoundingBoxes.push(newBox);
    }
  });
}

Since we attached all child shapes as children of the main box, rotating the main box will automatically rotate all child shapes with it. The OrbitControls we set up earlier lets users rotate the entire scene, but if you want to add a button to rotate the main box programmatically, here's how:

// Example: Rotate main box on button click
document.getElementById('rotateBtn').addEventListener('click', () => {
  mainBox.rotation.y += Math.PI / 4; // Rotate 45 degrees around Y axis
});

Don't forget to add the animation loop to render the scene continuously:

function animate() {
  requestAnimationFrame(animate);
  controls.update(); // Update orbit controls
  renderer.render(scene, camera);
}
animate();

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