three.js学习笔记（二）-对一个简单three.js进行注释

最新推荐文章于 2024-05-17 09:00:00 发布

soraduo

最新推荐文章于 2024-05-17 09:00:00 发布

阅读量410

点赞数

文章标签： three.js javascript 前端 WebGL

本文链接：https://blog.csdn.net/soraduo/article/details/97777868

版权

Anyone can say that. Show me the code, please!

理论知识是需要建立在实践上的，所以我想给大家具体来分析一下代码

<!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(10,2,2);
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>

这是一个简单的3D程序，运行结果如下

呈现了一个绿色的不停旋转的正方体

下面是具体的注释过后的代码：

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>canvas { width: 100%; height: 100% }</style>
<script src="three.js"></script>
</head>
<body>
<script>
var scene = new THREE.Scene();/*创建了一个新的场景对象。该对象允许使用three.js来安排对象，灯光，相机的位置,具体properties请查看docs中的api*/
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
       /*创建了一个新的透视投影相机对象
       构建格式为 PerspectiveCamera( fov : Number, aspect : Number, near : Number, far : Number )
fov — Camera frustum vertical field of view.
aspect — Camera frustum aspect ratio.
near — Camera frustum near plane.
far — Camera frustum far plane.
       */
var renderer = new THREE.WebGLRenderer();//创建了一个渲染器
       /*以上为three.js的3大组件，只有场景（scene），相机(camera)，渲染器(renderer)都具有的情况下，才能将物体渲染到网页中去*/

renderer.setSize(window.innerWidth, window.innerHeight);

document.body.appendChild(renderer.domElement);
       /*渲染器renderer的domElement元素，表示渲染器中的画布，所有的渲染都是画在domElement上的，所以这里的appendChild表示将这个domElement挂接在body下面，这样渲染的结果就能够在页面中显示了。*/
var geometry = new THREE.CubeGeometry(2,2,2);
       //CubeGeometry为一个几何体，具体什么样由给与他的参数决定
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的api函数，这样是十分重要的