three.js入门以及基本思想

最新推荐文章于 2024-03-22 13:25:22 发布

ConardLi

最新推荐文章于 2024-03-22 13:25:22 发布

阅读量384

点赞数 1

分类专栏： js 文章标签： webgl 3d javascript

本文链接：https://blog.csdn.net/qq_34149805/article/details/76253513

版权

js 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

创建场景

three.js是JavaScript编写的WebGL第三方库。提供了非常多的3D显示功能。

在treejs上实现一个功能，我们需要最基本的三件事情：场景，相机和渲染器。

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

关于函数的具体参数，可以去查一下官方的api，我这里只说一下思想，这里只是单纯的创建了场景，相机，渲染器，并没有说如何把他们关联起来。

要关联他们展示效果，最少空间内要有一个要素尸体，所以我们在空间中创建一个立方体：

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是一个抽象的几何体对象，我们需要一些材料（material）来渲染他，然后我们使用一个网格（Mesh）来把他们结合在一起，添加到场景中。

默认情况下，当我们调用scene.add（）时，我们添加的东西将被添加到坐标（0,0,0）中。

此时我们的相机视角也在（0，0，0）处，所以我们看不到任何东西，为此，需要将相机视角移出一点。

渲染场景

光靠上面的代码可能无法显示任何内容，我们还需要所谓的渲染或动画循环。

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

这些代码将创建一个动画循环，使渲染器每秒渲染或者说画画60次，类似于计时器，也就是setInterval，但是比计时器性能要好。

以上的代码只能看到立方体的一个面，因为我们没有提供任何的动画代码，我们在动画渲染的方法中让立方体旋转一下：

动画立方体

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

这将以每秒60次运行，并给立方体一个很好的旋转动画，基本上，应用程序运行时要移动或者更改的内容都必须经过动画循环。

结果

如果以上代码写的没问题，你将会得到下面的效果：

以下是完整代码


<!DOCTYPE html>
<html lang="en">
<head>
    <title>treejs first demo</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <style>
        body { margin: 0; }
        canvas { width: 100%; height: 100% }
    </style>
</head>
<body>

<div id="container"></div>
<script src="three.min.js"></script>
<script src="js/libs/stats.min.js"></script>
<script src="js/controls/OrbitControls.js"></script>
<script>

    //三要素，相机，场景，渲染器
    var camera, scene, renderer;
    var cube;

    init();

    function init() {
        //获取容器
        container = document.getElementById( 'container' );
        //初始化场景
        scene = new THREE.Scene();
        //初始化相机
        camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1100 );
        camera.target = new THREE.Vector3( 0, 0, 0 );
        //初始化渲染器
        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 } );
        //创建网格用于融合集合体和材料
        cube = new THREE.Mesh( geometry, material );

        scene.add( cube );
        camera.position.z = 2;
        //执行动画
        animate();
    }

    function animate() {
        //相当于一个计时器，每秒执行60次函数，这样动态的效果就可以实时渲染出来
        requestAnimationFrame( animate );

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

        renderer.render( scene, camera );
    }

</script>
</body>
</html>

ConardLi

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
three.js入门以及基本思想

创建场景three.js是JavaScript编写的WebGL第三方库。提供了非常多的3D显示功能。在treejs上实现一个功能，我们需要最基本的三件事情：场景，相机和渲染器。var scene = new THREE.Scene();var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window....
复制链接

扫一扫