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