爱程序网

第一局 ThreeJS-开始

来源: 阅读:

  本文介绍ThreeJS使用的大体流程。(由于水平有限,请大家多多指教。)

1.ThreeJS下载和引入:

  (1)下载地址:https://github.com/mrdoob/three.js/archive/master.zip

  (2)引入:<script type="text/javascript" src="~/Scripts/three.js"></script>

2.开始:

  (1)定义canvas  

    <canvas id="canvas" width="1000" height="500"></canvas>

  (2)//渲染器

    var renderer = new THREE.WebGLRenderer({     canvas: document.getElementById("canvas"), }); renderer.setClearColor(0x000000);

  (3)//场景

    var scene = new THREE.Scene();

  (4)//照相机

    var camera = new THREE.OrthographicCamera(-5, 5, 2.5, -2.5, 0, 10); camera.position.set(1, 2, 5); camera.lookAt(new THREE.Vector3(0,0,0)); scene.add(camera);

  (5)//物体

    var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 1, 1), new THREE.MeshLambertMaterial({ color: 0xff0000 })); scene.add(cube);

  (6)//灯光

    var light = new THREE.DirectionalLight(); light.position.set(1,2,5); scene.add(light);

  (7)//渲染

    renderer.render(scene,camera);

3.运行代码,效果如下:

4.总结:

  本文旨在感受ThreeJS。

关于爱程序网 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助