ThreeJS学习之旅（2）

2019-11-08 02:30:10

字体：大中小

来源：转载

供稿：网友

学习three.js的第一个程序---源码解析

目标：创建一个正方体

实例代码：

<!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);//(视眼角,纵横比，相机允许物体的最近距离，相机允许物体的最远距离）默认情况之下,相机的上方向为Y轴,右方向为X轴,向里为Z轴. //实例化一个渲染器 var renderer = new THREE.WebGLRenderer(); //渲染范围 renderer.setSize(window.innerWidth, window.innerHeight); //把renderer加入到body中，render会创建一个canvas加入body中 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); //将立方体添加到场景中，默认坐标为(0,0,0) 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>

总结：在网页中渲染物体的三个必要组件---场景（scene）、相机（camera）和渲染器（renderer）

上一篇：语言的战争

下一篇：MyEclipse设置代码格式化