當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
学习threeJS(一)--第一个threeJs
生活随笔
收集整理的這篇文章主要介紹了
学习threeJS(一)--第一个threeJs
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
2019獨角獸企業(yè)重金招聘Python工程師標準>>>
參考：threeJS開發(fā)指南
threeJs三個基本要素
1、scene：一個容器，保存并跟蹤我們想渲染的物體
2、camera：定義在scene里能看到什么
3、rederer：計算指定camera角度下scene的樣子--使用什么方式渲染（常見利用顯卡渲染）
html：引入jQuery-1.9.0、threeJS
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>添加光源</title><style>body {margin: 0;overflow: hidden;}<style/> </head> <body> <div id="WebGl-output"></div> <script type="text/javascript" src="../../build/jquery-1.9.0.js"></script> <script type="text/javascript" src="../../build/three.js"></script> <script type="text/javascript" src="index.js"></script> </body> </html>js:
1、要初始化三要素scene、camera、rederer
// 定義scene,camera,renderer // scene是一個容器，保存并跟蹤我們想渲染的物體 var scene = new THREE.Scene(); // 定義在scene里能看到什么 var camera = new THREE.PerspectiveCamera(45,window.innerWidth / window.innerHeight,0.1, 1000); // 計算指定camera角度下scene的樣子--使用顯卡渲染 var renderer = new THREE.WebGLRenderer(); // 背景顏色 renderer.setClearColorHex(0xEEEEEE); // 背景大小 renderer.setSize(window.innerWidth, window.innerHeight);2、添加坐標軸
// 創(chuàng)建坐標軸 var axes = new THREE.AxisHelper(20); scene.add(axes);3、添加一個灰色的平面
// 創(chuàng)建平面 // 定義平面尺寸 -- 寬60，高20 var planeGeometry = new THREE.PlaneGeometry(60, 20); // 顏色 var planeMaterial = new THREE.MeshBasicMaterial({color: 0xcccccc}); // 合并尺寸和顏色 var plane = new THREE.Mesh(planeGeometry, planeMaterial); // 定義位置 // 繞著x軸旋轉(zhuǎn)90度 plane.rotation.x = -0.5*Math.PI; plane.position.x = 15; plane.position.y = 0; plane.position.z = 0; scene.add(plane);4、添加一個正方體
// 創(chuàng)建方塊var cubeGeometry = new THREE.CubeGeometry(4, 4, 4);var cubeMaterial = new THREE.MeshBasicMaterial({color: 0xff0000,wireframe: true});var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);cube.position.x = -4;cube.position.y = 3;cube.position.z = 0;scene.add(cube);5、添加一個球體
// 創(chuàng)建球體var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);var sphereMaterial = new THREE.MeshBasicMaterial({color: 0x7777ff,wireframe: true});var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);sphere.position.x = 20;sphere.position.y = 4;sphere.position.z = 2;scene.add(sphere);6、指定相機的位置和懸掛的角度
// 指定相機的位置，將其懸掛在場景上方camera.position.x = -30;camera.position.y = 40;camera.position.z = 30;// 指向場景中心camera.lookAt(scene.position);7、講scene和camera掛載到html
// 掛載到html上$("#WebGl-output").append(renderer.domElement);renderer.render(scene, camera);結(jié)果如圖
轉(zhuǎn)載于:https://my.oschina.net/u/3589012/blog/3050284
總結(jié)
以上是生活随笔為你收集整理的学习threeJS(一)--第一个threeJs的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
