先跟著官網簡單的範例創建第一個3D場景，連接到 Day3 新增的按鈕
修改 index.js 新增當 day3 按鈕按下時指定呈現 day5.ejs 的頁面
router.get('/Day3', function(req, res, next) {
res.render('day5', { title: 'Day5' });
});
在 views 資料夾底下新增一個 day5.ejs 的檔案，在 head 引入 Three.jshttps://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js
Body 部分指定當連結到 day5.ejs 時需要使用 public/javascripts/day5.js，來呈現 three.js 的世界
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel='stylesheet' href='/stylesheets/style.css' />
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
</head>
<body>
<br>
<div id="stats"></div>
<script src="/javascripts/day5.js"></script>
<br>
</body>
</html>
在 public/javascripts 底下新增 day5.js 的檔案，依照官網的範例先建立場景及相機
// 建立場景
scene = new THREE.Scene()
// 建立相機
camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
)
camera.position.set(10, 10, 10)
camera.lookAt(scene.position)
接著建立渲染器
// 建立渲染器
renderer = new THREE.WebGLRenderer()
// 設定背景顏色
renderer.setClearColor(0xeeeeee, 1.0)
// 陰影效果
renderer.shadowMap.enable = true
// 陰影貼圖種類
renderer.shadowMap.type = 2
// 場景大小
renderer.setSize(window.innerWidth, window.innerHeight)
// 將渲染器的 DOM 綁到網頁上
document.body.appendChild(renderer.domElement)
建立光源
let pointLight = new THREE.PointLight(0xffffff)
pointLight.position.set(10, 10, -10)
scene.add(pointLight)
建立物件
const geometry = new THREE.BoxGeometry(1, 1, 1) // 幾何體
const material = new THREE.MeshPhongMaterial({
color: 0x00ff00
}) // 材質
cube = new THREE.Mesh(geometry, material) // 建立網格物件
cube.position.set(2, 1, 0)
scene.add(cube)
建立動畫使物體旋轉
function animate() {
cube.rotation.x += 0.01
cube.rotation.y += 0.01
}
也可以加入線
const material1 = new THREE.LineBasicMaterial( { color: 0x0000ff } );
const points = [];
points.push( new THREE.Vector3( - 1, 0, 0 ) );
points.push( new THREE.Vector3( 0, 1, 0 ) );
points.push( new THREE.Vector3( 1, 0, 0 ) );
const geometry1 = new THREE.BufferGeometry().setFromPoints( points );
const line = new THREE.Line( geometry1, material1 );
scene.add(line);
呼叫渲染器
function render() {
animate()
requestAnimationFrame(render)
renderer.render(scene, camera)
}
執行 node app.js 後點入 day3 的按鈕，就可以看到一個正在旋轉的方塊和設定好的線了
https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene
iThome鐵人賽
看影片追技術