console 命令行工具 X clear

console

// 1.创建场景 
const scene = new THREE.Scene();

// 2.创建相机
const camera = new THREE.PerspectiveCamera(80, innerWidth / innerHeight, 1, 1000);
camera.position.set(50, 0, 50);
camera.lookAt(0, 0, 0);
scene.add(camera);

// 3.创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);
renderer.setClearColor(0x000000);

// 4. 给场景添加环境贴图
const loader = new THREE.CubeTextureLoader();
let textureCube = loader.load(['https://threejs.org/examples/textures/cube/Bridge2/posx.jpg', 'https://threejs.org/examples/textures/cube/Bridge2/negx.jpg', 'https://threejs.org/examples/textures/cube/Bridge2/posy.jpg', 'https://threejs.org/examples/textures/cube/Bridge2/negy.jpg', 'https://threejs.org/examples/textures/cube/Bridge2/posz.jpg', 'https://threejs.org/examples/textures/cube/Bridge2/negz.jpg']);
scene.background = textureCube;
// scene.environment = textureCube;


// 5. 鼠标交互
const controls = new THREE.OrbitControls(camera, renderer.domElement);

// 6.渲染 
function render() {
    requestAnimationFrame(render);
    renderer.render(scene, camera);
}
render()

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body style="margin:0;">
</body>
</html>

SOURCE

本项目引用的自定义外部资源