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();
// loader.setPath('https://unpkg.com/three@0.145.0/examples/textures/cube/Bridge2/');
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;

// 控制
const gui = new dat.GUI();
let settings = {
    '设置环境纹理': true,
}
var cGui = gui.addFolder('控制操作');
cGui.open();
cGui.add(settings, '设置环境纹理').onChange((visibility) => {
    if (visibility) {
        scene.environment = textureCube;
    } else {
        scene.environment = null;
    }
});
// 物体
const sphereGeometry = new THREE.SphereGeometry(30, 32, 16);
const standardMaterial = new THREE.MeshStandardMaterial({
    metalness: 1, //金属度
    roughness: 0.0, //材质粗糙度
});
const sphere = new THREE.Mesh(sphereGeometry, standardMaterial);
scene.add(sphere)
// 5. 鼠标交互
const controls = new THREE.OrbitControls(camera, renderer.domElement);
// 6. 创建灯光
// 添加环境光
const ambientLight = new THREE.AmbientLight(0xffffff);
ambientLight.castShadow = true
scene.add(ambientLight)
// 7.渲染 
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

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