刚开始学，记录一下过程
threejs 版本： v4.5
兼容： Google Chrome 9+、Firefox 4+、Opera 15+、Safari 5.1+、Internet Explorer 11 和 Microsoft Edge
先根据官网创建一个完整的示例，如下
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>My first three.js app</title>
<style>
* { margin: 0; padding: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script src="three.js"></script>
<script>
var scene = new THREE.Scene();
// 相机 正交相机（OrthographicCamera）、透视相机（PerspectiveCamera）、全景相机（CubeCamera）和3D相机（StereoCamera）。
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 600 );
// 渲染器
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
// 盒子模型（BoxGeometry），这是一个包含立方体所有顶点和填充面的对象。
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
// 网孔基础材料（MeshBasicMaterial）。 所有材料都含有一个属性对象
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
// 网孔(Mesh)。网孔是用来承载几何模型的一个对象，还可以把材料应用到它上面，然后添加到场景中完成旋转动画
var cube = new THREE.Mesh( geometry, material );
// 对象将被添加到原点处，即坐标点(0,0,0)
scene.add( cube );
// 相机和立方体发生空间重叠。为了避免这样，我们把相机（camera）的位置移出来一些。
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>
效果：
image.png
需要注意的是：
默认情况下，当我们调用scene.add()的时候，物体将会被添加到坐标为(0,0,0)的位置。但这可能会使得摄像机的位置和立方体相互重叠（也就是摄像机位于立方体中）。为了防止这种情况的发生，我们只需要将摄像机稍微向外移动一些即可。即 camera.position.z = 5;
网友评论