three.js系列---【3D之Three.js實現三維場景】
阿新 • • 發佈：2022-03-24
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>第一個three.js檔案_WebGL三維場景</title> <style> body { margin: 0; overflow: hidden; /* 隱藏body視窗區域滾動條 */ } </style> <!--引入three.js三維引擎--> <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script> <!-- <script src="./three.js"></script> --> <!-- <script src="http://www.yanhuangxueyuan.com/threejs/build/three.js"></script> --> </head> <body> <script> // 第一步：建立場景物件Scenevar scene = new THREE.Scene(); // 1.建立網格模型 // a.建立一個幾何體 // var geometry = new THREE.SphereGeometry(60, 40, 40); //建立一個球體幾何物件 var geometry = new THREE.BoxGeometry(100, 100, 100); //建立一個立方體幾何物件Geometry // b.設定幾何體的材質 var material = new THREE.MeshLambertMaterial({ color: 0x0000ff });// c.材質物件Material var mesh = new THREE.Mesh(geometry, material); //網格模型物件Mesh scene.add(mesh); //網格模型新增到場景中 // 2.光照設定 // a.設定光位置 var point = new THREE.PointLight(0xffffff); point.position.set(400, 200, 300); //點光源位置 scene.add(point); //點光源新增到場景中 // b.設定光分類（下邊是設定的環境光） var ambient = new THREE.AmbientLight(0x444444); // c.將光新增到場景中 scene.add(ambient); // console.log(scene) // console.log(scene.children) // 第二步 相機設定 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, height);//設定渲染區域尺寸 renderer.setClearColor(0xb9d3ff, 1); //設定背景顏色 document.body.appendChild(renderer.domElement); //body元素中插入canvas物件 //執行渲染操作 指定場景、相機作為引數 renderer.render(scene, camera); </script> </body> </html>