threejs入门

• 本文引用
• 需对三维图形学有一定的认知， 掌握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()

我们刷新页面， 会看到一个多色的正方体