three.js入门第一个案例
标签：
筹备事情1.运用three.js进行3d开发，其实和页面编程一样，首先需要在html文件中引入three.js。Three.js使用面向东西的方法来构建措施，它包罗3个根基东西： 场景（scene）, 相机（camera）, 以及一个衬着器（renderer）。
第一步： 引入three.js. <!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>My first Three.js app</title> </head> <body> <script src=http://www.mamicode.com/"https:/cdn.bootcss.com/three.js/r83/three.min.js"></script> <script> // 这个位置是留给后面初始化和开发3d页面的js代码 </script> </body> </html> 第二步： 用js代码创建3D场景（scene），非常简单就一行代码. let scene = new THREE.Scene(); 第三步：用js代码创建相机（camera），再确定其位置,下面代码也就两行，但是多了参数。来说明一下参数的感化： //fov 代表视角 我们不雅察看位置的视觉 //aspect 宽高比 简单理解为确定3d页面的宽和高 //near 比来看到 滚轮缩放的最小距离 //far 最远看到 滚轮缩放的最大距离 let camera = PerspectiveCamera( fov, aspect, near, far ); camera.position.set( x, y,z);//x:程度标的目的位置， y: 竖直标的目的位置，z:垂直屏幕标的目的位置 一般给下面这组值来确定相机能够看得的位置： let camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); camera.position.set( 0, 100,300 ); 第四步：用js代码创建衬着器（renderer),设置衬着页面巨细，一般为相机确定的3d页面巨细,最后一行是把衬着器插手页面. let renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild(renderer.domElement ); 第五步：给3d页面添加一个白色环境光这样我们才华够看见物体： //环境光 ? ? let ambientLight = new THREE.AmbientLight( 0xf5f5f5);//创建光 scene.add( ambientLight );//插手参加景 最后一步：开始时刻衬着3d页面，，虽然完成了最后一步，但是运行代码后我们还是不能看见任何对象，那是因为我们只衬着了3d页面，并没有添加事物到页面，接下来我们就来添加一个球吧： function render() { requestAnimationFrame( render ); renderer.render( scene, camera ); } render(); 添加个球吧,添加了下面代码再运行下发明3d页面上有一个红色的球了,但是我们不能用鼠标来控制它，那是因为three.js里面没有来写鼠标的控制3d页面，我们还需要引入鼠标控制插件OrbitControls.js。 let ball= new THREE.SphereGeometry( 5, 32, 32 );//创建球 let ballColor= new THREE.MeshBasicMaterial( {color: 0xffff00} );//创建材质色，用来给球上色的 let sphere = new THREE.Mesh( ball, ballColor);//给球上色 scene.add( sphere );//把球插手参加景 再添加格子帮助线便利我们不雅察看和调解物体位置： let grid = new THREE.GridHelper( 400, 30, 0xcccccc, 0xcccccc );//创建帮助线 scene.add( grid );//插手场景 引入OrbitControls.js，然后初始化控件，在运行页面发明可以用鼠标来控制这个球了，就问你完不完美，beautiful 不 beautiful，下次我们再讲如何来设置光; <script src=http://www.mamicode.com/"/libs/OrbitControls.js"></script> let controls =newTHREE.OrbitControls(camera); //通过.enableZoom属性可以控制是否允许鼠标中键缩放场景，.enableZoom属性默认值true。 controls.enableZoom =true;//允许缩放` controls.minDistance = 1;//能够缩放多小 controls.maxDistance = 2000;////能够放大多大 //通过.enableRotate属性可以控制是否允许鼠标左键旋转场景，.enableRotate属性默认值true。 controls.enableRotate =true;//允许旋转 最终代码：运行一下，检察效果 <!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>demo1</title> </head> <body> <script src=http://www.mamicode.com/"lib/three.min.js"></script> <script src=http://www.mamicode.com/"lib/OrbitControls.js"></script> <script> // 这个位置是留给后面初始化和开发3d页面的js代码 let scene = new THREE.Scene(); let camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 2000 ); camera.position.set( 0, 50,300 );? ? let renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild(renderer.domElement ); // 给场景添加一个环境光 ? ? let ambientLight = new THREE.AmbientLight( 0xf5f5f5); scene.add( ambientLight ); let grid = new THREE.GridHelper( 400, 30, 0xcccccc, 0xcccccc ); scene.add( grid ); let ball = new THREE.SphereGeometry( 5, 32, 32 );//5:球半径 第一个32：程度支解面的数量. 第二个32：垂直支解面的数量. let ballColor = new THREE.MeshBasicMaterial( { color: 0xff0000 } ); let cube = new THREE.Mesh( ball , ballColor ); scene.add( cube ); let controls =new THREE.OrbitControls(camera, renderer.domElement); controls.enableZoom =true;//允许缩放 //设置相机移动距离 controls.minDistance = 1; controls.maxDistance = 2000; controls.enableRotate =true; function render() { requestAnimationFrame( render ); renderer.render( scene, camera ); } render(); </script> </body> </html> three.js的中文文档踏得网three.js入门第一个案例
标签：
原文地点：https://www.cnblogs.com/lmf-sky/p/12187733.html
温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/web/31581.html
![[转]Node.js中package.json中^和~的区别](/uploads/allimg/200519/054J34453_lit.png "[转]Node.js中package.json中^和~的区别")