console 命令行工具 X clear

console

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

// 2.创建相机
var width = window.innerWidth; //窗口宽度
var height = window.innerHeight; //窗口高度
var k = width / height; //窗口宽高比
const camera = new THREE.PerspectiveCamera(90, k, 1, 1000);
camera.position.set(0, 0, -600); //设置相机位置
camera.lookAt(0, 0, 0);
scene.add(camera);

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

// 4. 创建物体
const geometry = new THREE.BoxGeometry(100, 100, 100); // 几何体
const material1 = new THREE.MeshBasicMaterial({ color: 0xb01ff0 }); // 材质
var cube1 = new THREE.Mesh(geometry, material1);
cube1.position.set(200,0,0)
scene.add(cube1);// 注意要把创建好的物体添加到场景中

const material2 = new THREE.MeshBasicMaterial({ color: 0xff1ff0 }); // 材质
var cube2 = new THREE.Mesh(geometry, material2);
cube2.position.set(-200,0,0)
scene.add(cube2);// 注意要把创建好的物体添加到场景中

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

// GUI
const gui = new dat.GUI();
var palette = {
  color1: '#FF0000',       // CSS string
  color2: [ 0, 128, 255 ], // RGB array
  color3: [ 0, 128, 255, 0.3 ],      // RGBA
  color4: { h: 350, s: 0.9, v: 0.3 } // Hue, saturation, value
};
gui.addColor(palette, 'color1').name('CSS颜色值').onChange((val)=>{
    material1.color= new THREE.Color(val);
});
gui.addColor(palette, 'color2').name('RGB颜色值').onChange((val)=>{
    let rgb = `rgb(${val[0].toFixed(0)},${val[1].toFixed(0)},${val[2].toFixed(0)})`
    material2.color= new THREE.Color(rgb);
});

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

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