console 命令行工具 X clear

console

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

// 2.创建相机
const camera = new THREE.PerspectiveCamera(80, innerWidth / innerHeight, 1, 1000);
camera.position.set(0, 10, 15);
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 gui = new dat.GUI();
let settings = {
    'overrideMaterial': false,
}
gui.open();
gui.add(settings, 'overrideMaterial').name('场景材质覆盖').onChange((visibility) => {
    if (visibility) {
        scene.overrideMaterial = new THREE.MeshBasicMaterial({ color: 0xffaa00 });
    } else {
        scene.overrideMaterial = null;
    }
});
// 物体
const geometry = new THREE.BoxGeometry(1, 1, 1); // 几何体

for (var i = 0; i < 100; i++) {
    const material = new THREE.MeshBasicMaterial({ color: 0xffaa00 }); // 材质
    material.color = new THREE.Color(Math.random(), Math.random(), Math.random())
    var cube = new THREE.Mesh(geometry, material);
    cube.position.set(Math.random() * 20 - 10, 3, Math.random() * 20 - 10)
    scene.add(cube);// 注意要把创建好的物体添加到场景中
}



// 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

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