如何在 Three.js 中为图像设置背景？

Question

抱歉，我是 Three.js 的新手，我知道（大部分）基础知识，但不知何故我不知道如何设置背景图像。我需要将背景图像设置为太空主题背景，因为在我的网站中我试图为游戏创造不同的世界。但是，背景只是黑色。我希望它是一个图像，而不是一种颜色。我希望它是一个图像，因为太空主题网站的背景的纯色看起来很蹩脚。

我没有尝试任何事情，因为，我只是不知道该怎么做。需要帮助！

Answer 1

3D 世界中的背景的理解略有不同。 3D 场景填充空间，其内容使用 projection matrix

 投影到 2D 屏幕上。背景的

Classical方式，如纹理或图像，可以通过两种方式设置：第一种是使用flat

属性覆盖整个屏幕的

scene.background

纹理，第二种更适合您的情况（移动相机，然后您就会看到），是一个立方体（

skybox

），其每一面都充满纹理。

其他方式，您可以考虑的是：

等距矩形纹理
视频纹理
HDR 纹理
自定义着色器 BG 纹理

*{margin:0}

<script type="importmap">
  {
"imports": {
  "three": "https://unpkg.com/[email protected]/build/three.module.js",
  "three/addons/": "https://unpkg.com/[email protected]/examples/jsm/"
}
  }
</script>

<script type="module">
import * as THREE from "three";
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 20;

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const textureLoader = new THREE.TextureLoader();
const bgTexture = textureLoader.load('https://raw.githubusercontent.com/mrdoob/three.js/refs/heads/dev/examples/textures/planets/moon_1024.jpg');
scene.background = bgTexture;

const coneRadius = 5;
const coneHeight = 10;

const coneG = new THREE.ConeGeometry(coneRadius, coneHeight, 16);
const coneM = new THREE.MeshBasicMaterial({
    color: 0x00ff00,
    wireframe: true
});
const cone = new THREE.Mesh(coneG, coneM);

scene.add(cone);

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

let rotationSpeedY = 0.005;
let groupRotationY = 0;

function animate() {
    requestAnimationFrame(animate);

    groupRotationY += rotationSpeedY;
    cone.rotation.set(0, groupRotationY, 0);

    controls.update();
    renderer.render(scene, camera);
}

function resizeView() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    
    renderer.setSize(window.innerWidth, window.innerHeight);
}

window.addEventListener('resize', resizeView);

animate();

</script>

2.

*{margin:0}

 <script type="importmap">
      {
    "imports": {
      "three": "https://unpkg.com/[email protected]/build/three.module.js",
      "three/addons/": "https://unpkg.com/[email protected]/examples/jsm/"
    }
      }
    </script>

    <script type="module">
import * as THREE from "three";
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 20;

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const loader = new THREE.CubeTextureLoader();
const skyboxTexture = loader.load([
    'https://raw.githubusercontent.com/mrdoob/three.js/refs/heads/dev/examples/textures/cube/MilkyWay/dark-s_px.jpg', // P X
    'https://raw.githubusercontent.com/mrdoob/three.js/refs/heads/dev/examples/textures/cube/MilkyWay/dark-s_nx.jpg', // N X
    'https://raw.githubusercontent.com/mrdoob/three.js/refs/heads/dev/examples/textures/cube/MilkyWay/dark-s_py.jpg', // P Y
    'https://raw.githubusercontent.com/mrdoob/three.js/refs/heads/dev/examples/textures/cube/MilkyWay/dark-s_ny.jpg', // N Y
    'https://raw.githubusercontent.com/mrdoob/three.js/refs/heads/dev/examples/textures/cube/MilkyWay/dark-s_pz.jpg', // P Z
    'https://raw.githubusercontent.com/mrdoob/three.js/refs/heads/dev/examples/textures/cube/MilkyWay/dark-s_nz.jpg'  // N Z
]);

scene.background = skyboxTexture;

const coneRadius = 5;
const coneHeight = 10;

const coneG = new THREE.ConeGeometry(coneRadius, coneHeight, 16);
const coneM = new THREE.MeshBasicMaterial({
    color: 0x00ff00,
    wireframe: true
});
const cone = new THREE.Mesh(coneG, coneM);

scene.add(cone);

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

let rotationSpeedY = 0.005;
let groupRotationY = 0;

function animate() {
    requestAnimationFrame(animate);

    groupRotationY += rotationSpeedY;
    cone.rotation.set(0, groupRotationY, 0);

    controls.update();
    renderer.render(scene, camera);
}

function resizeView() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    
    renderer.setSize(window.innerWidth, window.innerHeight);
}

window.addEventListener('resize', resizeView);

animate();


    </script>