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, -200); //设置相机位置
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 material = new THREE.MeshBasicMaterial({ color: 0xb01ff0 }); // 材质
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);// 注意要把创建好的物体添加到场景中
// 5. GUI
const gui = new dat.GUI();
var attrs = {
pos:"x",
speed: 0.1
}
gui.add(attrs,'pos').options(['x', 'y', 'z']).name('移动方向')
gui.add(attrs,'speed').options({'低速': 0.1, '中速':0.2, '快速': 0.5}).name('移动速度')
// 6. 渲染
function render() {
cube.position[attrs.pos] += attrs.speed*1;
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>