three.js 第一课创建场景，显示几何体
Posted dawn888
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了three.js 第一课创建场景，显示几何体相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html> <head> <title>demo1</title> </head> <style type="text/css"> body{ margin:0; } canvas{ width:100%; height:100%; } </style> <body> <script src="jquery.min.js"></script> <script src="../build/three.js"></script> <script type="text/javascript"> 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);//渲染到浏览器 //创建形状BoxGeometry var geometry = new THREE.BoxGeometry(1,1,1); //创建材料 wireframe是否使用线条 var material = new THREE.MeshBasicMaterial({color:0xFFFFFF,wireframe:false}); //将材料和形状结合 var cube = new THREE.Mesh(geometry,material); //加入场景中 scene.add(cube); camera.position.z=3;//设置相机的位置 //逻辑 var update=function(){ //物体随着XY轴旋转 cube.rotation.x +=0.01; cube.rotation.y += 0.005; } //绘画渲染 var render=function() { renderer.render(scene,camera); } //循环运行update，render var loop=function() { requestAnimationFrame(loop); update(); render(); } loop();//循环开始 </script> </body> </html>
以上是关于three.js 第一课创建场景，显示几何体的主要内容，如果未能解决你的问题，请参考以下文章