three.js入門

時間 2019-11-10

標籤 three.js 入門欄目 JavaScript 简体版

原文原文鏈接

1.下載three.js庫。https://github.com/mrdoob/three.js/html

第一步：新建一個項目文件夾「Threejs」git

第二步：在Threejs文件夾內新建一個html文件（index.html）。該文件是經過瀏覽器進入遊戲的入口。github

第三步：在Threejs文件夾內新建一個libs文件夾，用來存放three.js庫和須要用到的其餘庫。編程

第四步：在Threejs文件夾內新建一個images文件夾，用來存放須要素材。瀏覽器

第五步：在Threejs文件夾內新建一個js文件夾，用來存放咱們開發項目寫的腳本。app

index.html文件dom

<!DOCTYPE html>
<html>
<head>
    <title>three.js</title>
    <script src="libs/three.js"></script>
    <script src="js/main.js"></script>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<script>

</script>
<body>
</body>
</html>

three.js文件 在目錄下創建libs文件夾，把three,js拷貝進去函數

https://raw.githubusercontent.com/mrdoob/three.js/master/build/three.jsui

main.js文件spa

var renderer;//渲染器
var scene;//場景
var camera;//相機
function init() {//init()函數是咱們整個項目的入口，相似咱們平時編程時的main函數。
    scene = new THREE.Scene();//場景
    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);//相機
    renderer = new THREE.WebGLRenderer();//渲染
    renderer.setClearColor(0x000000, 1.0);
    renderer.setSize(window.innerWidth, window.innerHeight);

    document.body.appendChild(renderer.domElement);
    render();
}
function render() {
    requestAnimationFrame(render);
    renderer.render(scene, camera);
}
window.onload = init;

漆黑一片。由於咱們還沒向場景添加任何東西。

1. three.js - (入門四)
2. three.js入門篇
3. three.js - (入門一)
4. Three.js 基礎入門
5. three.js 入門案例
6. three.js 場景入門
7. three.js入門練習 (1)
8. three.js詳解之一入門
9. three.js 入門詳解(二)
10. three.js 入門詳解(一)
更多相關文章...
• Memcached入門教程 - NoSQL教程
• Neo4j數據庫入門教程 - NoSQL教程
• YAML 入門教程
• Java Agent入門實戰（一）-Instrumentation介紹與使用

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。