首页 > Web开发 > 详细

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

时间:2016-08-23 00:59:26      阅读:286      评论: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
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!