<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>立方体</title> <script src="https://sqimg.qq.com/qq_product_operations/mma/javanli_test/lib/three.min.js"></script> <style type="text/css"> html, body { margin: 0; padding: 0; } #three_canvas { position: absolute; width: 100%; height: 100%; } </style> </head> <body> <canvas></canvas> <script> var renderer, camera, scene, light, object; var width, height; function initRenderer() { width = document.getElementById('three_canvas').clientWidth; height = document.getElementById('three_canvas').clientHeight; renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('three_canvas') }); renderer.setSize(width, height); renderer.setClearColor(0xFFFFFF, 1.0); } function initCamera() { camera = new THREE.OrthographicCamera(width / -2, width / 2, height / 2, height / -2, 1, 1000); camera.position.x = 0; camera.position.y = 0; camera.position.z = 200; camera.up.x = 0; camera.up.y = 1; camera.up.z = 0; camera.lookAt({ x: 0, y: 0, z: 0 }); } function initScene() { scene = new THREE.Scene(); } function initObject() { var geometry = new THREE.CubeGeometry(100, 100, 100); object = new THREE.Mesh(geometry, new THREE.MeshNormalMaterial()); scene.add(object); } function render() { requestAnimationFrame(render); object.rotation.x += 0.05; object.rotation.y += 0.05; renderer.render(scene, camera); } function threeStart() { initRenderer(); initCamera(); initScene(); initObject(); render(); } window.onload = threeStart(); </script> </body> </html>
保存为html后打开，在屏幕中央会显示这样一个转动的立方体
小结
对Three.js的介绍就到这里了，本文对Three中的重要组件基本上都有提到。其实想要总结的东西还有很多，但写在这一篇里可能会显得很累赘，这篇文章的初衷是想要读者读后对Three.js有一个直观的大体上的理解，并不打算牵涉太多细节。