Threejs教程——Hello World

要开发web3D的项目,大名鼎鼎的threejs相信你一定听说过。接下来,我们就按照国际惯例,从helloworld开始,把大家带入3D的世界!

首先我们从GitHub(https://github.com/mrdoob/three.js/)下载three.min.js,其实可以download他们所有的库,里面还包含很多例子,这里我们仅仅使用在build目录下的已经打包好的three主文件,然后在html里面引用好threejs的库

<script src="js/three.min.js"></script>

然后引入场景控制辅助类(在源码包的example/js/controls里面)

<script src="js/OrbitControls.js"></script>

接着在JS代码中写入以下代码

    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
    camera.position.set(5,5,5); 

    var renderer = new THREE.WebGLRenderer({antialias: true });
    renderer.setSize( window.innerWidth, window.innerHeight );
    renderer.setClearColor(0x177FB3,1);
    document.body.appendChild( renderer.domElement );

    var geometry = new THREE.BoxGeometry( 1, 1, 1 );
    var material = new THREE.MeshBasicMaterial( { color:0xff5678  } );
    var cube = new THREE.Mesh( geometry, material );
    scene.add( cube );

    var controls = new THREE.OrbitControls(camera , renderer.domElement);

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

    render();

最终的完整html代码如下:

<html>
<head>
    <title>Three.js Hello World</title>
    <style>
        body { margin: 0; }
        canvas { width: 100%; height: 100% }
    </style>
    <script src="js/three.min.js"></script>
    <script src="js/OrbitControls.js"></script>
</head>
<body>

<script>
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
    camera.position.set(5,5,5); 

    var renderer = new THREE.WebGLRenderer({antialias: true });
    renderer.setSize( window.innerWidth, window.innerHeight );
    renderer.setClearColor(0x177FB3,1);
    document.body.appendChild( renderer.domElement );

    var geometry = new THREE.BoxGeometry( 1, 1, 1 );
    var material = new THREE.MeshBasicMaterial( { color:0xff5678  } );
    var cube = new THREE.Mesh( geometry, material );
    scene.add( cube );

    var controls = new THREE.OrbitControls(camera , renderer.domElement);

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

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

最终效果如下,你可以使用鼠标旋转立方体哦

在线demo

本文由 Leo's Blog 创作,采用 署名-非商业性使用 2.5 中国大陆 进行许可。
如需转载、引用请署名作者且注明文章出处。
2016年12月20日 1279 浏览 评论 Threejs web3d
上一篇:跟我一起学Threejs Web3D系列 | 下一篇:Threejs教程——基础概念