Three.js 入门示例
生活随笔
收集整理的這篇文章主要介紹了
Three.js 入门示例
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
Three.js是基于原生WebGL封裝運行的三維引擎。
three.js是JavaScript編寫的WebGL第三方庫。提供了非常多的3D顯示功能。
Three.js 是一款運行在瀏覽器中的 3D 引擎，你可以用它創建各種三維場景，包括了攝影機、光影、材質等各種對象。
?
先做一個基本示例；
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>第一個three.js 示例</title><style>body {margin: 0;overflow: hidden;}</style><script src="three.js-master/build/three.js"></script> </head><body><script>var scene = new THREE.Scene();var geometry = new THREE.SphereGeometry(80, 60, 60); //創建一個球體幾何對象var material = new THREE.MeshLambertMaterial({color: 0x0000ff}); //材質var mesh = new THREE.Mesh(geometry, material); //網格模型對象scene.add(mesh); //網格模型添加到場景中//點光源var point = new THREE.PointLight(0xffffff);point.position.set(400, 200, 300); //點光源位置scene.add(point); //點光源添加到場景中/*** 相機*/var width = window.innerWidth; //窗口寬度var height = window.innerHeight; //窗口高度var k = width / height; //窗口寬高比var s = 200; //三維場景顯示范圍控制系數//創建相機var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);camera.position.set(200, 300, 200); //相機位置camera.lookAt(scene.position); //相機方向/*** 渲染器*/var renderer = new THREE.WebGLRenderer();renderer.setSize(width*1/4, height*1/4);//設置渲染區域尺寸renderer.setClearColor(0xffff00, 1); //設置背景顏色document.body.appendChild(renderer.domElement); //body元素中插入canvas對象//執行渲染操作 指定場景、相機作為參數renderer.render(scene, camera);</script> </body> </html>運行之后效果如下；?
下載three.js；目錄結構如下；包含下載的?three.js-master/build/three.js；即可使用；
代碼大致分為以下幾個部分；
? ??創建球體幾何對象，添加到場景對象；
? ? 場景中添加光源；
? ? 創建相機；三維對象是從相機中看到的；
? ? 創建渲染器執行渲染操作，以場景和相機為參數；
總結
以上是生活随笔為你收集整理的Three.js 入门示例的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 初次使用CxImage类库、VC6配置U
- 下一篇： matlab 混合C++编程mex方式初