three.js入门练习 (1)

threejs入门

• 本文引用https://cdn.bootcss.com/three...
• 需对三维图形学有一定的认知， 掌握javascript

基础了解

1. 物体
2. 场景（scene）
3. 相机（camera）
4. 渲染器（rander）

开始

// 常量定义
const dom = document.getELementById('mycanvas');
let scene = new THREE.Scene(); // 创建场景
let camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.01, 10); // 创建远景相机
camera.position.z = 1;
let geometry = new THREE.BoxGeometry(0.2,0.2,0.2); // 创建一个盒子
let material = new THREE.MeshNormalMaterial(); // 创建材质
let mesh = new THREE.Mesh(geometry, material); // 转换成网孔对象的基类
scene.add(mesh); // 将物体放入场景内
let renderer = new THREE.WebGLRenderer({ 
    antialias: true, 
    canvas: dom
}); // 创建渲染器
renderer.setClearColor(0xf3f5f9);
renderer.setSize(window.innerWidth, window.innerHeight);

renderer.render(scene, camera); // 将我们定义的场景和相机渲染出来

如上 会绘制一个正方体在页面， 我们让他动起来

function render(){
    requestAnimationFrame(render)
    
    mesh.rotation.x += 0.01
    mesh.rotation.y += 0.01

    renderer.render(scene, camera)
}

render()

我们刷新页面， 会看到一个多色的正方体
你可以尝试去切换材质 看看会发生什么