// 常量定义 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); // 将咱们定义的场景和相机渲染出来
如上 会绘制一个正方体在页面, 咱们让他动起来javascript
function render(){ requestAnimationFrame(render) mesh.rotation.x += 0.01 mesh.rotation.y += 0.01 renderer.render(scene, camera) } render()
咱们刷新页面, 会看到一个多色的正方体
你能够尝试去切换材质 看看会发生什么css