three.js入門練習 (1)

threejs入門

• 本文引用https://cdn.bootcss.com/three...
• 需對三維圖形學有必定的認知， 掌握javascript

基礎瞭解

1. 物體
2. 場景（scene）
3. 相機（camera）
4. 渲染器（rander）

開始

// 常量定義
const dom = document.getELementById('mycanvas');
let scene = new THREE.Scene(); // 建立場景
let camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.01, 10); // 建立遠景相機
camera.position.z = 1;
let geometry = new THREE.BoxGeometry(0.2,0.2,0.2); // 建立一個盒子
let material = new THREE.MeshNormalMaterial(); // 建立材質
let mesh = new THREE.Mesh(geometry, material); // 轉換成網孔對象的基類
scene.add(mesh); // 將物體放入場景內
let renderer = new THREE.WebGLRenderer({ 
    antialias: true, 
    canvas: dom
}); // 建立渲染器
renderer.setClearColor(0xf3f5f9);
renderer.setSize(window.innerWidth, window.innerHeight);

renderer.render(scene, camera); // 將咱們定義的場景和相機渲染出來

如上 會繪製一個正方體在頁面， 咱們讓他動起來

function render(){
    requestAnimationFrame(render)
    
    mesh.rotation.x += 0.01
    mesh.rotation.y += 0.01

    renderer.render(scene, camera)
}

render()

咱們刷新頁面， 會看到一個多色的正方體
你能夠嘗試去切換材質 看看會發生什麼