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, 5, 5);
// camera.lookAt(0, 0, 20);
scene.add(camera);

// 3. 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x000000);
renderer.shadowMap.enabled = true //1.设置渲染器开启阴影的计算
document.body.appendChild(renderer.domElement);
// 4. 物体
// 几何体: 球体
const sphereGeometry = new THREE.SphereGeometry(1, 30, 20);
const standardMaterial = new THREE.MeshStandardMaterial({ color: 0xa50aaa });
const sphere = new THREE.Mesh(sphereGeometry, standardMaterial);
sphere.castShadow = true;  //4. 设置物体投射阴影
scene.add(sphere)
// 添加平面
const planeGeometry = new THREE.PlaneGeometry(10, 10);
const planeMaterial = new THREE.MeshStandardMaterial({ // 生成材质
    color: 0xcccccc,
});
const plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.position.set(0, -1, 0);
plane.rotation.x = -Math.PI / 2;
plane.receiveShadow = true //5. 设置物体接收阴影
scene.add(plane)
// 5.灯光
// 环境光
const light = new THREE.AmbientLight(0xffffff, 0.5); // soft white light
scene.add(light);
// 直射光
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(10, 10, 10)
directionalLight.castShadow = true //directionalLight.castShadow = true
scene.add(directionalLight);

// 6.创建控制器
let controls = new THREE.OrbitControls(camera, renderer.domElement)

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

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