console 命令行工具 X clear

console

// 1. 创建场景
const scene = new THREE.Scene();
// 2. 创建相机
const camera = new THREE.PerspectiveCamera(90, innerWidth / innerHeight, 1, 1000);
camera.position.set(0, 6, 6);
scene.add(camera)
// 3. 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(innerWidth, innerHeight);
renderer.setClearColor(0x000000)
renderer.shadowMap.enabled = true
document.body.appendChild(renderer.domElement)
// 4. 创建物体
// 立方体
const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
const cubeMaterial = new THREE.MeshStandardMaterial({ color: 0xa50000 });
const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.position.set(0, 0, 0);
cube.castShadow = true
scene.add(cube);
// 球体
const sphereGeometry = new THREE.SphereGeometry(0.5, 36, 36);
const sphereMaterial = new THREE.MeshStandardMaterial({ color: 0x009494 });
const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
sphere.position.set(-2, 0, 0);
sphere.castShadow = true
scene.add(sphere);
// 平面
const planeGeometry = new THREE.PlaneGeometry(10, 10);
const planeMaterial = new THREE.MeshStandardMaterial({ color: 0xffffff, side: THREE.DoubleSide });
const plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.position.set(0, -1);
plane.rotateX(Math.PI / 2);
plane.receiveShadow = true
scene.add(plane);

// 5. 创建灯光
// 创建环境光
const ambientLight = new THREE.AmbientLight(0xffffff);
ambientLight.castShadow = true
scene.add(ambientLight)
// 6. 鼠标交互
const controls = new THREE.OrbitControls(camera, renderer.domElement);
// gui
const gui = new dat.GUI();
var cGui = gui.addFolder('环境光属性');
cGui.open();
cGui.addColor({ color: '#ffffff' }, 'color').name('环境光颜色').onChange(function (value) {
    ambientLight.color = new THREE.Color(value);
})
cGui.add(ambientLight, 'intensity').min(0).max(1).step(0.1).name('光照强度')

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

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