THREE.js
2020-07-29 本文已影响0人
Cherry9507
实现一个简单的3d场景需要包含下面几个模块：
- 容器
- 场景
- 摄像机
- 模型
- 渲染器
- 材质
接下来就可以在这个模型的基础上添加细节：材质、动画等
<html>
<head>
<title>My first three.js app</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script src="js/three.js"></script>
<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.BoxGeometry( 1, 1, 1 );//加载立方体模型
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );//创建材质
var cube = new THREE.Mesh( geometry, material );//创建网格，用来包含模型和材质
scene.add( cube );//场景中放入网格对象
camera.position.z = 5;//相机位置
var animate = function () {
requestAnimationFrame( animate );//相当于setInterval，比后者更节省浏览器性能，离开页面时，动画暂停，再次进入页面，动画继续
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render( scene, camera );//最后将相机和场景通过渲染器渲染出来
};
animate();
</script>
</body>
</html>
