第一个Three.js程序——动手写一个简单的场景

 

三维场景基本要素：

步骤： 

 

代码：

 

 

源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="js/three.js"></script>
    <style>
    html,body{background: #000000;}
    </style>
</head>
<body>
    <script type="text/javascript">
        var scene = new THREE.Scene();

        var geometry = new THREE.CubeGeometry(100,100,100);
        var material = new THREE.MeshLambertMaterial({color:0xff0000});
        var mesh = new THREE.Mesh(geometry,material);
        scene.add(mesh);

        var light = new THREE.PointLight(0xffffff);
        light.position.set(300,400,200);
        scene.add(light);

        var camera = new THREE.PerspectiveCamera(40 , 800/600, 1, 1000);
        camera.position.set(200,200,200);
        camera.lookAt(scene.position);

        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(800,600);
        document.body.appendChild(renderer.domElement);

        renderer.render(scene,camera);
    </script>
</body>
</html>

 

posted @ 2016-08-22 22:59  竹立荷塘  阅读(1827)  评论(0)  编辑  收藏  举报