首页 > 代码库 > 网页3D效果库Three.js初窥

网页3D效果库Three.js初窥

2024-08-19 22:23:33   225人阅读

网页3D效果库Three.js初窥

背景

一直想研究下web页面的3D效果，最后选择了一个比较的成熟的框架Three.js下手
ThreeJs官网
ThreeJs-github;
接下来我会陆续翻译 Three.js官网的文档，部分文字和代码为我个人添加。

第一部分：three.js介绍

创建场景

这部分的目标是为Three.js做一个简单的介绍，我们会以创建一个场景，一个旋转的立方里开始，文章的结尾会有一个可运行的完整示例为你解惑。

开始之前

在你使用Three.js之前，你需要在你的电脑上建立文件存放下面的html，并需要建立js目录将three.js放入，打开浏览器浏览。

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <title>My first Three.js app</title>
        <style>
            body { margin: 0; }
            canvas { width: 100%; height: 100% }
        </style>
    </head>
    <body>
        <script src=http://www.mamicode.com/"js/three.js"></script>
        <script>
            // Our Javascript will go here.
        </script>
    </body>
</html>

好了，接下来的代码都放进空的script标签里

创建场景

事实上使用Three.js创建任何可显示的效果，都需要三样东西：场景，相机，渲染器，我们可以通过相机渲染场景.

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);

让我们花点时间解释下上面的代码做了些什么，现在我们建立了场景，相机和渲染器
Three.js有几种不同的相机，现在我们使用PerspectiveCamera.第一个属性是视角，我们可以把相机理解为我们的眼睛, 第二个属性是宽高比，你通常希望使用元素的宽度除以高度，或者理解为当你在一个宽屏电视上看一个老电影是也会得到这种结果－图像会被拉伸，接下来的两个属性是远近剪切面，什么意思呢？字面上意思是：物体远离相机的far值或者比相机的near值还要近都不会被渲染! 看到这个我有点懵逼查了半天 投影矩阵 这篇文章讲的大概能看懂是什么意思。你现在不用担心这个，但是你可能会在你的app里使用其它值来达到更好的展现 ！

接下来时渲染器，这是最神奇的地方，除了WebGLRenderer之外在这里使用其它的东西来兼容老的浏览器活着不支持WebGl的浏览器。

除了创建renderer实例，我们还需要设置渲染的尺寸，最好使用浏览器的宽度高度来填充应用，考虑性能，你仍可以setSize小的values。比如:window.innerWidth/2和 window.innerHeight/2,这样可以渲染半个屏幕

如果你想保持渲染的尺寸，但渲染在一个低分辨率的设备上，你可以调用setSize的updateStyle（第三个属性）设置为false,比如 setSize(window.innerWidth/2, window.innerHeight/2, false) 这样将会渲染在低分辨率的设备上但Canvas 100%显示

最后，我们添加渲染元素到HTML文档，这是一个canvas标签的渲染器来展示场景

"这非常好，但是立方体呢" 让我们继续

var geometry = new THREE.BoxGeometry(1,1,1);
var material = new THREE.MeshBasicMaterial({color:0x00ff00});
var cube = new THREE.Mesh(geometry,material);
scene.add(cube);
camera.position.z = 5

创建一个立方体，我们需要BoxGeometry，这是一个包含点，面，填充物的立方题对象，我们会在后面细细讲。

除了geometry，我们还需要material给它上色，Three.js有许多的materia，但我们现在使用MeshBasicMaterial，所有的meterial需要一个对象的属性将被应用，为了简单其间，我们只支持颜色属性0x00ff00绿色，跟css和photoshop的颜色一样

第三个事是我们需要一个Mash，mash是一个对象需要一个geometry和一个material，然后我们可以插入到场景中，也可以自由移除，

默认情况下,当我们调用scene.add(),我们将添加到坐标(0,0,0)。这将导致相机和cube在彼此内部。为了避免这种情况,我们将镜头移出一点。

渲染场景

如果你从上面的代码复制到我们创建的HTML文件之前,您无法看到任何东西。这是因为我们还没有呈现任何。为此,我们需要渲染循环

function render(){
    requestAnimationFrame(render);
    renderer.render(scne,camera);
}
render();

这将创建一个循环使渲染器每秒60次的频率绘画。如果你在写浏览器游戏,你可能会说“为什么我们不创建一个setInterval ?其实我们是可以的,但requestAnimationFrame有许多优点。最重要的是当用户导航到另一个浏览器选项卡它暂停,因此不浪费他们宝贵的处理能力和电池寿命。可以在控制台试试下面这段代码，切换tab观察！

function render(){
    requestAnimationFrame(render);console.log(1);
}
render();

使cube动起来

如果将上面所有的代码插入到我们开始创建的文件上,您应该看到一个绿色的盒子。接下来让它更有趣的旋转。
添加下面的代码到渲染器，调用renderer.render 在render函数里

cube.rotation.x += 0.1;
cube.rotation.y += 0.1;

每一帧的运行(60次/秒),并使立方体旋转动画。基本上,任何你想要移动或改变应用程序运行时必须经过渲染循环。你当然可以调用其他函数,这样你就不会得到一个数百行的渲染函数。

写在最后

恭喜你，你完成了你的第一个Three.js的应用，很简单，但你有了个起点！

下面提供了完整的代码，它可以让你更好的理解它是如何工作的

<html>
    <head>
        <title>My first Three.js app</title>
        <style>
            body { margin: 0; }
            canvas { width: 100%; height: 100% }
        </style>
    </head>
    <body>
        <script src=http://www.mamicode.com/"js/three.js"></script>
        <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.BoxGeometry( 1, 1, 1 );
            var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
            var cube = new THREE.Mesh( geometry, material );
            scene.add( cube );

            camera.position.z = 5;

            var render = function () {
                requestAnimationFrame( render );

                cube.rotation.x += 0.1;
                cube.rotation.y += 0.1;

                renderer.render(scene, camera);
            };

            render();
        </script>
    </body>
</html>

总结

  • 创建一个场景 scene
  • 创建一个相机 camera
  • 创建一个渲染器 renderer
  • 设置渲染器的宽高度
  • 将渲染器元素插入文档
  • 创建盒子的几何（房子结构） geometry
  • 创建盒子的材料（装修） meterial
  • 创建一个完整的盒子 Mesh(geomety,meterial)
  • 将创建好的盒子塞到创建的场景中
  • 循环渲染

本文翻译于three.js/doc/Introduction/creating a scene

网页3D效果库Three.js初窥


联系
我们