免费快速网站,网站布局优化策略,轻量应用服务器wordpress目录,100种晚上禁用的app大全这一部分将对three.js来做一个简要的介绍
首先将开始搭建一个场景#xff0c;其中包含一个正在旋转的立方体
梦开始的地方 在开始使用threeJS之前#xff0c;我们需要创建一个HTML文件来显示它#xff08;将下列HTML代码保存为你电脑上的一个HTML文件然后在你的浏览器中打…这一部分将对three.js来做一个简要的介绍
首先将开始搭建一个场景其中包含一个正在旋转的立方体
梦开始的地方 在开始使用threeJS之前我们需要创建一个HTML文件来显示它将下列HTML代码保存为你电脑上的一个HTML文件然后在你的浏览器中打开这个HTML文件。 !DOCTYPE html
htmlheadmeta charsetutf-8titleMy first three.js app/titlestylebody { margin: 0; }/style/headbodyscript typemoduleimport * as THREE from https://unpkg.com/three/build/three.module.js;// The Javascript will go here./script/body
/html我们接下来的所有代码将会写入到空的script标签中。
第一步 创建Scene、camera、renderer 为了真正能够让你的场景借助three.js来进行显示我们需要以下几个对象场景、相机和渲染器这样我们就能透过摄像机渲染出场景。 const scene new THREE.Scene();
const camera new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );const renderer new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
在上面我们建立了场景、相机、渲染器。
three.js里面有几种不同的相机在这里我们使用的是PerspectiveCamera透视摄像机。 第一个参数是视野角度FOV。视野角度就是无论在上面时候你所能在显示器上看到的场景范围。 它的单位是角度与弧度分开 第二个参数是长宽比aspect ratio 也就是你用一个物体的宽除以它的高的值width ÷ height。比如说当你在一个宽屏电视上播放老电影时可以看到图像仿佛是被压扁的。 第三个参数和第四个参数是近截面near和远截面far。当物体某些部分比摄像机的远截面远或者比近截面近的时候该部分将不会被渲染到场景中。 现在你不用担心这个值的影响在未来我们为了获得更好的渲染性能将会在我们的应用程序里去设置它
最后是渲染器这里是我们施展magic的地方 除了我们在这里用到的WebGLRenderer渲染器之外Three.js同时提供了其他几种渲染器。当我们使用的浏览器版本过低时或者由于其他原因不支持WebGL时可以使用其他几种渲染器进行降级处理。
在创建了一个渲染器的实例后我们还需要在我们的应用程序里设置一个渲染器尺寸。 比如说我们可以使用所需要的渲染区域的宽高来让渲染器渲染出的场景Scene填充满我们的应用程序。因此我们可以将渲染器宽高设置为浏览器窗口宽高。对应性能比较敏感的应用程序来说你可以使用setSize时传入一个较小的值 例如 window.innerWidth / 2和window.innerHeight / 2 这将使得应用程序在渲染的时候会以一半的分辨率来进行渲染。
在上面代码的最后一步非常重要我们将renderer渲染器的dom元素renderer.domElement添加到我们的HTML文档中。这就是渲染器用来显示场景给我们看的canvas元素。
“嗯看起来很不错那我们接下来就添加一个立方体试试手感如何
const geometry new THREE.BoxGeometry( 1, 1, 1 );
const material new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube new THREE.Mesh( geometry, material );
scene.add( cube );camera.position.z 5;要创建一个立方体我们需要一个BoxGeometry立方体的对象这个对象包含了一个立方体所有的顶点vertices和面faces。未来我们将会在这方面进行更多的探索 对于这个立方体我们需要给它一个材质来让它有颜色。 在Three.js中有几种自带的材质在这里我们使用的是MeshBasicMaterial。所有的材质都存有应用于他们属性的对象。 在这里为了方便理解我们只设置了一个简单的color属性值为0x00ff00也就是green绿色。 在这里所做的事情和在CSS或者PhotoShop中使用十六进制hex colors颜色格式来设置颜色方式一致。 最后我们需要一个Mesh网格。网格包含一个几何体以及作用在几何体上的材质我们可以直接将网格对象放入我们的场景中并且让它在场景中自由移动。 默认情况下当我们调用scene.add( )的时候物体将会被添加到000坐标。但将使得摄像机和立方体彼此在一起。为了防止这种情况的发生我们只需要将摄像机稍微向外移动一些即可。 第二步 渲染场景
现在如果将之前写好的代码copy到HTML文件中你将不会在页面看到任何东西。因为我们还没对它进行真正的渲染。为此我们需要使用一个被叫做渲染循环render loop或者动画循环animate loop的东西。
function animate() {requestAnimationFrame( animate );renderer.render( scene, camera );
}
animate();这里我们创建看一个使得渲染器能够在每次屏幕刷新时对场景进行绘制的循环在大多数屏幕上刷新率一般是每秒60次。 有人或许会问为什么我们不直接用setInterval来实现刷新功能呢 当然我们确实可以用setInterval但是requestAnimationFrame有更好更多的优点。最重要的一点或许就是当用户切换到其他标签的时候它会自己暂停因此不会浪费用户宝贵的处理器资源也不会损耗我们电池的使用寿命。
第三步 立方体动起来 在开始之前如果你已经将上面的代码写入到了你所创建的文件中你就可以看到一个绿色的小方块。下面让我们来对这个小方块施加一些魔方------让它旋转起来。 将下列代码添加到animation函数中 renderer.render调用的上方:
cube.rotation.x 0.01;
cube.rotation.y 0.01;这段代码每帧都会执行正常情况下是60次/秒这就让立方体有了一个看起来很不错的旋转动画。基本上来说当应用程序运行时如果你想要移动或者改变任何场景中的东西都必须要经过这个动画循环。当然你可以在这个动画循环里调用别的函数这样你就不会写出有上百行代码的animate函数。
总结
恭喜你你现在已经成功完成了你的第一个Three.js应用程序。虽然它很简单但现在你已经有了一个入门的起点。 以下是完整代码编辑、运行或者修改代码有助于你更好的理解它是如何工作的 htmlheadmeta charsetutf-8titleMy first three.js app/titlestylebody { margin: 0; }/style/headbodyscript typemoduleimport * as THREE from https://unpkg.com/three/build/three.module.js;const scene new THREE.Scene();const camera new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );const renderer new THREE.WebGLRenderer();renderer.setSize( window.innerWidth, window.innerHeight );document.body.appendChild( renderer.domElement );const geometry new THREE.BoxGeometry( 1, 1, 1 );const material new THREE.MeshBasicMaterial( { color: 0x00ff00 } );const cube new THREE.Mesh( geometry, material );scene.add( cube );camera.position.z 5;function animate() {requestAnimationFrame( animate );cube.rotation.x 0.01;cube.rotation.y 0.01;renderer.render( scene, camera );}animate();/script/body
/html
