1.首先three.js就是用js写的3d程序,要将他加入网页中只需要将three.js嵌入html中即可。
2.使用three.js的基本框架 其中主要有3大组件 1.场景scene 2.相机camera 3.渲染器render <!DOCTYPE html> | |||||||||
<html> | |||||||||
<head> | |||||||||
<title></title> | |||||||||
<style>canvas { width: 100%; height: 100% }</style> | |||||||||
<script src="js/three.js"></script> | |||||||||
</head> | |||||||||
<body> | |||||||||
<script> | |||||||||
var scene = new THREE.Scene(); | |||||||||
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000); | |||||||||
var renderer = new THREE.WebGLRenderer(); | |||||||||
renderer.setSize(window.innerWidth, window.innerHeight); | |||||||||
document.body.appendChild(renderer.domElement); | |||||||||
var geometry = new THREE.CubeGeometry(1,1,1); | |||||||||
var material = new THREE.MeshBasicMaterial({color: 0x00ff00}); | |||||||||
var cube = new THREE.Mesh(geometry, material); scene.add(cube); | |||||||||
camera.position.z = 5; | |||||||||
function render() { | |||||||||
requestAnimationFrame(render); | |||||||||
cube.rotation.x += 0.1; | |||||||||
cube.rotation.y += 0.1; | |||||||||
renderer.render(scene, camera); | |||||||||
} | |||||||||
render(); | |||||||||
</script> | |||||||||
</body> | |||||||||
</html> |
Three.js的简单框架
最新推荐文章于 2024-08-16 08:25:23 发布