码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2016-08-23 01:00:48      阅读:194      评论:0      收藏:0      [点我收藏+]

标签:

技术分享

 

三维场景基本要素:

技术分享

步骤: 

技术分享

 

代码:

 技术分享

技术分享

 

源码:

<!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>

 

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

标签:

原文地址:http://www.cnblogs.com/daipianpian/p/5797543.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!